@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/_components/input-label/style/input-label.scss' as *;
@use '@components/input-tag/style/input-tag.scss' as *;
@use '@components/_components/select-view/style/token.scss' as *;

$select-view-prefix-cls: string.unquote('#{theme.$prefix}-select-view');

.#{$select-view-prefix-cls} {
  &-single {
    @include input-label-style($select-view-prefix-cls);
  }

  &-multiple {
    @include input-tag-style($select-view-prefix-cls);

    &.#{$select-view-prefix-cls}-disabled-input {
      cursor: pointer;
    }
  }

  .#{$select-view-prefix-cls}.#{$select-view-prefix-cls}-borderless {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  &-suffix .#{theme.$prefix}-feedback-icon {
    margin-left: 4px;
  }

  &-clear-btn,
  &-icon {
    svg {
      display: block;
      font-size: $select-size-icon;
    }
  }

  &-opened &-arrow-icon {
    transform: rotateZ(180deg);
  }

  &-expand-icon {
    transform: rotate(-45deg);
  }

  &-clear-btn {
    display: none;
    cursor: pointer;
  }

  &:hover &-clear-btn {
    display: block;

    & ~ * {
      display: none;
    }
  }
}