@use '@cfpb/cfpb-design-system/src/elements/utilities/shadow-utilities' as *;
@use '@cfpb/cfpb-design-system/src/utilities/icon' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

:host {
  // Theme
  --select-border-default: var(--gray-60); // $input-border
  --select-border-width-default: 1px;
  --select-border-error: var(--red);
  --select-border-width-error: 2px;
  --select-border-hover-default: var(--pacific); // $input-border-hover
  --select-border-focus-default: var(--pacific); // $input-border-focused
  --select-bg-disabled-default: var(--gray-10); // $input-bg-disabled
  --select-icon-bg-default: var(--gray-10);
  --select-text-disabled-default: var(--gray-dark); // $input-text-disabled

  // Private variables.
  --select-border: var(--select-border-default);
  --select-border-width: var(--select-border-width-default);
  --select-border-hover: var(--select-border-hover-default);
  --select-border-focus: var(--select-border-focus-default);

  display: flex;
  gap: rem-from-px(15px);
  flex-direction: column;
}

// The drop-down is expanded.
:host([open]) {
  .o-select {
    // The divider between input and content.
    &::before {
      position: absolute;
      z-index: 11;
      content: '';
      display: block;
      width: 100%;
      border-top: 1px solid var(--select-border);
      pointer-events: none;
    }
  }
}

// Hide light DOM content.
::slotted(ul),
::slotted(ol) {
  display: none !important;
}

//
// Custom scrollbar
//

// Reset lack of scrollbar on Apple devices.
::-webkit-scrollbar {
  appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--pacific-20);
  box-shadow: 0 0 1px var(--gray-10);
}

//
// Base styling
//

button {
  // This line-height settings is larger than base.scss to
  // accommodate the SVG height.
  line-height: unitless-from-px(21px);

  // Remove default focus ring.
  outline: none;
}

//
// Recommended select pattern
//

.o-select {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 35px;

  // Height should be 35px (33px + 1px top and bottom border).
  min-height: 33px;
  border: 1px solid var(--select-border);

  &:hover {
    border-color: var(--select-border-hover);
    box-shadow: 0 0 0 1px var(--select-border-hover);
  }

  &:focus,
  &:focus-within {
    outline: 1px dotted var(--select-border-focus);
    outline-offset: 2px;

    box-shadow: 0 0 0 1px var(--select-border-focus);
  }

  //
  // Header
  //

  &__cues {
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .o-select__cue-close,
    .o-select__cue-open {
      display: none;
    }

    &[aria-expanded='false'] .o-select__cue-open {
      display: block;
      margin-top: -1px;
    }

    &[aria-expanded='true'] .o-select__cue-close {
      display: block;
      margin-top: -5px;
    }
  }

  .no-results {
    padding: 6.5px 10px;
  }

  // Using the button element with .o-select__cues requires setting
  // an explicit width.
  button.o-select__cues {
    background: var(--select-icon-bg-default);
    border-left: 1px solid var(--select-border-default);
  }

  //
  // select text elements
  //

  &__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-left: rem-from-px(10px);

    cursor: pointer;
  }

  &__content {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    z-index: 10;
    width: calc(100% + 2px);
    left: -1px;
    border: 2px solid var(--pacific);
    background-color: var(--white);
    padding: 0;

    &::after {
      padding-bottom: rem-from-px(15px);
      width: 100%;
    }
  }

  &--down {
    &::before {
      bottom: -1px;
    }

    .o-select__content {
      border-top: 0;
      top: 35px;
    }
  }

  &--up {
    .o-select__content {
      border-bottom: 0;
      top: unset;
    }
  }

  @media print {
    // Hide the interactive select cues when printing
    &__cues[aria-expanded='true'] &__cue-close,
    &__cues[aria-expanded='false'] &__cue-open {
      display: none;
    } // Ensure all selects are expanded when printing.
    // To accommodate print stylesheets that display the raw URL after links,
    // set an enormous max height to accommodate selects that have a lot of links.
    &__content[aria-expanded='false'] {
      display: block;
      max-height: 99999px !important;
    }
  }
}

// Used when the set language reads right-to-left
html[lang='ar'] {
  :host {
    .o-select {
      &__cues {
        text-align: left;
      }
    }
  }
}

// We need to override the user agent stylesheet for form controls (button, input, select, textarea).
select {
  font: inherit;
}