// Initial and no-js state.
select.o-multiselect {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: unit(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: unit(4px / @base-font-size-px, em);
  padding-bottom: unit(4px / @base-font-size-px, em);
  border: 1px solid @select-border;

  option {
    padding: unit(2px / @base-font-size-px, em)
      unit(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: unit(@select-height / @base-font-size-px, em);
      box-sizing: border-box;
      border-left: 1px solid @select-border;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: @select-icon-bg;
      .u-svg-inline-bg( 'down' );

      background-size: auto @cf-icon-height;
      background-repeat: no-repeat;
      background-position: center center;
      border: 1px solid @input-border;
      content: '';
      pointer-events: none;
    }
  }

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

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

  &__fieldset {
    // Resets
    border-color: @input-border;
    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 {
      .u-svg-inline-bg( 'up' );
    }
  }

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

    li {
      margin: 0;
    }

    li:first-child {
      .a-label {
        padding-top: unit(10px / @base-font-size-px, em);
      }
    }

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

    &.u-no-results,
    &.u-max-selections {
      li {
        display: none;
      }

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

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

    &.u-max-selections {
      padding: unit(10px / @base-font-size-px, em);
      pointer-events: none;

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

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

  &__choices {
    padding-left: 0;
    // The following is required to make side-by-side LI
    // have a space between them.
    margin-right: unit(-10px / @base-font-size-px, em);
    margin-bottom: 0;

    li {
      display: inline-block;

      // The following is required to make side-by-side LI
      // have a space between them.
      margin-right: unit(10px / @base-font-size-px, em);
    }

    li:last-child {
      margin-bottom: unit(10px / @base-font-size-px, em);
    }

    button {
      border: none;
      background: none;
      padding: 0;
      text-align: left;

      &:focus {
        border-radius: unit(3px / @size-v, em);
        outline: 1px dotted var(--teal);
        outline-offset: 1px;

        label {
          background-color: var(--teal-20);
        }
      }

      &:hover label {
        background-color: var(--teal-40);
      }

      &:active label {
        background-color: var(--teal-60);
      }
    }

    label {
      display: inline-block;
      padding: 4px 10px;
      padding-right: 25px;

      background-color: var(--teal-20);
      border-radius: unit(3px / @size-v, em);
      border: 1px solid var(--teal);
      color: var(--black);
      cursor: pointer;
      font-size: unit(16px / @base-font-size-px, em);
      position: relative;

      &:hover {
        background-color: var(--teal-40);

        &::after {
          color: var(--white);
        }
      }

      .cf-icon-svg {
        position: absolute;
        top: 4px;
        right: 5px;
        margin-left: 10px;
        fill: var(--black);
      }
    }
  }
}