@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(select) {
  display: inline-flex;

  @include when(readonly) {
    cursor: pointer;
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      height: getCssVar("size", $size);
      @include be(select, wrapper) {
        border-radius: getCssVar("radius", $size);
      }
    }
    @include m(list-#{$size}) {
      @include be(select, item) {
        height: getCssVar("size", $size);
        line-height: getCssVar("size", $size);
      }
    }
  }

  @include e(wrapper) {
    padding: 4px 0;
    box-sizing: border-box;
    background-color: getCssVar("color", "bg-3");
    box-shadow: getCssVar("shadow", "1");
    border: 1px solid getCssVar("color", "fill-3");
    border-radius: getCssVar("radius", "medium");
  }

  @include e(suffix-icon) {
    transition: transform 0.3s getCssVar("bezier", "1");
  }

  @include e(loading) {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: getCssVar("color", "text-2");
  }

  @include e(empty) {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include e(list) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @include e(item) {
    margin: 2px 0;
    font-size: getCssVar("font-size", "medium");
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: getCssVar("color", "text-1");
    cursor: pointer;
    padding: 0 16px;

    &:hover {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
    }

    &:active {
      background-color: getCssVar("color", "fill-3");
      color: getCssVar("color", "primary-6");
    }

    @include when(active) {
      color: getCssVar("color", "primary-6");
    }

    @include when(highlight) {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
    }
  }
}