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

@layer components {
  /** Leaflet z-index fix: keep drawer/modals above maps */
  .leaflet-container {
    position: relative;
    z-index: 0;
  }
  .leaflet-pane,
  .leaflet-control {
    z-index: 1;
  }

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

  .btn-primary {
    @apply border border-blue-700 bg-blue-600 hover:bg-blue-700 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.nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  .pagy.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.nav a.current {
    @apply text-secondary-700 bg-secondary-200;
  }
  /** -- Pagy */
}