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



@layer components {
  .link {
    @apply text-blue-600 hover:underline fill-blue-600;
  }

  .oba-td {
    @apply whitespace-nowrap pr-3 py-4 text-sm text-gray-500;
  }

  .oba-btn {
    @apply bg-gradient-to-b from-slate-50 to-slate-100;
    @apply text-sm text-gray-700 font-semibold;
    @apply border border-gray-300/70 hover:border-gray-400/50;
    @apply rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand;
  }

  .oba-btn--primary {
    @apply rounded-md bg-brand px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-tertiary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand;
  }

  .oba-btn--danger {
    @apply rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
  }

  .oba-btn--sm {
    @apply px-2 py-1 text-xs;
  }

  .h1 {
    @apply font-semibold text-3xl text-gray-800;
  }

  .h2 {
    @apply font-semibold text-xl text-gray-800;
  }

  .h3 {
    @apply font-semibold text-lg text-gray-800;
  }

  .h4 {
    @apply font-semibold  text-gray-800;
  }

  .oba-flash-alert {
    @apply rounded-md px-3 py-4 text-sm font-medium shadow-sm bg-slate-50 border bg-gradient-to-br from-slate-50 to-slate-100;
  }

  .oba-flash-alert--success {
    @apply from-brand to-brand-tertiary text-white border-brand;
  }

  .oba-flash-alert--danger {
    @apply from-red-500 to-red-600 text-white border-red-400;
  }

  .oba-flash-alert--warning {
    @apply from-yellow-500 to-yellow-600 text-white border-yellow-500;
  }

  .oba-flash-alert--info {
    @apply from-blue-400 to-blue-500 text-white border-blue-400;
  }



    @layer components {
    .pagy {
        @apply flex space-x-2 font-medium text-sm text-gray-600 justify-center mt-12;

        a:not(.gap) {
        @apply block rounded-lg px-3 py-2 bg-gray-100 transition duration-300 ease-in-out;

        &:hover {
            @apply bg-gray-200 shadow-lg;
        }

        &:not([href]) {
            @apply text-gray-400 bg-gray-100 cursor-not-allowed;
        }

        &.current {
            @apply text-white bg-brand shadow-md;
        }
        }

        label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-1 transition duration-300 ease-in-out;

        input {
            @apply bg-gray-100 border-none rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-brand-secondary;
        }
        }
    }
    }

}
.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  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;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */