@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();
    }

    &-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};
    }

    &-list {
      width: 100%;
    }

    &-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};
    }
  }
}