@import '../../../style/themes/index';
@import '../../../style/mixins/index';

@menu-prefix-cls: ~'@{fc-prefix}-menu';

.@{menu-prefix-cls} {
  position: relative;
  height: 100%;
  background-color: @white;

  /** 样式写在这里面 */
  &-selected-sub-menu {
    .ant-menu-submenu-title {
      background-color: @primary-1;
      color: @primary-6;

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        // border-right: 3px solid @primary-6;
        content: '';
        transform: scaleY(1);
        opacity: 1;
        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
  }

  .ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after,
  .ant-menu-inline .ant-menu-item::after {
    border-right: 3px solid @blue-6;
  }

  &-button {
    position: absolute;
    bottom: 0;
    right: 0;

    .anticon {
      color: @black-9;
    }

    &:hover,
    &:active {
      color: @black-9;
    }
  }

  &-button_side {
    position: absolute;
    top: @unit * 3;
    padding: 0 !important;
    color: @black-9;
    z-index: 999;
    padding: 0;
    right: -1.25px * @unit;

    .iconfont::before {
      width: @unit * 4;
      color: @black-9;
      height: @unit * 4;
      line-height: @unit * 4;
      box-shadow: 0px 4px 10px @black-3;
      display: inline-block;
      border-radius: 50%;
      font-size: @font4;

      /* 使用50%的border-radius可以将元素变成圆形 */
      background-color: @white;
      /* 设定背景颜色 */
    }

    &:hover,
    &:active {
      color: @black-9;
    }
  }

  .ps {
    height: calc(100% - 32px);
  }

  .ps__rail-y {
    width: 8px;
    right: 4px !important;
    /* 设置右边距，例如10px */
  }

  .ps__thumb-y {
    background-color: rgba(@black-10, 0.35) !important;
  }

  .ps__thumb-x {
    display: none;
  }

  .ps__rail-y:hover>.ps__thumb-y,
  .ps__rail-y:focus>.ps__thumb-y,
  .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 6px;
  }

  .ant-menu {
    // height: calc(100% - 32px);
    // overflow-y: hidden;
    overflow-x: hidden;
    color: @black-8;
    background-color: transparent;

    // &:hover {
    //   overflow-y: auto;
    // }

    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 0;
    //   right: 0;
    //   width: 5px; // 自定义滚动条的宽度
    //   height: 100%;
    //   background-color: rgba(0, 0, 0, 0.4); // 自定义滚动条的颜色
    //   opacity: 0;
    //   transition: opacity 0.3s; // 淡入淡出效果
    //   cursor: pointer;
    // }

    // &:hover::after {
    //   opacity: 1; // 鼠标悬浮时显示自定义滚动条
    // }
  }

  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right-color: transparent;
  }

  .ant-menu-submenu-selected {

    .ant-menu-item:not(.ant-menu-item-selected),
    .ant-menu-submenu-title {
      color: @black-10;
    }
  }

  .ant-menu-submenu-selected>.ant-menu-submenu-title,
  .ant-menu-submenu-title:hover {
    color: @primary-6;
  }

  .ant-menu-vertical .ant-menu-submenu-selected {
    color: @primary-6;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: @primary-1;
  }

  .ant-menu-inline-collapsed {
    width: 80px - @paddingBase*2;
  }

  .ant-menu-inline-collapsed>.ant-menu-item,
  .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,
  .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title,
  .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title {
    padding: 0 @paddingBase*3 !important;
  }

  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after {
    background: linear-gradient(to right, @primary-6, @primary-6);
  }

  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before {
    background: linear-gradient(to right, @primary-6, @primary-6);
  }

  .menu-space {
    margin-left: @padding-xs;
  }

  .menuIcon {
    font-size: 20px !important;
  }

  .menuLine {
    display: flex;
    align-items: center;
    width: 100%;

    .menuLine-text-content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // 抖动问题解决
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }

  .ant-menu-inline .ant-menu-item,
  .ant-menu-inline .ant-menu-submenu-title {
    width: 100%;
  }
}

.ant-menu-vertical {

  .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
  .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
  &.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
  &.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before {
    background: linear-gradient(to right, @primary-6, @primary-6);
  }

  .ant-menu-submenu-vertical>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-left>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-right>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-left>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-right>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-left>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-right>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-left>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-right>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
    background: linear-gradient(to right, @primary-6, @primary-6);
  }

  .ant-menu-item:hover,
  .ant-menu-item-active,
  &.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
  .ant-menu-submenu-selected>.ant-menu-submenu-title,
  .ant-menu-submenu-active,
  .ant-menu-submenu-title:hover,
  .ant-menu-submenu-selected,
  .ant-menu-vertical-left .ant-menu-submenu-selected,
  .ant-menu-vertical-right .ant-menu-submenu-selected {
    color: @primary-6;
  }
}

.ant-menu-inline-collapsed-tooltip {
  .iconfont::before {
    margin-right: 8px;
    position: relative;
    top: 1px;
  }
}