autocomplete-clab {
  flex-grow: 1;
}

multiple-clab {
  max-width: 100%;
  flex-grow: 1;
}

select[multiple],
ol.multiple-clab {
  margin-bottom: 0.4rem;
  border: 1px solid colors('base200');
  border-radius: 0.4rem;
  flex-grow: 1;
  background-color: colors('white');

  li {
    min-height: 3.2rem;
    padding: 0.4rem 1.6rem;
    outline: none;
    cursor: pointer;

    &.selected {
      color: colors('white');
      background-color: colors('accent500');
    }
  }
}

.dropdown-clab {
  .value_wrapper {
    @extend input, [type='text'];
    @extend %truncate;
    display: flex;
    padding-right: 2rem;
    align-items: center;
    text-align: left;
    cursor: pointer;
  }

  .placeholder {
    color: inherit;
  }

  .input {
    input {
      padding-right: 2.4rem;
    }

    &::after {
      @extend %fast-transition;
      content: '\f107';
      position: absolute;
      top: 1rem;
      right: 1rem;
      color: colors('base500');
      font-family: FontAwesome;
      font-size: 1.4rem;
      line-height: 1;
      pointer-events: none;
    }
  }
}

.autocomplete-clab,
.dropdown-clab {
  .value_wrapper.disabled {
    &.active {
      border-color: colors('accent500');
    }

    &.disabled {
      color: colors('base300');
      background-color: rgba(0, 0, 0, 0.01);
      cursor: not-allowed;

      &:active,
      &:focus {
        border-color: colors('base200');
        box-shadow: none;
      }
    }
  }

  .options-list {
    display: none;
    overflow: auto;
    margin-bottom: 0;
    position: absolute;
    top: 3.4rem;
    right: 0;
    left: 0;
    z-index: 3;
    background-color: colors('white');
    box-shadow: elevations('z2');

    li {
      margin: 0;
      padding: 0.4rem 1.2rem;
      background-color: colors('white');
      cursor: pointer;

      &[data-disabled='true'] {
        color: colors('base300');
        cursor: not-allowed;
      }

      &.hide {
        display: none;
      }

      &.selected {
        color: colors('accent500');
      }
    }

    &.active {
      display: block;
    }

    &.hidden {
      display: block;
      opacity: 0;
    }

    .noResults {
      cursor: initial;
    }
  }
}