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

@layer components {
  /** Buttons */
  .btn {
    @apply relative inline-flex items-center rounded-md px-4 py-2 text-sm font-medium;
  }

  .btn-xs {
    @apply px-2 py-1
  }

  .btn-primary {
    @apply border border-primary-300 bg-primary-800 hover:bg-primary-600 text-white;
  }

  .btn-secondary {
    @apply border border-secondary-300 bg-secondary-300 hover:bg-secondary-200 text-foreground-700;
  }

  .btn-amber {
    @apply border border-amber-300 bg-amber-300 hover:bg-amber-200 text-foreground-700;
  }

  .btn-teal {
    @apply border border-teal-300 bg-teal-300 hover:bg-teal-200 text-foreground-700;
  }

  .btn-danger {
    @apply border border-red-600 bg-red-500 hover:bg-red-600 text-white;
  }

  .btn-neutral {
    @apply border border-gray-300 bg-background text-foreground-700 hover:bg-gray-50;
  }

  .btn-disabled {
    @apply cursor-not-allowed;
  }
  /** -- Buttons */

  /** Pagy */
  .pagy {
    @apply text-sm text-foreground-700;

    label {
      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
      input {
        @apply bg-gray-100 border-none rounded-md;
      }
    }
  }

  .pagy.series-nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  .pagy.series-nav a {
    @apply relative inline-flex items-center px-4 py-2 font-semibold text-foreground-700 ring-1 ring-inset ring-gray-300;

    &:first-child {
      @apply rounded-l-md text-foreground-400;
    }

    &:last-child {
      @apply rounded-r-md text-foreground-400;
    }

    &:hover {
      @apply bg-gray-50;
    }

    &:focus {
      @apply z-20 outline-offset-0;
    }

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

  .pagy.series-nav a[aria-current="page"] {
    @apply text-secondary-700 bg-secondary-200;
  }
  /** -- Pagy */

  div.tommify {
    @apply !py-0;
  }

  .tommify .ts-control {
    @apply w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-gray-400 sm:leading-6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 1.5rem !important;
  }

  .tommify .ts-control .item {
    @apply truncate;
  }

  .tommify .ts-dropdown.single {
    min-width: 40rem;
  }
}