@tailwind base;
@tailwind components;
@tailwind utilities;

.pagy {
  @apply inline-flex items-stretch -space-x-px;

  > *:first-child {
    @apply rounded-l-lg;
  }

  > *:last-child {
    @apply rounded-r-lg;
  }
}

.pagy a.gap {
  @apply px-2 text-stone-400;
}

.pagy a:not(.gap) {
  @apply flex items-center justify-center text-sm py-2 px-3 leading-tight 
         text-stone-500
         bg-white
         border border-stone-300;

  &:hover {
    @apply bg-stone-100
           text-stone-700;
  }

  &:not([href]) {
    @apply text-stone-300
           bg-stone-100
           cursor-default;
  }

  &.current {
    @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight 
           text-white 
           bg-stone-800
           border border-stone-800;
  }
}

span.pagy.info {
  @apply text-sm font-normal text-stone-500;
}

div:has(> input:required) > label::after,
div:has(> textarea:required) > label::after,
div:has(> select:required) > label::after {
  content: "*";
  @apply text-red-500 ml-1;
}

@layer utilities {
    .writing-sideways-lr { writing-mode: sideways-lr; }
    .text-orientation-mixed { text-orientation: mixed; }
}