@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;

// Initial and no-js state.
select.o-multiselect {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: math.div(7px, $base-font-size-px) + em;

  // Fixed height breaks the bottom border
  // mid-character to indicate there's more content.
  height: 5.5em;
  padding-top: math.div(4px, $base-font-size-px) + em;
  padding-bottom: math.div(4px, $base-font-size-px) + em;
  border: 1px solid var(--select-border-default);

  option {
    padding: math.div(2px, $base-font-size-px) + em
      math.div(6px, $base-font-size-px) + em;
  }
}

.o-multiselect {
  position: relative;

  &__header {
    position: relative;

    &::after {
      // Arrow box width must be odd size to properly center the bg image
      width: math.div($select-height, $base-font-size-px) + em;
      box-sizing: border-box;
      border: 1px solid var(--select-border-default);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: var(--select-icon-bg-default);

      background-image: $cfpb-background-icon-svg-down;

      background-size: auto $cf-icon-height;
      background-repeat: no-repeat;
      background-position: center center;
      content: '';
      pointer-events: none;
    }
  }

  &__search[type='text'] {
    display: block;

    box-sizing: border-box;
    width: 100%;
  }

  &__fieldset {
    // Resets
    border-color: var(--select-border-default);
    border-top: none;
    margin: 0;
    padding: 0;

    // Styles
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    z-index: 10;

    max-height: 0;
    margin-top: -1px;
    width: 100%;

    transition: max-height 0.25s ease-out;
  }

  &.u-active {
    .o-multiselect__fieldset {
      margin-top: 0;

      // This needs to match the value set in _bindEvents in Multiselect.js.
      // See https://github.com/cfpb/design-system/blob/4d26d5af04317bcc00b4677aa866fe8d526e82e0/packages/cfpb-forms/src/organisms/Multiselect.js#L340
      max-height: 140px;

      border-color: var(--pacific);
      border-width: 2px;
      border-top: 0;
    }

    // Reverse arrow when search drop-down is open.
    .o-multiselect__header::after {
      background-image: $cfpb-background-icon-svg-up;
    }
  }

  &__options {
    list-style-type: none;
    background-color: var(--white);
    padding: 0;

    li {
      margin: 0;
    }

    li:first-child {
      .a-label {
        padding-top: math.div(10px, $base-font-size-px) + em;
      }
    }

    &.u-filtered li:not(.u-filter-match) {
      display: none;
    }

    &.u-no-results,
    &.u-max-selections {
      padding: math.div(10px, $base-font-size-px) + em;

      li {
        display: none;
      }

      &::after {
        display: list-item;
      }
    }

    &.u-no-results::after {
      content: 'No results found';
    }

    &.u-max-selections {
      pointer-events: none;

      &::after {
        content: 'Reached maximum number of selections';
      }
    }

    .a-label {
      box-sizing: border-box;
      padding-top: math.div(5px, $base-font-size-px) + em;
      padding-right: 0;
      padding-bottom: math.div(5px, $base-font-size-px) + em;
      padding-left: math.div(10px, $base-font-size-px) + em;
      width: 100%;
    }
  }
}