@use '@cfpb/cfpb-design-system/src/elements/base' as *;
@use '@cfpb/cfpb-design-system/src/utilities' as *;
@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon';
@use '../cfpb-utilities/transition/transition.css' as *;
@use '../../utilities/functions' 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);

  // 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;
      }
    }
  }
}

// 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;
    }
  }
}

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