@use '~@moda/om';

.MultiSelect {
  $self: &;

  min-height: 2.5625rem;
  position: relative;
  display: flex;
  width: 100%;

  &--disabled {
    cursor: default;

    #{$self}__search {
      color: om.color(fog);
      cursor: default;

      &:hover,
      &:focus {
        border-color: om.color(elephant);
        background-color: om.color(noise);
      }
    }
  }

  &--error {
    border: 1px solid om.color(code-red);
  }

  &__search {
    @include om.input-styles();

    display: flex;
    align-items: center;
    padding: om.spacing(1, 7, 1, 1);
  }

  &__selected-items {
    display: flex;
    flex-wrap: wrap;
  }

  &__selected-item {
    display: flex;
    align-items: center;
    border: 1px solid om.color('ink');
    border-radius: om.space(2);
    margin: om.space(1);
    padding: om.space(1);
  }

  &__selected-value {
    cursor: default;
  }

  &__exit {
    margin-left: om.space(1);
    cursor: pointer;
  }

  &__icon {
    pointer-events: none;
    position: absolute;
    right: om.space(4);
    top: 50%;
    transform: translateY(-50%);

    &--shifted {
      right: om.space(6);
    }
  }
}