@import '../style/common.less';
  @import '../style/variables.dark.less';
  @import './../style/components/list-item.less';
@import './../style/components/select.less';
.@{css-prefix}cascader {
  .bui-input-wrapper {
    position: relative;
    .bui-input {
      .input();
      padding-right: @cascader-input-padding-right;
    }
  }
  .bui-cascader-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    fill: @text-color-3;
    &.open {
      z-index: @input-clear-zindex;
      transform: rotate(-180deg);
    }
  }
  .bui-select-clear-icon {
    opacity: 0;
    z-index: @input-clear-zindex;
  }
  .bui-select-arrow-icon {
    opacity: 1;
    z-index: @input-active-zindex;
  }
  &-disabled {
    .bui-cascader-icon {
      fill: @disabled-default-color;
    }
  }
  &:hover {
    .bui-select-icon-wrapper {
      .bui-select-clear-icon {
        opacity: 1;
      }
      .bui-select-arrow-icon {
        opacity: 0;
      }
    }
  }
  &-custom {
    .bui-select-wrapper {
      border: 1px solid @select-border;
      padding: 5px 32px 5px 12px;
      border-radius: @border-radius-base;
      min-height: @select-height-base;
      &.active {
        border-color: @cascader-custom-input-active-border;
        box-shadow: @select-active-box-shadow;
      }
      &:hover {
        border-color: @cascader-custom-input-hover-border;
      }
    }

  }
  .bui-single-prefix-wrapper,
  .bui-multiple-prefix-wrapper {
    color: @text-color-1;
  }
}
.bui-cascader-menus {
  font-size: 0;
  margin-top: 4px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: @cascader-popper-shadow;
  z-index: @popper-z-index;
  border-radius: @border-radius-base;
  overflow: hidden;
  background: @cascader-menus-bg;
  &-sm,
  &-xs,
  &-small {
    .bui-cascader-menu .bui-cascader-menu-item {
      font-size: @font-size-sm;
      line-height: @line-height-sm;
    }
  }
  .@{css-prefix}auto-complete-content {
    box-shadow: none;
    border-radius: 0;
    margin-top: 0;
  }
  .@{css-prefix}input {
    border-style: solid;
    border-color: @cascader-search-border;
    border-bottom-color: @cascader-search-divider-color;
    border-width: 0 0 1px 0;
    font-size: @cascader-filter-icon-size;
    .bui-input {
      border-color: @cascader-search-input-border;
      outline: none;
      &:active,
      &:hover,
      &:focus {
        border-color: @cascader-search-input-active;
        box-shadow: none;
      }
    }
  }
  .bui-cascader-menu {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 200px;
    height: 190px;
    border-left: none;
    background-color: @cascader-menu-bg;
    margin: 0;
    border-right: 1px solid @cascader-menu-divider-color;
    &:last-child {
      border-right: 0;
    }
    .scrollbar();
    &-list {
      padding: @list-padding-top 0;
      &:not(:last-child) {
        padding-bottom: 0;
      }
    }
    &-item {
      position: relative;
      font-size: @font-size-md;
      line-height: @line-height-md;
      padding: @list-padding-top @list-padding-left;
      color: @cascader-menu-item-color;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .bui-menu-item-arrow,
      .bui-loading-icon{
        position: absolute;
        right: 12px;
        top: 50%;
        margin-top: -7px;
        width: 14px;
        height: 14px;
      }
      .bui-menu-item-arrow {
        fill: @cascader-menu-item-arrow-icon-color;
        &.bui-menu-item-arrow-disabled {
          fill: @cascader-menu-item-arrow-icon-disabled-color;
        }
      }
      &.bui-cascader-menu-item-children {
        padding-right: 32px;
      }
      &-content {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &:hover {
          color: @cascader-menu-item-hover-color;
          .bui-menu-item-arrow {
            fill: @cascader-menu-item-arrow-icon-hover-color;
          }
        }
      }
      &-checkbox,
      &-radio {
        padding-right: @padding-xs;
        position: absolute;
        top: 50%;
        margin-top: (-@line-height-md / 2);
        left: @padding-sm;
      }
      &-checkall {
        &:hover {
          color: @cascader-menu-item-checkall-hover-color;
          & .@{css-prefix}checkbox .bui-checkbox-input-wrapper {
            border-color: @cascader-menu-item-checkall-checkbox-hover-border;
          }
        }
      }
      &:hover {
        background-color: @cascader-menu-item-hover-bg;
      }
      &.active {
        color: @cascader-menu-item-active-color;
        .bui-menu-item-arrow {
          fill: @cascader-menu-item-arrow-icon-active-color;
        }
      }
      &.disabled {
        color: @cascader-menu-item-disabled-color;
        background-color: @cascader-menu-item-disabled-bg;
        cursor: not-allowed;
        .bui-menu-item-arrow {
          fill: @cascader-menu-item-arrow-icon-disabled-color;
        }
        .bui-cascader-menu-item-content {
          color: @cascader-menu-item-disabled-color;
        }
      }
      .bui-cascader-custom-render-item {
        display: flex;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    &-item-leaf {
      &:hover {
        & .@{css-prefix}radio .bui-radio-input-wrapper {
          border: 1px solid @cascader-menu-independent-item-radio-hover-border;
        }
        & .@{css-prefix}checkbox .bui-checkbox-input-wrapper {
          border-color: @cascader-menu-independent-item-checkbox-hover-border;
        }
      }

      & .@{css-prefix}radio,
      & .@{css-prefix}checkbox {
        &:hover + .bui-cascader-menu-item-content {
          color: @cascader-menu-item-hover-color;
          .bui-menu-item-arrow {
            fill: @cascader-menu-independent-item-radio-hover-border;
          }
        }
      }
    }
    &-multiple,
    &-independent-single {
      .bui-cascader-menu-item {
        padding-left: @list-multiple-padding-left;
      }
    }
    &-rollable {
      overflow: auto;
    }
    .bui-cascader-menu-infinite-scroll{
      height: 100%;
    }
  }
  &-filterable {
    .bui-cascader-menu {
      width: 212px;
    }
  }
  .bui-cascader-menu-empty {
    width: 200px;
    height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: @cascader-menu-empty-color;
    text-align: center;
    font-size: @font-size-sm;
    line-height: @line-height-sm;
    .bui-icon-empty {
      fill: @cascader-menu-empty-icon-color;
      width: 37px;
      height: 37px;
      display: block;
      margin: 0 auto 10px;
    }
  }
}

.bui-cascader-queryselections-item {
  & .@{css-prefix}-list-item__item {
    font-size: 0;

    .bui-cascader-queryselections-checkbox {
      margin-right: @padding-xs;
    }
  }
  & .bui-dropdown-list-item {
    display: inline-block;
    max-width: 376px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: @font-size-md;
    vertical-align: bottom;
  }
}

.@{css-prefix}cascader-rtl {
  direction: rtl;
  .bui-cascader-icon {
    left: 10px;
    right: auto;
  }
  .bui-select-icon {
    right: auto;
    left: 12px;
  }
  .bui-select-wrapper {
    .bui-input {
      padding-right: 12px;
      padding-left: @cascader-input-padding-right;
    }
    &-multiple {
      &, &.bui-select-wrapper-absolute{
        padding-left: @select-input-padding-right;
        padding-right: 8px;
      }
    }
    .bui-selected-label {
      right: auto;
      left: @select-input-padding-right;
    }
    .bui-single-prefix-wrapper {
      right: 12px;
      left: auto;
    }
  }
}
.bui-cascader-menus-rtl {

  direction: rtl;
  .bui-cascader-menu {
    .bui-menu-item-arrow, .bui-loading-icon{
      right: auto;left: 12px;
    }
    &-item {
      padding-left: 12px;
      padding-right: 12px;
      &.bui-cascader-menu-item-children {
        padding-left: 32px;
      }
      &-checkbox, &-radio {
        padding-left: @padding-xs;
        padding-right: 0;
        left: auto;
        right: @padding-sm;
      }
    }
    &-multiple, &-independent-single {
      .bui-cascader-menu-item {
        padding-right: @list-multiple-padding-left;
      }
    }
  }
}