@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../checkbox/style/mixin';

@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
@select-prefix-cls: ~'@{ant-prefix}-select';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox');

.@{cascader-prefix-cls} {
  width: 184px;

  &-checkbox {
    top: 0;
    margin-right: @padding-xs;
  }

  &-menus {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;

    &.@{cascader-prefix-cls}-menu-empty {
      .@{cascader-prefix-cls}-menu {
        width: 100%;
        height: auto;

        .@{ant-prefix}-empty {
          &-small {
            margin: 0;
            line-height: unset;
          }
        }
      }
    }
  }

  &-menu {
    flex-grow: 1;
    // min-width: 111px;
    min-width: 120px;
    max-width: 400px;
    // height: 180px;
    height: 205px;
    margin: 0;
    // margin: -@dropdown-edge-child-vertical-padding 0;
    // margin: @cascader-dropdown-edge-child-vertical-padding 0;
    padding: @cascader-dropdown-edge-child-vertical-padding 0;
    overflow: auto;
    vertical-align: top;
    list-style: none;
    // border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
    .customScrollbar();

    & + & {
      border-left: @border-width-base @border-style-base @cascader-menu-border-color-split;
    }

    &-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      // padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
      padding: @cascader-dropdown-vertical-padding @padding-xs;
      overflow: hidden;
      line-height: @cascader-dropdown-line-height;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        // background: @item-hover-bg;
        background: @primary-1;
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
          background: transparent;
        }
        .anticon {
          color: @disabled-color;
        }
      }

      &-loading,
      &-empty,
      &-failed {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: default;

        &:hover {
          background-color: @dropdown-background;
        }
      }

      &-failed {
        &-content {
          display: flex;
          align-items: center;
          color: @text-color-secondary;

          .@{iconfont-css-prefix} {
            margin-right: @margin-xss;
            font-size: 16px;
          }

          &-refresh {
            margin-left: @margin-xss;
            color: @primary-text-color;

            &:hover {
              color: @primary-color-hover;
              cursor: pointer;
            }
          }
        }
      }

      .@{cascader-prefix-cls}-menu-empty & {
        color: @disabled-color;
        cursor: default;
        pointer-events: none;
      }

      &-active:not(&-disabled) {
        // &,
        // &:hover {
        //   font-weight: @select-item-selected-font-weight;
        //   background-color: @cascader-item-selected-bg;
        // }
        color: @primary-text-color;
        background-color: @cascader-item-selected-bg;

        // .@{iconfont-css-prefix} {
        //   color: @primary-color;
        // }
      }

      &-content {
        flex: auto;
        width: 100%;
        overflow: hidden;
        line-height: @cascader-dropdown-line-height;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-expand &-expand-icon,
      &-loading-icon {
        margin-left: @padding-xss;
        color: @text-color-secondary;
        // font-size: 10px;
        font-size: @br-font-size-largest;

        .@{iconfont-css-prefix} {
          width: @br-font-size-largest;
          height: @br-font-size-largest;
          font-size: @br-font-size-largest;
        }
        .@{cascader-prefix-cls}-menu-item-disabled& {
          color: @disabled-color;
        }
      }

      &-keyword {
        // color: @highlight-clor;
        color: @primary-text-color;
        font-weight: 600;
      }
    }

    &-item + &-item {
      margin-top: 1px;
    }
  }

  &-menu-searchValue {
    .@{cascader-prefix-cls}-menu-item-expand {
      &-icon {
        display: none;
      }
    }
  }

  &-menu-virtual&-menu-searchValue {
    &:first-of-type {
      width: 100%;
    }
  }

  // &.@{select-prefix-cls} {
  //   &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector {
  //     padding-right: @font-size-sm + @control-padding-horizontal + 1.5 * @margin-xs;
  //   }
  //   &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
  //     padding-right: @font-size-sm + @control-padding-horizontal + 3.5 * @margin-xs;
  //   }
  // }

  // &.@{select-prefix-cls}-single {
  //   &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item {
  //     padding-right: 0;
  //   }
  // }

  &-dropdown.@{select-prefix-cls}-dropdown {
    max-width: initial;
    padding: 0;
  }

  &-dropdown-multiple {
    .@{cascader-prefix-cls}-menu {
      &-item {
        &-active:not(&-disabled) {
          color: @text-color;
        }
      }
    }
  }
}

@import './rtl';