@cascaderScope: ~'@{prefixCls}Cascader';
@cascaderNewScope: ~'@{prefixCls}CascaderNew';
// scCascaderNew-dropdown
.ant-cascader-menus {
  margin-top: 4px;
  .ant-cascader-menu {
    margin-right: 2px;
    padding-right: 4px;
    border-right: none;
    border-left: 1px solid #f0f0f0;
    // &:extend(.scrollbar4);
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }
  .ant-cascader-menu-item {
    min-width: calc(@input-x-width - 12px);
    // min-height: 28px;
    // line-height: 28px;
    padding: 3px 8px;
    margin: 0 0 0 6px;
    border-radius: @border-r-3;
    color: @heading-color;
    & + .ant-cascader-menu-item {
      margin-top: 2px;
    }
  }
  .ant-cascader-menu-item-disabled {
    // background: @disabled-bg-color;
    color: @disabled-color;
  }
}
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled), 
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
  background-color: @cascader-Menu-bg;
  color: @primary-color;
  font-weight: 400;
  .ant-cascader-menu-item-expand-icon {
    color: @primary-color;
    .anticon-right {
      display: inline-block;
      &::after {
        color: @primary-color;
      }
    }
  }
}
.ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled):hover {
  .ant-cascader-menu-item-expand-icon {
    .anticon-right {
      display: inline-block;
    }
  }
}
.ant-cascader-picker-arrow.ant-cascader-picker-arrow-expand {
  transform: rotate(180deg) translateX(-4px);
}
.ant-cascader-picker-focused {
  .sc-xiangxia {
    display: inline-block;
    transform: rotate(180deg);
    color: @primary-color;
    transition: 0.3s all;
  }
}
.ant-cascader-picker {
  color: @heading-color;
  min-width: @input-x-width;
  &.is-prefix {
    .ant-cascader-picker-label {
      padding: 0 20px 0 32px;
    }
    .ant-cascader-input.ant-input {
      padding-left: 32px;
    }
  }
}
.ant-cascader-picker-disabled {
  background: @disabled-bg-color;
  color: @disabled-color;
}
.ant-cascader-picker-label:hover + .ant-cascader-input.ant-input-disabled {
  border-color: @border-pagination-color;
}
div.ant-cascader-menu {
  padding: 6px 0;
  border-radius: @border-r-6;
}
.@{cascaderScope} {
  max-width: @input-x-width;
  width: @input-x-width;
  &-xs {
    width: @input-xs-width;
    max-width: @input-xs-width;
  }
  &-x {
    width: @input-x-width;
    max-width: @input-x-width;
  }
  &-md {
    width: @input-md-width;
    max-width: @input-md-width;
  }
  &-l {
    width: @input-l-width;
    max-width: @input-l-width;
  }
  &-xl {
    width: @input-xl-width;
    max-width: @input-xl-width;
  }
  &.is-prefix {
    & > span {
      position: relative;
    }
  }
  &-prefix {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    z-index: 1;
  }
  &.is-disabled {
    .@{cascaderScope}-prefix {
      color: @disabled-color;
    }
  }
}

.@{cascaderNewScope} {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  font-size: 14px;
  line-height: 32px;
  outline: none;
  .scInput {
    display: flex;
  }
  .scTag {
    padding: 2px 8px;
    border: none;
    box-sizing: border-box;
  }
  &-tags {
    position: absolute;
    left: 0;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;
    .scTag:not(.isTooltipTag) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 100%;
      text-overflow: ellipsis;
      margin: 0 0 0 4px;
      & > span:not(.anticon-close) {
        // max-width: 90%;
        max-width: calc(100% - 12px);
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .scTag {
      &.isTooltipTag {
        min-width: 38px;
        margin-left: 2px;
        margin-right: 0;
      }
      & + .scCascaderNew-search-input {
        height: 24px;
      }
    }
    .scTag + .scTag:not(.isTooltipTag) {
      margin-top: 1px;
      margin-bottom: 1px;
    }
    // .scTag.isTooltipTag {
    //   & + & {
    //     margin-top: 0;
    //     margin-bottom: ;
    //   }
    // }
    // .scTag:first-child {
    //   margin-top: 1px;
    //   margin-bottom: 1px;
    // }
  }
  &-dropdown {
    max-width: none;
    .ant-tooltip-inner {
      padding: 0;
    }
    .ant-tooltip-content {
      padding-top: 5px;
    }
    &.ant-tooltip-placement-bottom, 
    &.ant-tooltip-placement-bottomLeft, 
    &.ant-tooltip-placement-bottomRight {
      padding-top: 0;
      .ant-tooltip-arrow {
        display: none;
      }
    }
    &.ant-tooltip-placement-topLeft,
    &.ant-tooltip-placement-top,
    &.ant-tooltip-placement-topRight {
      padding-bottom: 4px;
      .ant-tooltip-arrow {
        display: none;
      }
    }
  }
  .ant-input-suffix {
    .sc-xiangxia {
      color: @disabled-color;
      height: 22px;
      line-height: 22px;
      &.isReverse {
        transform: rotate(180deg);
      }
    }
    .sc-error-fill {
      font-size: 12px;
      width: 16px;
      color: @text-color-secondary;
      cursor: pointer;
    }
    .sc-question-circle {
      line-height: 16px;
      padding-left: 8px;
      cursor: pointer;
      border-left: 1px solid @border-color-base;
      margin-left: 4px;
      color: @text-color-secondary;
      &:hover {
        color: @primary-color;
      }
    }
  }
  &.isMultiple {
    .ant-input-affix-wrapper {
      padding: 0 4px 0 8px;
      // & > input {
      //   min-height: 34px;
      // }
    }
    .ant-input-suffix {
      .sc-xiangxia {
        height: 30px;
        line-height: 30px;
      }
    }
    .scInput {
      max-width: 100%;
    }
    .scCascaderNew-tags.isCollapseTags {
      right: 24px;
      flex-wrap: nowrap;
      &.isMultiple-prefixIcon-tags {
        right: 32px;
        padding-right: 24px;
        .isMultiple-prefixIcon-tags__container {
          max-width: calc(100% - 32px);
        }
      }
      // &.isMultiple-prefixIcon-tags {
      //   padding-right: 24px;
      // }
    }
    
    .isMultiple {
      &-prefixIcon {
        padding: 0 4px 8px;
        visibility: hidden;
        height: 24px;
        // overflow-y: hidden;
        white-space: nowrap;
        &-tags {
          flex-wrap: nowrap;
          &__container {
            max-width: calc(100% - 24px);
          }
        }
      }
    }
    .isCollapseTags {
      .isMultiple-prefixIcon-tags__container {
        display: flex;
        flex-wrap: nowrap;
      }
    }
  }
  &-suggestion {
    &-panel {
      min-width: 190px;
      text-align: center;
    }
    &-list {
      margin-bottom: 0;
      padding: 4px 0;
    }
    &-item {
      line-height: 22px;
      padding: 3px 8px;
      margin: 2px 6px;
      cursor: pointer;
      border-radius: @border-r-3;
      text-align: left;
      &:hover {
        background-color: @item-hover-bg;
      }
      .ant-checkbox-wrapper {
        pointer-events: none;
      }
    }
  }
  &-search {
    &-input {
      font-size: 14px;
      padding-left: 9px;
      line-height: 22px;
      border: none;
      margin-left: 1px;
      height: 30px;
      width: 100%;
      color: @text-color-secondary;
      &:focus, &:hover {
        outline: none;
      }
      &::placeholder {
        color: @disabled-color;
      }
    }
  }
  &-collapse {
    &-tags {
      padding: 4px 0;
    }
    &-tag {
      padding: 0 4px;
      & + & {
        margin-top: 2px;
      }
    }
  }

  &.ant-tooltip-open {
    &.isMultiple {
      & > .scInput {
        .ant-input-affix-wrapper {
          border-color: @primary-color;
          box-shadow: 0 0 0 2px fade(@primary-color, 20%);
        }
      }
    }
  }
  &:not(.isMultiple) {
    .ant-input-affix-wrapper > input.ant-input {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.isTooltipTag-pd0 {
  max-width: initial;
  .ant-tooltip-inner {
    padding: 0;
  }
}

.notFirstColumnCheckbox {
  .scCascader-menu:first-child {
    .ant-checkbox-wrapper {
      display: none;
      & + .scCascader-node-label {
        padding-left: 0;
      }
    }
    .scCascader-node-label {
      padding-left: 0;
    }
  }
}