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

@layer components {

  .page-title {
    @apply mb-6 text-5xl text-center font-special_heading text-pif-bronze text-balance;
  }

  .page-intro {
    @apply mb-6 text-xl text-pif-brown text-pretty;
  }

  .container-x-padding:not(.container-x-padding .container-x-padding) {
    @apply px-4 sm:px-6 lg:px-8;
  }

  .btn-delete button,
  .btn {
    @apply inline-flex items-center justify-center border border-transparent rounded-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply font-sans tracking-wider no-underline uppercase;
  }

  .btn-primary {
    @apply text-white hover:text-white hover:bg-pif-brown group-hover:bg-pif-brown bg-pif-bronze;
  }

  .btn-secondary {
    @apply text-pif-brown bg-pif-silver hover:bg-pif-brown group-hover:bg-pif-brown focus:ring-pif-brown;
  }

  .btn-link {
    @apply text-blue-700 underline hover:text-blue-900 focus:ring-blue-500;
  }

  .btn-delete button,
  .btn-outline-primary {
    @apply border text-pif-bronze border-pif-bronze hover:border-pif-black hover:text-pif-black hover:bg-pif-bronze hover:bg-opacity-10;
  }

  .btn-outline-secondary {
    @apply border text-pif-silver border-pif-silver hover:text-pif-brown hover:border-pif-brown focus:ring-pif-brown;
  }

  .btn-lg {
    @apply px-12 py-2 text-lg tracking-wider;
  }

  .btn-md {
    @apply px-6 py-2 text-base tracking-wider;
  }

  .btn-delete button,
  .btn-sm {
    @apply px-4 py-1 text-sm tracking-wider;
  }


  .btn-delete button {
    @apply mt-12 -mx-4 text-red-700 border-transparent hover:border-red-700;
  }

  .form-label,
  .form-legend {
    @apply inline-block font-medium text-pif-black;
  }

  .form-label {
    @apply mb-1;
  }

  .form-legend {
    @apply mb-2.5 text-base;
  }

  .form-input,
  .form-textarea,
  .form-select,
  .form-upload,
  .form-multiselect,

  .form-input,
  .form-textarea,
  .form-select,
  .form-upload,
  .form-multiselect {
    @apply block w-full border shadow-sm focus:border-pif-bronze border-pif-brown;
  }

  .form-upload {
    @apply p-2;
  }


  .form-checkbox-group,
  .form-radio-group {
    @apply flex;
  }

  .form-checkbox,
  .form-radio {
    @apply mt-1 mr-2;
  }


  .field_with_errors .form-select,
  .field_with_errors .form-input,
  .field_with_errors .form-textarea,
  .field_with_errors .form-upload,
  .form-checkbox-group:has(.field_with_errors) {
    @apply ring ring-red-600;
  }

  .form-checkbox-group .field_with_errors {
    @apply contents;
  }

  .admin-table {
    @apply -mx-4;
  }

  .admin-table table {
    @apply w-full font-sans;
  }

  .admin-table table thead {
    @apply border-b border-pif-beige;
  }

  .admin-table table th {
    @apply px-4 py-1 text-sm tracking-wider text-left uppercase text-pif-bronze;
  }

  .admin-table table tbody tr:hover {
    @apply bg-gray-50
  }

  .admin-table table th,
  .admin-table table td {
    @apply px-4 py-4;
  }

  .admin-table table td {
    @apply text-lg;
  }

  .admin-table table td a.row-action {
    @apply relative flex h-full;
    @apply inline-flex items-center justify-center border border-transparent rounded-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply font-sans tracking-wider no-underline uppercase;
    @apply border text-pif-bronze border-pif-bronze hover:border-pif-brown;
    @apply px-4 py-1 text-sm;

    &::after {
      content: "";
      @apply absolute inset-0 -m-4;

    }
  }
}