/* app/assets/stylesheets/pagy-tailwind.css */

@layer components {
  .pagy {
    --spacing:      0.25rem;
    --padding:      0.65rem;
    --rounding:     0.375rem;  /* rounded-md に統一（0.5rem → 0.375rem） */
    --border-width: 0rem;
    --font-size:    0.875rem;
    --font-weight:  600;
    --line-height:  1.75;
    --opacity:      1;

    /* ── ライトモード ── */
    /* ページ番号は中立的な情報なので gray テキスト */
    --text:               rgb(75 85 99);    /* gray-600 */
    --text-hover:         rgb(17 24 39);    /* gray-900 */
    /* アクティブページはグレー反転パターン（ナビゲーション状態） */
    --text-current:       rgb(255 255 255); /* white */
    --background:         transparent;
    --background-hover:   rgb(243 244 246); /* gray-100 */
    --background-current: rgb(17 24 39);   /* gray-900 */
    --background-input:   rgb(249 250 251); /* gray-50 */

    @apply flex space-x-[var(--spacing)] font-[var(--font-weight)]
    text-[length:var(--font-size)] text-[var(--text)]
    leading-[var(--line-height)];

    a:not([role="separator"]) {
      @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)]
      bg-[var(--background)]
      border-solid border-[var(--background-current)] border-[length:var(--border-width)]
      opacity-[var(--opacity)];
    }

    a[href]:hover {
      @apply bg-[var(--background-hover)] text-[var(--text-hover)];
    }

    a:not([href]) {
      @apply cursor-default;
    }

    a[role="link"]:not([aria-current]) {
      @apply opacity-[calc(var(--opacity)*.6)];
    }

    a[aria-current] {
      @apply bg-[var(--background-current)] text-[var(--text-current)];
    }

    label {
      @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
      py-[calc(var(--padding)/3-var(--border-width))]
      bg-[var(--background)] border-solid border-[length:var(--border-width)]
      border-[var(--background-current)];

      input {
        @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)]
        rounded-[calc(var(--rounding)/2)]
        font-[var(--font-weight)] bg-[var(--background-input)]
        border-[length:var(--border-width)] border-[var(--background-current)];
      }
    }
  }

  /* ── ダークモード ── */
  .dark .pagy {
    --text:               rgb(156 163 175); /* gray-400 */
    --text-hover:         rgb(243 244 208); /* gray-100 */
    /* アクティブページはグレー反転（dark では white 背景・gray-900 テキスト） */
    --text-current:       rgb(17 24 39);    /* gray-900 */
    --background:         transparent;
    --background-hover:   rgb(31 41 55);    /* gray-800 */
    --background-current: rgb(255 255 255); /* white */
    --background-input:   rgb(17 24 39);    /* gray-900 */
  }
}