@cascader-prefix: ~'@{icecream-prefix}-cascader';

.@{cascader-prefix} {
  .extendBaseEnhanced();
  position: relative;
  width: 320px;

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

  &-clear,
  &-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    color: @icecream-color-grey-7;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    transform: translateY(-50%);
  }

  &-clear {
    right: 36px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
    pointer-events: unset;
    background: @icecream-white;
  }

  &:hover &-clear {
    opacity: 1;
    color: @icecream-color-grey-6;
    transition: @icecream-transitions;

    &:hover {
      color: @icecream-color-grey-7;
    }
  }

  &-empty {
    height: 188px;
    line-height: 188px;
    cursor: default;
    pointer-events: none;
  }

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

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

  &-menu {
    flex-grow: 1;
    min-width: 180px;
    height: 180px;
    margin: 0;
    margin: -4px 0;
    padding: 4px 0;
    overflow: auto;
    vertical-align: top;
    list-style: none;
    border-right: 1px solid @icecream-color-grey-5;
    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857

    &:last-child {
      border-right: none;
    }

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

      &:hover {
        color: @icecream-primary-color;
        background: fade(@icecream-primary-color, 10);
      }

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

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

      &-active:not(&-disabled) {

        &,
        &:hover {
          color: @icecream-primary-color;
          background: fade(@icecream-primary-color, 10);
        }
      }

      &-content {
        flex: auto;
      }

      &-expand-icon {
        display: flex;
      }

      &-keyword {
        font-weight: @icecream-bold;
      }

      .@{cascader-prefix}-checkbox {
        @inner-cls: ~'@{cascader-prefix}-checkbox-inner';

        .@{inner-cls} {
          position: relative;
          display: block;
          box-sizing: border-box;
          width: @checkbox-size;
          height: @checkbox-size;
          background-color: @icecream-white;
          border: 1px solid @checkbox-border-color;
          border-radius: @icecream-border-radius;
          // Fix IE checked style
          border-collapse: separate;
          transition: @icecream-transitions;
        }

        &-checked {
          .@{inner-cls} {
            background-color: @icecream-primary-color;
            border-color: @icecream-primary-color;

            &:after {
              position: absolute;
              display: table;
              top: 5px;
              left: 3px;
              width: 3px;
              height: 6px;
              border: 1px solid #fff;
              border-top: 0;
              border-left: 0;
              transform: rotate(45deg) scale(1) translate(-50%, -50%);
              opacity: 1;
              content: "";
            }
          }
        }

        &-indeterminate {
          .@{inner-cls} {
            background-color: @icecream-primary-color;
            border-color: @icecream-primary-color;

            &:after {
              position: absolute;
              display: block;
              top: 5.5px;
              left: 3.5px;
              width: 5px;
              height: 0;
              border-bottom: 1px solid @icecream-white;
              transform: none;
              opacity: 1;
              content: '';
            }
          }
        }
      }
    }
  }
}

// Selector
.@{cascader-prefix}-selector {
  .extendBase();
  position: relative;
  display: flex;
  height: 100%;
  padding: 0 @icecream-gap-sm;
  background-color: @icecream-white;
  border-radius: @icecream-border-radius;
}

.@{cascader-prefix}-selection {
  position: relative;
  display: flex;
  background-color: @icecream-white;
  border: 1px solid @icecream-border-color;
  border-radius: @icecream-border-radius;

  &-overflow {
    position: relative;
    display: flex;
    flex: auto;
    // 允许换行的话可开启这个，但是要注意目前的固定高度写法
    flex-wrap: nowrap;
    height: 100%;
    max-width: 100%;

    &-item {
      display: flex;
      align-items: center;
      max-width: 100%;

      &-rest {
        flex-shrink: 0;
      }

      &-suffix {
        max-width: 100%;
        height: 100%;
        overflow: hidden;
      }

      &:not(&-suffix) {
        padding: 0 @icecream-gap-xs / 2;
      }
      &:first-child {
        padding-left: 0;
      }
    }
  }

  &-search {
    position: relative;
    height: 100%;
    cursor: text;

    &-input {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 100%;
      vertical-align: top;
    }

    &-mirror {
      position: absolute;
      top: 0;
      left: 0;
      white-space: pre;
      visibility: hidden;
    }
  }

  &-placeholder {
    flex: 1;
    overflow: hidden;
    color: @icecream-color-grey-7;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}

// single
.@{cascader-prefix}-single {
  .@{cascader-prefix}-selection-search {
    position: absolute;
    inset: 0 12px;
    right: 36px;
  }
  &.@{cascader-prefix}-allow-clear {
    .@{cascader-prefix}-selection-search {
      right: 62px;
    }
  }

  .@{cascader-prefix}-selection-item {
    .textEllipsis();
    flex: 1;
    padding-right: 18px;
    line-height: @icecream-form-input-height-md - 2;
  }

  &.@{cascader-prefix}-size-small {
    .@{cascader-prefix}-selection-item {
      line-height: @icecream-form-input-height-sm - 2;
    }
  }

  &.@{cascader-prefix}-size-large {
    .@{cascader-prefix}-selection-item {
      line-height: @icecream-form-input-height-lg - 2;
    }
  }
}

// multiple
.@{cascader-prefix}-multiple {
  .@{cascader-prefix}-clear {
    right: @icecream-gap-sm;
  }
  .@{cascader-prefix}-selection-search {
    position: relative;
    max-width: 100%;
  }

  .@{cascader-prefix}-selection-search-input {
    width: 100%;
    min-width: 4.1px;
  }

  .@{cascader-prefix}-selection-placeholder {
    position: absolute;
    top: 50%;
    right: 12px;
    left: 12px;
    transform: translateY(-50%);
    transition: all 0.3s;
  }

  .@{cascader-prefix}-selection-item {
    .setFontSize(@icecream-font-size-sm);
    position: relative;
    display: flex;
    height: 20px;
    padding: 0 @icecream-gap-xs;
    line-height: 20px;
    border-radius: @icecream-border-radius;
    background-color: @icecream-color-grey-3;

    &-remove {
      display: flex;
      align-items: center;
      margin-left: 7.17px;
      cursor: pointer;

      > svg {
        color: @icecream-color-grey-7;
        transition: @icecream-transitions;

        &:hover {
          color: @icecream-color-grey-8;
        }
      }
    }
  }

  &.@{cascader-prefix}-size-small {
    .@{cascader-prefix}-selection-item {
      height: 16px;
      line-height: 16px;
    }
  }

  &.@{cascader-prefix}-size-large {
    .@{cascader-prefix}-selection-item {
      height: @icecream-form-input-height-sm;
      line-height: @icecream-form-input-height-sm;
    }
  }
}

// Dropdown
.@{cascader-prefix}-dropdown {
  position: absolute;
  z-index: @icecream-z-index-popup;
  padding: 4px 0;
  min-width: 180px;
  background-color: @icecream-white;
  border: 1px solid @icecream-color-grey-5;
  border-radius: @icecream-border-radius;

  &-hidden {
    display: none;
  }

  &-size-small {
    .setFontSize(@icecream-font-size-sm);
  }
}

// search
.@{cascader-prefix}-show-search {

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }

  .@{cascader-prefix}-selector {
    cursor: text;
  }
}

// open
.@{cascader-prefix}-open.@{cascader-prefix}-single {
  .@{cascader-prefix}-selection-item {
    color: @icecream-color-grey-7;
  }

  &:not(.@{cascader-prefix}-show-search) {
    .@{cascader-prefix}-arrow {
      transform: translateY(-50%) rotateZ(-180deg);
    }
  }
}

// size
.@{cascader-prefix}.@{cascader-prefix}-size-default {
  height: @icecream-form-input-height-md;
  line-height: @icecream-form-input-height-md - 2 ;
}
.@{cascader-prefix}.@{cascader-prefix}-size-small {
  font-size: @icecream-font-size-sm;
  height: @icecream-form-input-height-sm;
  line-height: @icecream-form-input-height-sm - 2;
}
.@{cascader-prefix}.@{cascader-prefix}-size-large {
  height: @icecream-form-input-height-lg;
  line-height: @icecream-form-input-height-lg - 2;
}