@use '@components/select/style/token.scss' as selectToken;
@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use '@components/select/style/index.scss' as *;
@use '@components/cascader/style/token.scss' as *;

$cascader-prefix-cls: string.unquote('#{theme.$prefix}-cascader');

//.select-view($cascader-prefix-cls);

.#{$cascader-prefix-cls} {
  &-panel {
    display: inline-flex;
    box-sizing: border-box;
    height: selectToken.$select-popup-max-height;
    overflow: hidden;
    white-space: nowrap;
    list-style: none;
    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
    border: 1px solid selectToken.$select-popup-color-border;
    border-radius: selectToken.$select-popup-border-radius;
    box-shadow: selectToken.$select-popup-box-shadow;
  }

  &-search-panel {
    justify-content: flex-start;
    width: 100%;
    overflow: auto;
  }

  &-popup-trigger-hover {
    .#{$cascader-prefix-cls}-list-item {
      transition: fontweight 0s;
    }
  }

  &-highlight {
    font-weight: global.$font-weight-500;
  }

  &-panel-column {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    min-width: 120px;
    height: 100%;
    max-height: 200px;
    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));

    &-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    &:not(:last-of-type) {
      border-right: 1px solid selectToken.$select-popup-color-border;
    }
  }

  &-column-content {
    flex: 1;
    max-height: 200px;
    overflow-y: auto;
  }

  &-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: selectToken.$select-popup-padding-vertical 0;

    &-with-footer {
      padding-bottom: 0;
    }
  }

  &-list-empty {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  &-list {
    flex: 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;

    &-multiple,
    &-strictly {
      .#{$cascader-prefix-cls}-option-label {
        padding-left: 0;
        text-align: start;
      }

      .#{$cascader-prefix-cls}-option {
        width: 100%;
        padding-left: $cascader-padding-item-left;

        .#{theme.$prefix}-checkbox,
        .#{theme.$prefix}-radio {
          margin-right: $cascader-margin-checkbox-right;
          padding-left: 0;
        }
      }
    }
  }

  &-search-list#{&}-list-multiple {
    .#{$cascader-prefix-cls}-option-label {
      padding-right: $cascader-padding-item-left;
    }
  }

  &-list-footer {
    box-sizing: border-box;
    height: $cascader-size-item-height;
    padding-left: $cascader-padding-item-left;
    line-height: $cascader-size-item-height;
    border-top: 1px solid selectToken.$select-popup-color-border;
  }

  &-option,
  &-search-option {
    position: relative;
    display: flex;
    box-sizing: border-box;
    min-width: 100px;
    height: $cascader-size-item-height;
    color: $cascader-color-item-text;
    font-size: $cascader-font-item-size;
    line-height: $cascader-size-item-height;
    text-align: left;
    background-color: transparent;
    cursor: pointer;

    &-label {
      flex: 1 1 0;
      box-sizing: border-box;
      min-width: 0;
      padding-right: $cascader-padding-item-right + $cascader-size-item-icon +
        $cascader-margin-item-icon-left;
      padding-left: $cascader-padding-item-left;
      overflow: hidden;
    }

    .#{theme.$prefix}-icon-right,
    .#{theme.$prefix}-icon-check {
      position: absolute;
      top: 50%;
      right: $cascader-padding-item-right;
      color: $cascader-color-item-icon;
      font-size: $cascader-size-item-icon;
      transform: translateY(-50%);
    }

    .#{theme.$prefix}-icon-check {
      color: global.$color-primary-6;
    }

    .#{theme.$prefix}-icon-loading {
      position: absolute;
      top: 50%;
      right: $cascader-padding-item-right;
      margin-top: -($cascader-size-item-icon * 0.5);
      color: global.$color-primary-6;
      font-size: $cascader-size-item-icon;
    }
  }

  &-option:hover,
  &-search-option-hover {
    color: $cascader-color-item-text_hover;
    background-color: $cascader-color-item-bg_hover;

    .#{theme.$prefix}-checkbox:not(.#{theme.$prefix}-checkbox-disabled):not(
        .#{theme.$prefix}-checkbox-checked
      ):hover
      .#{theme.$prefix}-checkbox-icon-hover::before {
      background-color: $cascader-color-checkbox-bg_hover;
    }

    .#{theme.$prefix}-radio:not(.#{theme.$prefix}-radio-disabled):not(
        .#{theme.$prefix}-radio-checked
      ):hover
      .#{theme.$prefix}-radio-icon-hover::before {
      background-color: $cascader-color-checkbox-bg_hover;
    }
  }

  &-option,
  &-search-option {
    &-disabled,
    &-disabled:hover {
      color: $cascader-color-item-text_disabled;
      background-color: $cascader-color-item-bg_disabled;
      cursor: not-allowed;

      .#{theme.$prefix}-icon-right {
        color: inherit;
      }

      .#{theme.$prefix}-icon-check {
        color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-primary-light-3'));
      }
    }
  }

  &-option {
    width: 100%;

    &-active {
      color: $cascader-color-item-text_active;
      background-color: $cascader-color-item-bg_active;
      transition:
        color theme.$transition-duration-2 theme.$transition-timing-function-standard,
        background-color theme.$transition-duration-2 theme.$transition-timing-function-standard;

      &:hover {
        color: $cascader-color-item-text_active;
        background-color: $cascader-color-item-bg_active;
      }
    }

    &-active#{&}-disabled,
    &-active#{&}-disabled:hover {
      color: $cascader-color-item-text_disabled_active;
      background-color: $cascader-color-item-bg_disabled_active;
    }
  }
}

.cascader-slide-enter-active,
.cascader-slide-leave-active {
  transition: margin theme.$transition-duration-3 theme.$transition-timing-function-standard;
}

.cascader-slide-enter-from,
.cascader-slide-leave-to {
  margin-left: -120px;
}

.cascader-slide-enter-to,
.cascader-slide-leave-from {
  margin-left: 0;
}