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

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

@layer base {
  @font-face {
    font-family: 'Bellota Text';
    src: url("/assets/BellotaText-Light-d10b64ad.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Bellota Text';
    src: url("/assets/BellotaText-Regular-209714c5.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Bellota Text';
    src: url("/assets/BellotaText-Bold-3fef518a.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-Light-7ee070bd.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-Regular-f42d92eb.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-Medium-ba70c856.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-SemiBold-484547e3.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-Bold-4b6b7f42.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans';
    src: url("/assets/NotoSans-ExtraBold-7abd62ca.ttf") format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  details > summary {
    list-style-type: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }
}
/*
    ============================
    Tailwind Button Components
    ============================
*/
.btn--primary {
   @apply cursor-pointer flex justify-center items-center py-2 px-4 max-h-10
          whitespace-nowrap bg-lime-500 border border-transparent text-base font-medium rounded-md
          shadow-sm text-white hover:bg-lime-600
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500
}

.btn--danger {
  @apply cursor-pointer flex justify-center items-center py-2 px-4 max-h-10
         whitespace-nowrap bg-red-600 border border-transparent text-base font-medium rounded-md
         shadow-sm text-white hover:bg-red-700
         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
}

.btn--secondary {
  @apply cursor-pointer flex justify-center items-center py-2 px-4 max-h-10
         whitespace-nowrap bg-white border border-gray-300 rounded-md
         shadow-sm text-base font-medium text-gray-700 hover:bg-gray-50
         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-dark-blue-500
}

.btn--link {
  @apply font-medium text-dark-blue-600 hover:text-dark-blue-500
}

.btn--navbar {
  @apply text-white hover:bg-dark-blue-600 hover:bg-opacity-25 flex items-center px-2 py-2 text-sm font-medium rounded-md
}

.btn--navbar-active {
  @apply bg-dark-blue-500 hover:bg-opacity-100
}
/*
    ============================
    Tailwind Form Components
    ============================
*/

.form--label {
  @apply block text-sm font-medium text-gray-700
}

.form--input {
  @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-dark-blue-500 focus:border-dark-blue-500 sm:text-sm
}

.form--input-md {
  @apply rounded-md sm:text-sm border-gray-300 w-96
}

.form--input[readonly] {
  @apply bg-gray-100 focus:ring-gray-500 focus:border-gray-500
}

.form--textarea {
  @apply bg-white focus:ring-gray-500 focus:border-gray-500 block w-full sm:text-sm border-gray-300 rounded-md
}

.form--radio-button {
  @apply h-4 w-4 text-dark-blue-600 focus:ring-dark-blue-500 border-gray-300 rounded-full
}

.form--checkbox {
  @apply h-4 w-4 text-dark-blue-600 focus:ring-dark-blue-500 border-gray-300 rounded
}

.form--input-error {
  @apply border-red-500 border focus:outline-none
}

.form--error-message {
  @apply mt-1 text-sm text-red-600
}

.form--label-error {
  @apply text-red-600
}
/*
    ============================
    Tailwind Progress Bar Components
    ============================
*/

.progress-bar {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 10px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar > span {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  @apply bg-dark-blue-200
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 2px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
/*
    ============================
    Question Tree Highlight Animation
    ============================
*/

@keyframes highlight-pulse {
  0% {
    background-color: transparent;
    box-shadow: none;
  }
  20% {
    background-color: #fef08a;
    box-shadow: 0 0 0 4px #fef08a;
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.highlight-flash {
  animation: highlight-pulse 2s ease-out;
  border-radius: 0.375rem;
}