@import "../utils.scss";
@import "./variables.scss";
@import "../menu/variables.scss";
@import "~@alifd/next/lib/core/index-noreset"; // next core style
@import "~@alifd/next/lib/cascader/scss/variable";
$b-design-cascader-menu-width:158px;

#{$cascader-prefix} {
  border: 0px;
  box-shadow: $b-design-popup-local-shadow;

  &-menu-wrapper {
    width: $b-design-cascader-menu-width;

    &::-webkit-scrollbar-thumb {
      background-color: $color-fill1-3;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background-color: $color-fill1-3;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: #fff;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    .#{$css-prefix}menu.#{$css-prefix}ver#{$cascader-prefix}-menu {
      .#{$css-prefix}menu-item#{$cascader-prefix}-menu-item {
        .#{$css-prefix}menu-item-inner {
          margin-right: $s-3;

          .#{$css-prefix}heckbox-wrapper.checked+.n.#{$css-prefix}menu-item-text {
            color: $color-brand1-6;
          }
        }
      }
    }
  }

  .#{$css-prefix}menu {
    .#{$css-prefix}menu-item {
      &:not(.#{$css-prefix}disabled) {

        &.#{$css-prefix}selected,
        &.#{$css-prefix}selected:hover,
        &.#{$css-prefix}selected.#{$css-prefix}focused:hover &.#{$css-prefix}focused,
        &.#{$css-prefix}selected.#{$css-prefix}focused,
        &.#{$css-prefix}expanded,
        &.#{$css-prefix}expanded:hover,
        &.#{$css-prefix}selected:focus {
          background: $b-design-cascader-white-menu-selected-bg-color;
          color: $color-brand1-6;
        }
      }
    }

    .#{$css-prefix}menu-item[aria-checked='true'] {
      .#{$css-prefix}menu-item-text {
        color: $color-brand1-6;
      }
    }
  }

  &-menu-icon-right {
    right: $b-design-cascader-menu-icon-right;
  }

}

#{$cascader-prefix}-select-dropdown {
  border: 0px;
  box-shadow: $b-design-popup-local-shadow;
}

//white theme 
#{$cascader-prefix}.#{$css-prefix}white,
.#{$css-prefix}select-popup-wrap.#{$css-prefix}white {
  .#{$css-prefix}menu {
    background: $b-design-cascader-white-menu-bg-color;

    .#{$css-prefix}menu-item {
      color: $b-design-cascader-white-menu-item-text-color;

      .#{$css-prefix}cascader-menu-icon-right {
        color: $b-design-cascader-white-menu-item-icon-color;
      }

      &.#{$css-prefix}disabled {
        color: $b-design-cascader-diasbled-color;

        &,
        & .#{$css-prefix}menu-item-text>a {
          background-color: $b-design-cascader-white-menu-bg-color;
        }

        & .#{$css-prefix}cascader-menu-icon-right {
          color: $b-design-cascader-diasbled-color;
        }
      }

      &:not(.#{$css-prefix}disabled):not(.#{$css-prefix}expanded):not(.#{$css-prefix}selected) {

        &:hover {
          background: $b-design-cascader-white-menu-hover-bg-color;
        }
      }

      &.#{$css-prefix}selected {
        .#{$css-prefix}menu-symbol-icon-selected.#{$css-prefix}menu-icon-selected {
          display: none;
        }
      }



    }


  }

  #{$cascader-prefix}-menu-wrapper {
    &::-webkit-scrollbar-track {
      background: $b-design-cascader-white-menu-bg-color;
    }
  }
}