@use '../../_styles/mixin.scss' as *;

.o-menu {
  width: var(--menu-width);
  background-color: var(--menu-bg-color);
  list-style: none;
  margin: 0;
  padding: 0;

  color: var(--menu-color);
}

/* 项目样式 */
.o-sub-menu-title,
.o-menu-item {
  font-size: var(--menu-text-size);
  line-height: var(--menu-text-height);
  padding: var(--menu-item-padding-v) var(--menu-padding-h) var(--menu-item-padding-v) var(--menu-level-indent);
  margin: 1px 0;
  border-radius: var(--menu-radius);
  cursor: pointer;
  transition: all var(--o-duration-s) var(--o-easing-standard);
  display: flex;
  align-items: flex-start;

  @include hover {
    background-color: var(--menu-bg-color-hover);
  }
}

.o-sub-menu-selected > .o-sub-menu-title,
.o-sub-menu-associated-selected > .o-sub-menu-title,
.o-menu-item-selected {
  font-weight: 600;
  color: var(--menu-color-selected);
  --menu-icon-color: var(--menu-icon-color-selected);
}

.o-menu-item-selected {
  background-color: var(--menu-bg-color-selected);

  @include hover {
    background-color: var(--menu-bg-color-selected);
  }
}

.o-sub-menu-title {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.o-sub-menu-title-icon,
.o-menu-item-icon {
  color: var(--menu-icon-color);
  margin-right: var(--menu-icon-gap);
  font-size: var(--menu-icon-size);
  height: var(--menu-text-height);
  width: var(--menu-icon-size);
  flex-shrink: 0;
  overflow: hidden;

  // /*纠正容器高度计算错误及空图标占位*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-sub-menu-title-content,
.o-menu-item-content {
  margin-right: auto;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--menu-max-row);
}

.o-sub-menu-arrow {
  height: var(--menu-text-height);
  font-size: var(--menu-arrow-size);
  width: var(--menu-arrow-size);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0);
  transition: transform var(--o-duration-m2) var(--o-easing-standard);

  .o-sub-menu-expanded > .o-sub-menu-title > & {
    transform: rotate(-180deg);
  }
}

.o-sub-menu-children {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: all var(--o-duration-m2) var(--o-easing-standard);
  &.expanded {
    grid-template-rows: 1fr;
  }
}

.o-sub-menu-children-wrap {
  min-height: 0;
  min-width: 0;
  position: relative;
}

.o-menu-item-disabled {
  cursor: not-allowed;
  color: var(--menu-color-disabled);
}

/* 层级指示线 */
.o-menu-arrow-left {
  .o-sub-menu:not([data-level='0']) .o-sub-menu-children.expanded {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(var(--menu-arrow-size) / 2 + var(--menu-level-indent));
      width: var(--menu-indicator-width);
      background-image: linear-gradient(to right, var(--menu-indicator-bg-color), var(--menu-indicator-bg-color));
      background-size: var(--menu-indicator-width) 100%;
      z-index: 0;
    }
  }
  .o-sub-menu-arrow {
    & + .o-sub-menu-title-icon,
    & + .o-sub-menu-title-content {
      margin-left: var(--menu-icon-gap);
    }
  }
}

.o-menu-popover {
  max-width: var(--menu-popover-width);
  word-wrap: break-word;
}