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

@layer components {
  .pagy {
    --spacing:      0.25rem;   /* ボタン間の隙間 */
    --padding:      0.65rem;   /* ボタン内の左右パディング */
    --rounding:     0.5rem;    /* rounded-lg に相当。アプリの他ボタンと統一 */
    --border-width: 0rem;      /* ボーダーなし */
    --font-size:    0.875rem;  /* text-sm */
    --font-weight:  600;       /* font-semibold */
    --line-height:  1.75;
    --opacity:      1;

    /* ── ライトモードの色 ── */
    --text:               rgb(4 120 87);    /* emerald-700 */
    --text-hover:         rgb(6 95 70);     /* emerald-800 */
    --text-current:       rgb(255 255 255); /* white */
    --background:         rgb(255 255 255); /* white */
    --background-hover:   rgb(236 253 245); /* emerald-50 */
    --background-current: rgb(5 150 105);  /* emerald-600 */
    --background-input:   rgb(243 244 246); /* gray-100（ページ入力欄用） */

    @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(110 231 183); /* emerald-300 */
    --text-hover:         rgb(167 243 208); /* emerald-200 */
    --text-current:       rgb(255 255 255); /* white */
    --background:         rgb(55 65 81);    /* gray-700 */
    --background-hover:   rgb(6 53 33);     /* emerald-950 相当 */
    --background-current: rgb(5 150 105);  /* emerald-600（ライトと統一） */
    --background-input:   rgb(75 85 99);   /* gray-600 */
  }
}