/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl';
@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl';

.@{cascader-prefix-cls} {
  .reset-component();
  &-input.@{ant-prefix}-input {
    // Keep it static for https://github.com/ant-design/ant-design/issues/16738
    position: static;
    width: 100%;
    // https://github.com/ant-design/ant-design/issues/17582
    padding-right: 24px;
    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
    // because input.less will compile after cascader.less
    background-color: transparent !important;
    cursor: pointer;
  }

  &-multiple-search-wrapper {

    &:first-child {
      margin-left: 8px;
    }
    max-width: 100%;
  }

  &-input-hide {
    visibility: hidden;
  }
  &-picker-show-search .@{ant-prefix}-sp-input {
    width: 100%;
  }
  &-input-multiple.@{ant-prefix}-input {
    line-height: 24px;
    padding: 0;
    margin: 2px 4px 2px 0;
    background: transparent;
    outline: none;
    appearance: none;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  &-multiple-search-mirror {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    white-space: pre;
    visibility: hidden;
  }
  &-picker-show-search &-input.@{ant-prefix}-input {
    position: relative;
  }

  &-picker {
    .reset-component();

    color: @color-text-icon-0;
    position: relative;
    display: inline-block;
    background-color: @cascader-bg;
    border-radius: @corner-s;
    outline: 0;
    cursor: pointer;
    transition: color .3s;

    &-with-value &-label {
      color: transparent;
    }

    &-multiple {
      display: block;
    }

    &-disabled {
      color: @color-text-icon-1;
      background: @input-disabled-bg;
      cursor: not-allowed;

      &:hover:not(.sp-null) {
        background-color: @input-disabled-bg;
      }

      .@{cascader-prefix-cls}-input {
        cursor: not-allowed;
      }
      .@{cascader-prefix-cls}-multiple-wrapper {
        .@{cascader-prefix-cls}-selection__choice {
          background-color: @cascader-selection-item-disabled-bg;
          border-color: @cascader-selection-item-disabled-border-color;
          color: @cascader-selection-item-disabled-color;
        }
      }
    }

    &:focus .@{cascader-prefix-cls}-input {
      border-color: @color-primary-brand;
      border-right-width: @border-width-base !important;
      outline: 0;
      box-shadow: @cascader-picker-focused-box-shadow;
      background-color: @cascader-input-focused-hover-bg;
    }

    &:hover {
      background-color: @cascader-input-hover;
    }

    &-borderless {
      .@{cascader-prefix-cls}-multiple-wrapper,
      .@{cascader-prefix-cls}-input {
        border-color: transparent !important;
        box-shadow: none !important;
      }
    }

    &-show-search&-focused {
      color: @disabled-color;
    }

    &-label {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 20px;
      margin-top: -10px;
      padding: 0 20px 0 @control-padding-horizontal;
      overflow: hidden;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      z-index: @cascader-picker-label-zindex;
      background-color: transparent;
    }

    &-clear:not(.sp-null) {
      position: absolute;
      top: 50%;
      right: 8px;
      z-index: 2;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      color: @disabled-color;
      font-size: 16px;
      line-height: 16px;
      background: @cascader-clear-bg;
      cursor: pointer;
      display: none;
      transition: color .3s ease, opacity .15s ease;

      &:hover {
        color: @text-color-secondary;
      }
    }

    &:not(&-disabled):hover {
      .@{cascader-prefix-cls}-picker-clear {
        display: block;
        & + .@{cascader-prefix-cls}-picker-arrow {
          opacity: 0;
        }
      }
      .@{cascader-prefix-cls}-multiple-wrapper {
        border: @line-solid-regular @cascader-input-hover-border-color;
      }
    }

    // arrow

    &-arrow:not(.sp-null) {
      position: absolute;
      top: 50%;
      right: @control-padding-horizontal-sm;
      z-index: 1;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      color: @color-text-icon-2;
      font-size: 16px;
      line-height: 16px;
      transition: transform .3s;

      &-expand {
        transform: rotate(180deg);
      }
    }
  }

  // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810

  &-picker-label:hover + &-input {
    &:not(.@{cascader-prefix-cls}-picker-disabled &) {
      border-color: @input-hover-border-color;
      border-right-width: @border-width-base !important;
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    right: @control-padding-horizontal-sm;
  }

  &-menus {
    position: absolute;
    z-index: @zindex-dropdown;
    font-size: @cascader-dropdown-font-size;
    white-space: nowrap;
    background: @cascader-menu-bg;
    border-radius: @corner-s;
    box-shadow: @box-shadow-base;
    border: 1px solid @color-line-1;
    color: @color-text-icon-0;

    ul,
    ol {
      margin: 0;
      list-style: none;
    }

    &-multiple {
      .@{cascader-prefix-cls}-menu .@{cascader-prefix-cls}-menu-item-active {

        &,
        &:hover {
          font-weight: 400;
          background-color: @cascader-dropdown-item-hover-bg;
        }
      }
    }

    &-empty,
    &-hidden {
      display: none;
    }

    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
      animation-name: antSlideUpIn;
    }

    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
      animation-name: antSlideDownIn;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
      animation-name: antSlideUpOut;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
      animation-name: antSlideDownOut;
    }
  }

  &-menu {
    position: relative;
    display: inline-block;
    min-width: 140px;
    height: 180px;
    margin: 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

    &:first-child {
      border-radius: @corner-s 0 0 @corner-s;
    }

    &:last-child {
      margin-right: -1px;
      border-right-color: transparent;
      border-radius: 0 @corner-s @corner-s 0;
    }

    &:only-child {
      border-radius: @corner-s;
    }

    &-checkbox {
      padding-top: 0;
    }
  }

  &-transfer-menu {
    position: relative;
    min-width: 140px;
    flex: 1 1 0;
    height: 336px;
    margin: 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

    &-item-disabled {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &-wrap {
      border: 1px solid @color-line-1;
      display: flex;
      border-radius: 4px;
    }

    &:first-child {
      border-radius: @corner-s 0 0 @corner-s;
    }

    &:last-child {
      margin-right: -1px;
      border-right-color: transparent;
      border-radius: 0 @corner-s @corner-s 0;
    }

    &:only-child {
      border-radius: @corner-s;
    }

    &-checkbox {
      padding-top: 0;
    }
  }

  &-menu-item {
    padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
    overflow: hidden;
    line-height: @cascader-dropdown-line-height;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all .3s;

    &-checkbox {
      margin-right: 8px;
    }

    &:hover {
      background: @cascader-dropdown-item-hover-bg;
    }

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

      &.@{cascader-prefix-cls}-menu-item-multiple-active {
        color: @color-text-icon-1;
      }

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

    &-active:not(&-disabled) {

      &,
      &:hover {
        color: @cascader-item-selected-font-color;
        font-weight: @select-item-selected-font-weight;
        background-color: @cascader-item-selected-bg;
      }

      .@{cascader-prefix-cls}-menu-item-expand-icon {
        color: @cascader-item-selected-font-color;
      }
    }

    &-expand {
      position: relative;
      padding-right: 30px;
    }

    &-expand &-expand-icon,
    &-loading-icon {
      position: absolute;
      right: @control-padding-horizontal;
      color: @color-text-icon-3;
      font-size: 14px;
      .@{cascader-prefix-cls}-menu-item-disabled& {
        color: @disabled-color;
      }
    }

    & &-keyword {
      color: @highlight-color;
    }

    &-multiple-active {
      color: @cascader-item-selected-font-color;

      .@{cascader-prefix-cls}-menu-item-expand-icon {
        color: @cascader-item-selected-font-color;
      }
    }
  }

  &-menu-input-search {
    padding: 8px 12px;
    border-bottom: 1px solid @color-line-1;

    &-hidden {
      height: 0;
      opacity: 0;
      padding: 0 12px;
      overflow: hidden;
    }
  }

  &-checkbox-all-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 16px 12px;
    background-color: #fff;
    margin-bottom: 8px;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 12px;
      bottom: 0;
      width: calc(100% - 24px);
      height: 1px;
      background-color: @color-line-1;
    }
  }

  &-checkbox-all {
    margin-right: 8px;
  }

  &-picker-focused:not(&-multiple) {
    background-color: @cascader-input-focused-hover-bg;
  }

  &-picker-focused {
    .@{cascader-prefix-cls}-multiple-wrapper:not(.sp-null) {
      box-shadow: @cascader-picker-focused-box-shadow;

      &,
      &:hover {
        background-color: @cascader-input-focused-hover-bg;
        border: @line-solid-regular @cascader-input-focused-border-color;
      }
    }
  }

  &-picker-small {
    .@{cascader-prefix-cls}-multiple-wrapper {
      font-size: 12px;
      min-height: 28px;
      .@{cascader-prefix-cls}-multiple-placeholder {
        line-height: 24px;
      }
      > .@{cascader-prefix-cls}-selection__choice {
        line-height: 18px;
      }
      .@{cascader-prefix-cls}-input-multiple.@{ant-prefix}-input {
        line-height: 20px;
      }
    }
  }
  &-picker-focused .@{cascader-prefix-cls}-multiple-wrapper {
    > .@{cascader-prefix-cls}-selection__choice {
      background-color: @cascader-selection-item-active-bg;
    }
  }

  &-multiple-wrapper {
    width: 100%;
    min-height: 32px;
    border: @line-solid-regular @cascader-multiple-input-border-color;
    border-radius: @corner-s;
    display: flex;
    flex-wrap: wrap;
    padding: 1px 24px 1px 3px;
    overflow: hidden;
    transition: all .3s;

    .@{cascader-prefix-cls}-multiple-placeholder {
      line-height: 28px;
      text-indent: 8px;
      color: @color-text-icon-3;
    }

    > .@{cascader-prefix-cls}-selection__choice {
      margin: 2px 4px 2px 0;
      border: @line-solid-regular @cascader-selection-item-border-color;
      border-radius: @corner-xs;
      line-height: 22px;
      font-size: 12px;
      padding: 0 4px;
      color: @cascader-selection-item-color;
      background-color: @cascader-selection-item-bg;
      white-space: nowrap;
      transition: all .2s;
      .@{cascader-prefix-cls}-selection__choice__close {
        margin-left: 4px;
        font-size: 14px;
        color: @color-text-icon-2;
        vertical-align: middle;
        line-height: 1;

        svg {
          vertical-align: text-top;
        }
      }
    }

    > .rc-overflow {
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      max-width: 100%;
      position: relative;

      > .rc-overflow-item {
        flex: none;
        max-width: 100%;
        > .@{cascader-prefix-cls}-selection__choice {
          margin: 2px 4px 2px 0;
          border: @line-solid-regular @cascader-selection-item-border-color;
          border-radius: @corner-xs;
          line-height: 22px;
          font-size: 12px;
          padding: 0 4px;
          color: @cascader-selection-item-color;
          background-color: @cascader-selection-item-bg;
          white-space: nowrap;
          transition: all .2s;
          .@{cascader-prefix-cls}-selection__choice__close {
            margin-left: 4px;
            font-size: 14px;
            color: @color-text-icon-2;
            vertical-align: middle;
            line-height: 1;
    
            svg {
              vertical-align: text-top;
            }
          }
        }
      }
    }
  }
}

.@{cascader-prefix-cls} {
  &-input.@{ant-prefix}-input {
    .@{picker-rtl-cls} & {
      padding-right: @input-padding-horizontal-base;
      padding-left: 24px;
      text-align: right;
    }
  }

  &-picker {

    &-rtl {
      direction: rtl;
    }

    &-label {
      .@{picker-rtl-cls} & {
        padding: 0 @control-padding-horizontal 0 20px;
        text-align: right;
      }
    }

    &-clear {
      .@{picker-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }

    &-arrow {
      .@{picker-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    .@{picker-rtl-cls}& {
      right: auto;
      left: @control-padding-horizontal-sm;
    }
  }

  &-menu {

    &-rtl & {
      direction: rtl;
      border-right: none;
      border-left: @border-width-base @border-style-base @border-color-split;

      &:first-child {
        border-radius: 0 @corner-s @corner-s 0;
      }

      &:last-child {
        margin-right: 0;
        margin-left: -1px;
        border-left-color: transparent;
        border-radius: @corner-s 0 0 @corner-s;
      }

      &:only-child {
        border-radius: @corner-s;
      }
    }
  }

  &-menu-item {

    &-expand {
      .@{menu-rtl-cls} & {
        padding-right: @control-padding-horizontal;
        padding-left: 24px;
      }
    }

    &-expand &-expand-icon,
    &-loading-icon {
      .@{menu-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }

    &-loading-icon {
      .@{menu-rtl-cls} & {
        transform: scaleY(-1);
      }
    }
  }
}