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

@include b(cascader) {
  box-sizing: border-box;
  cursor: pointer;
  @include e(wrapper) {
    background-color: getCssVar("color", "bg-3");
    color: getCssVar("color", "text-1");
    border-radius: getCssVar("radius", "medium");
    border: 1px solid getCssVar("color", "fill-3");
    box-shadow: getCssVar("shadow", "1");
  }
  @include e(panel) {
    height: 100%;
    display: flex;
  }
  @include e(column) {
    height: 200px;
    width: 160px;
    border-left: 1px solid getCssVar("color", "fill-3");
    overflow: hidden;
    &:first-child {
      border-left: none;
    }
  }
  @include e(item) {
    height: getCssVar("size", "medium");
    line-height: getCssVar("size", "medium");
    display: flex;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      background-color: getCssVar("color", "fill-2");
    }
    &:active {
      background-color: getCssVar("color", "fill-3");
    }
    @include when(checked) {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
    }
  }
  @include e(label) {
    flex: 1;
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @include e(arrow) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0 12px;
  }
}