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

/**
 * Add global styles and classes here.
 */
@layer base {
  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }

  /* Must define the body color explicitly rather than relying on the browser default because,
  if left undefined, USWDS will apply its slightly lighter color */
  body {
    color: rgb(0 0 0);
  }

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    @apply bg-blue-600 border border-transparent text-white font-bold py-2 px-4 rounded;
  }

  /* TODO: Remove these extra USWDS button styles once all our buttons use USWDS classes.
    Right now, the general button styles above interfere with the USWDS button styles, so
    we have to override them explicitly here. */
  .usa-button {
    @apply py-3 px-5;
  }

  .usa-button:not(.usa-button--outline) {
    background-color: #005ea2;
  }

  .usa-button.usa-button--outline,
  .usa-button.usa-button--unstyled {
    background-color: white;
    color: #005ea2;
  }

  .add-map-filter.usa-button.usa-button--outline:disabled {
    @apply bg-white text-gray-400 border border-gray-400;
  }

  .usa-button.usa-modal__close {
    background-color: transparent;
    color: #71767a;
  }

  button:hover {
    @apply bg-blue-700;
  }

  button:disabled {
    @apply bg-white text-gray-400 border border-gray-400;
  }

  button[aria-expanded='true'] > .cf-accordion-button {
    @apply rotate-180;
  }

  /* Remove number steppers (https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp) */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }

  /**
   * USWDS's alignment strategy makes alerts look a little odd for us, so override
   * to remove the extra margin to make the alert body left-justified. It doesn't
   * respect using the margin-left-0 class or Tailwind's ml-0, so we override it here.
   */
  .usa-alert .usa-alert__body {
    margin-left: 0;
  }

  /* USWDS defaults to 1rem, which ends up looking weird and unbalanced on some pages. */
  .usa-alert-remove-top-margin {
    margin-top: 0;
  }

  /**
   * For explanation of why we need two different hidden classes see
   * initToggleQuestionBankButtons() in questionBank.ts
   */
  .cf-question-bank-hidden .cf-question-bank-panel {
    @apply translate-x-full;
  }
  .cf-question-bank-hidden .cf-question-bank-glasspane {
    @apply opacity-0;
  }

  @media screen and (min-width: 640px) {
    /* When expanded, the banner header was moving to the center because of margin-auto */
    .usa-banner__header--expanded .usa-banner__inner {
      margin-left: 0px;
    }
  }

  /* Rather than having a focus outline around the checkbox or radio button,
  it is around the label */
  input[type='radio']:focus,
  input[type='checkbox']:focus {
    @apply outline-none;
  }
  /* Mimics the focus outline styles from the checkbox or radio input on the label */
  .cf-radio-option:focus-within {
    @apply border-4;
  }

  /* Overriding the style set by USWDS for this element */
  #name-search {
    @apply mt-0;
  }

  .ti-header-band {
    background-color: #f0f0f0;
  }

  .filter-chip {
    @apply border border-gray-700 rounded-full mr-2 mb-2 text-sm
     has-[:checked]:bg-blue-100 has-[:checked]:border-blue-100
      has-[:checked]:font-semibold has-[:checked]:text-blue-900 flex;
  }

  /* Re-style USWDS file input hint since it has contrast issues with the non-northstar background.
     This can be removed once we switch to North Star. */
  .cf-question-fileupload .usa-hint {
    color: #1b1b1b;
  }

  .cf-file-uploading-tag {
    background-color: #fff7bf;
    color: #594d00;
    display: none;
  }

  /* If a file is being uploaded, show the file uploading tag... */
  .cf-file-uploading .cf-file-uploading-tag {
    display: inline-block;
  }

  /* ... and apply disabled styling to any interactive elements. */
  .cf-file-uploading .cf-disable-when-uploading {
    @apply bg-white text-gray-400 border border-gray-400;
    pointer-events: none;
    cursor: default;
  }

  /* The purpose of these classes are to help reduce the page load size cause by duplication of all these on each question. */
  .question-bank-add-button {
    font-weight: 600;
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    color: #113f9f;
    border-color: #113f9f;
    background-color: white;
    height: 3rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 0.5rem;

    /* Hover effects */
    transition: background-color 0.2s ease-in-out;
  }

  .question-bank-add-button:hover {
    background-color: #e5e7eb;
  }
  .question-bank-info-cell {
    font-weight: bold;
    align-items: center;
    color: black;
    display: flex;
    flex-direction: row;
  }

  .question-bank-element {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    border-color: #e2e8f0;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
  }

  .content-div {
    display: flex;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }

  .question-summary {
    float: right;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .repeated-disabled-warning {
    max-width: 365px;
  }

  .row-element {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
  }

  .row-element:hover {
    background-color: #f7fafc;
  }

  /* Fix pagination current page button color specificity issue */
  .usa-pagination .usa-current:visited {
    color: #fff;
  }

}
