@import "../settings/variables";
@import "../tools/forms";
@import "./typography";

.multiselect {
  height: auto;
  padding: 0;
  white-space: normal;

  &:focus-within {
    @include focus();
  }

  &--empty-value {
    .multiselect__search__input {
      cursor: pointer;
    }
  }

  &__values {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2px;
    margin-left: spacing(md);
    margin-right: spacing(xs);
    margin-top: 2px;
    min-width: 0;
    width: 100%;
  }

  &__icon {
    align-items: center;
    align-self: flex-start;
    display: flex;
    height: 34px;
    justify-content: flex-end;
    margin-left: spacing(xs);
    margin-right: spacing(md);
    min-width: 40px;
    width: 40px;
  }

  &__token,
  &__search {
    margin-bottom: 2px;
    margin-right: spacing(xs);
    margin-top: 2px;
  }

  &__token {
    flex: 0 1 auto;

    > div {
      max-width: 178px;
      width: 100%;
    }
  }

  &__search {
    flex: 1;
    max-width: 100%;
    min-width: 24px;

    &__input {
      @include placeholder($input-placeholder-color);
      @extend .sm-regular--primary;
      background-color: transparent;
      border-width: 0;
      font-family: inherit;
      padding: 0;
      height: 24px;
      width: 100%;

      &::-ms-clear {
        display: none;
      }

      &:focus {
        box-shadow: none;
        outline: none;
      }

      &--hidden {
        color: transparent;
      }
    }
  }
}