@use 'sass:color';
$select-item-border: set-border() !default;

.ls-select {
  $root: &;
  position: relative;
  width: 100%;
  cursor: pointer;

  &--error {
    border: set-border($color-error) !important;
  }

  &--sm {
    min-height: $field-size-sm;

    & #{$root}__input {
      min-height: $field-size-sm;
      font-size: $font-size-sm;
    }

    & #{$root}__icon {
      font-size: $icon-size-sm;
    }
  }

  &--md {
    min-height: $field-size-md;

    & #{$root}__input {
      min-height: $field-size-md;
      font-size: $font-size-md;
    }

    & #{$root}__icon {
      font-size: $icon-size-md;
    }
  }

  &--lg {
    min-height: $field-size-lg;

    & #{$root}__input {
      min-height: $field-size-lg;
      font-size: $font-size-lg;
    }

    & #{$root}__icon {
      font-size: $icon-size-lg;
    }
  }

  &--light {
    background-color: $color-input-bg;
    color: $color-theme-light-font;
  }

  &--dark {
    background-color: $color-theme-dark;
    color: $color-theme-dark-font;
  }

  &--round {
    border-radius: 6 * $sp;

    & #{$root}__text-container {
      padding-left: 4 * $sp;
      padding-right: 4 * $sp;
    }
  }

  &--disabled {
    color: color.adjust($color-disabled, $lightness: -20%);
    background-color: color.adjust($color-disabled, $lightness: 40%);
    pointer-events: none;
    border-color: $color-disabled;
  }

  &--closed {
    transition-delay: $animation-time;
  }

  &--expanded {
    transition-delay: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  &__icon {
    display: flex;
    align-items: center;
    padding: 0 3 * $sp;

    &--round {
      border-radius: 6 * $sp;
    }

    &--clickable {
      cursor: pointer;

      &:hover {
        background-color: $color-hover;
      }
    }
  }

  &__input {
    display: flex;
    align-items: stretch;
  }

  &__text-container {
    flex-grow: 1;
    width: 0;
    padding: 0 $field-sp;
    display: flex;
    flex-direction: column;
  }

  &__label {
    color: $color-label;
    font-size: $font-size-input-label;
    line-height: $font-size-input-label;
    padding-top: $sp;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__selected-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: $sp;
    flex-grow: 1;
    padding: $sp 0;
  }

  &__selected-item-badge {
    max-width: 100%;
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
    min-height: 2.4rem !important;
    white-space: nowrap;

    .ls-icon-button {
      min-height: 2.4rem;
      width: 2.4rem;
      font-size: 1.5rem;
    }
  }

  &__selected-item-badge-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__selected-item-remove {
    margin-left: 2 * $sp;
    flex-shrink: 0;
  }

  &__selected-item {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  &__selected-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__arrow-wrapper {
    padding: 0 3 * $sp;
    display: flex;
    align-items: center;
  }

  &__arrow {
    transition: all $animation-time linear;

    &--expanded {
      transform: rotate(180deg);
    }
  }

  &__dropdown {
    position: absolute;
    margin-top: 1px;
    z-index: $layer-dropdown;
    background-color: $color-white;
    width: 100%;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0;
    overflow: hidden;

    &--theme-light {
      background-color: $color-white;
      color: $color-theme-light-font;
    }

    &--theme-dark {
      background-color: $color-theme-dark;
      color: $color-theme-dark-font;
    }

    &--rounded {
      border-bottom-left-radius: $border-radius-main;
      border-bottom-right-radius: $border-radius-main;
    }

    &--rounded-lg,
    &--round {
      border-bottom-left-radius: $border-radius-large;
      border-bottom-right-radius: $border-radius-large;
    }
  }

  &__items {
    width: 100%;
    overflow-y: auto;
    box-shadow: $shadow-deep;
  }

  &__item {
    cursor: pointer;
    padding: 2 * $sp 3 * $sp;
    display: flex;
    justify-content: space-between;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    &:not(:last-of-type) {
      border-bottom: $select-item-border;
    }

    &--disabled {
      cursor: default;
      opacity: 0.4;

      &:hover {
        background-color: transparent;
        color: $color-theme-light-font;
      }
    }

    &--active {
      background-color: $color-primary;
      color: $color-theme-dark-font;
    }
  }
}