@import '../../../styles/mixins.scss';
@import '../../../styles/keyframes';
@import './variable.scss';

$class-prefix: 'cn-ui-m';
.#{$hashClassName}.cn-ui-m-cascader-container {
  .#{$class-prefix}-cascader {
    &-nav {
      background-color: $m-color-bg-white;
      padding: 0;
      box-sizing: border-box;

      .#{$class-prefix}-breadcrumb-item {
        flex-shrink: 0;
      }
    }

    &-gutter {
      display: block;
      background-color: $m-color-bg-disabled;
      height: $m-s-1;
      width: 100%;
    }

    &-content {
      height: 310px;
      padding: 0;
      overflow: auto;
      @include limitedOverScroll();

      &-selected {
        height: 274px;
      }
    }

    &-not-found {
      text-align: center;
      font-size: $m-font-size-body-1;
      color: $m-color-text-tip;
      margin-top: $m-s-130;
    }

    &-list-item-checked {
      --cn-list-title-color: #{$m-color-primary};
    }

    &-multiply-search-wrapper {
      margin-top: $m-s-4;
      padding: $m-s-6 $m-s-16;
      width: '100%';
      height: '100rpx';
    }

    &-list {
      width: 100%;

      // 多选左侧checkbox样式
      &-item-left {
        position: relative;

        &-checkbox {
          position: absolute;
          top: calc(#{$m-s-16} * -1);
          left: calc(#{$m-s-16} * -1);
          width: $m-s-44;
          height: $m-s-48;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &-empty {
          width: $m-s-20;
          height: $m-s-16;
        }
      }
    }

    &-icon {
      color: $m-color-bg-darker1;

      &--loading {
        color: $m-color-bg-darker1;
        display: block;
        animation: rotateCircle 2s infinite linear;
      }

      &--selected {
        color: $m-color-primary;
      }
    }

    &-tree {
      display: flex;
      flex-direction: row;
      height: 310px;
      .#{$class-prefix}-cascader-list-item-checked {
        background-color: #ffffff;
      }
    }

    &-column {
      height: 100%;
      overflow-y: auto;
      --cn-list-border-width: 0;
      --cn-list-bg-color: transparent;
      @include limitedOverScroll();
      &:nth-child(1) {
        background-color: rgba(245, 249, 252, 1);
      }
      &:nth-child(2) {
        background-color: rgba(245, 249, 252, 0.5);
      }
      &:nth-child(3) {
        background-color: rgba(245, 249, 252, 0.25);
      }
    }

    &-search-wrapper {
      padding: 16px 16px 0;
    }

    &-search-body {
      height: 350px;
      overflow-y: auto;
      @include limitedOverScroll();
    }

    &-search-option--selected {
      --cn-list-title-color: #{$m-color-primary};
    }

    &-bottom {
      overflow-x: scroll;
      overflow-y: hidden;
      &-label {
        white-space: nowrap;
      }
      &-show {
        height: $m-s-36;
        padding: $m-s-8 $m-s-16;
        box-shadow: rgba(0, 0, 0, 0.09) 0 calc(#{$m-s-1} * -1) $m-s-5 0;
        z-index: 2;
        background-color: $m-color-bg-white;
      }
    }
  }
}