@use 'sass:map';

@use './shared' as *;
@use './design' as *;
@use './input.scss' as input;

$select: () !default;
$select: map.merge(
  (
    list-bg-color: value('bg-color-base'),
    list-b-color: value('border-color-light-2'),
    list-border: value('border-shape') value('select-list-b-color'),
    list-radius: value('radius-base'),
    list-shadow: value('shadow-base'),
    check-color: value('color-primary-base'),
    empty-color: value('content-color-placeholder'),
    filter-height: 32px,
    filter-divider: value('border-shape') value('border-color-light-2')
  ),
  $select
);

.#{$namespace}-select {
  &-vars {
    @include define-preset-values('select', $select);
  }

  @include basis {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
  }

  &--filterable {
    cursor: text;
  }

  @include input.handler(#{&}__selector);

  &__selector {
    cursor: inherit;
  }

  &--disabled {
    cursor: not-allowed;
  }

  &--multiple &__selector {
    @include define-css-var('input-v-padding', 2px);

    height: auto;
    min-height: value('input-height');
  }

  &__control,
  &__input {
    user-select: none;
  }

  &__control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 40px;
  }

  &--multiple &__control {
    flex-wrap: wrap;
    min-height: 0;
    margin: -1px 0;
  }

  &--responsive &__control {
    flex-wrap: nowrap;
  }

  &__tags {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  &__tag {
    max-width: 100%;
    height: calc(value('input-height') - 8px);
    margin: 2px 4px;
    margin-inline-start: 0;
    pointer-events: auto;
    cursor: pointer;

    // &--preview {
    //   pointer-events: none;
    //   opacity: 50%;
    // }

    // &--deleted {
    //   text-decoration: line-through;
    // }
  }

  &--disabled &__tag {
    cursor: not-allowed;
  }

  &__selector--small &__tag {
    & > span {
      height: 100%;
      line-height: 1;
    }
  }

  &__control &__tag + &__tag {
    margin-inline-start: 0;
  }

  &__rest-tip {
    max-width: 100%;
  }

  &__anchor {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: calc(value('input-height') - 8px);
    margin: 2px 4px;
    margin-inline-start: 0;
  }

  &__input {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    color: inherit;
    pointer-events: none;
    user-select: auto;
    background-color: transparent;
    border: 0;
    outline: 0;

    &--multiple {
      position: relative;
      min-width: 1px;
    }

    &--visible {
      pointer-events: auto;
    }

    &::placeholder {
      color: value('input-placeholder-color');
    }
  }

  &__device {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: pre;
    visibility: hidden;
    opacity: 0%;
  }

  &__selected,
  &__placeholder {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  &__selected--placeholder,
  &__placeholder {
    color: value('input-placeholder-color');
  }

  &--multiple#{&}--filter &__placeholder {
    margin-left: -4px;
  }

  &__popper {
    min-width: 98px;
  }

  &__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    user-select: none;
    background-color: value('select-list-bg-color');
    border: value('select-list-border');
    border-radius: value('select-list-radius');
    box-shadow: value('select-list-shadow');

    .#{$namespace}-native-scroll__wrapper {
      padding: 5px 0;
    }

    &--with-extra {
      padding: 5px 0;

      .#{$namespace}-native-scroll__wrapper {
        padding: 0;
      }
    }
  }

  &__filter {
    padding: 0 6px;
    border-bottom: value('select-filter-divider');
  }

  &__options {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;

    &--has-check {
      .#{$namespace}-option {
        justify-content: space-between;
      }
    }
  }

  &__group {
    padding: value('option-label-v-padding') value('option-label-h-padding');
  }

  &__label {
    flex: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &--group {
      font-size: value('option-group-font-size');
      color: value('option-group-color');
    }
  }

  &__check {
    color: value('select-check-color');
  }

  &__selector--focused &__arrow {
    transform: rotate(180deg);
  }

  &__empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px 16px;
    color: value('select-empty-color');
    white-space: nowrap;
    cursor: default;
    background-color: value('select-list-bg-color');
  }

  &__clear {
    @include clean-button;
  }
}