:host {
  display: block;
}

.hb-menu {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
  color: var(--hb-menu-color, var(--hb-color-text));
  font-size: var(--hb-font-size-sm);
  border-right: 1px solid var(--hb-color-border-secondary);
  box-sizing: border-box;
}

/* ---- 水平模式 ---- */
.hb-menu--horizontal {
  display: flex;
  border-right: none;
  border-bottom: 1px solid var(--hb-color-border-secondary);
}

/* ---- 折叠 ---- */
.hb-menu--collapsed {
  width: 64px;
}
.hb-menu--collapsed .hb-menu-item__text,
.hb-menu--collapsed .hb-sub-menu__label,
.hb-menu--collapsed .hb-sub-menu__arrow {
  display: none;
}

/* 折叠态 SubMenu：图标条布局（仅显示 icon），不再就地展开 */
.hb-sub-menu--collapsed {
  position: relative;
}
.hb-sub-menu--collapsed .hb-sub-menu__title {
  justify-content: center;
  padding: 0;
}

/* 折叠态浮层：绝对定位弹出在右侧 */
.hb-sub-menu__children--popover {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  min-width: 160px;
  padding: 4px 0;
  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
  border: 1px solid var(--hb-color-border-secondary);
  border-radius: var(--hb-radius-sm, 4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  white-space: nowrap;
}

/* 折叠态浮层内的 MenuItem 取消就地展开时的缩进 */
.hb-sub-menu__children--popover .hb-menu-item {
  padding-left: var(--hb-spacing-md);
}

/* ---- MenuItem ---- */
::slotted(hb-menu-item) {
  display: block;
}

.hb-menu-item {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-xs);
  padding: 0 var(--hb-spacing-md);
  height: var(--hb-size-default);
  line-height: var(--hb-size-default);
  cursor: pointer;
  transition: all var(--hb-transition-duration) var(--hb-transition-function);
  white-space: nowrap;
  list-style: none;
  box-sizing: border-box;
}

.hb-menu-item:hover:not(.hb-menu-item--disabled) {
  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));
}

.hb-menu-item--active {
  color: var(--hb-menu-active-color, var(--hb-color-primary));
  background-color: var(--hb-menu-item-active-bg, var(--hb-color-primary-bg));
}

.hb-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hb-menu-item__icon {
  display: inline-flex;
  width: 16px;
}

/* ---- SubMenu ---- */
.hb-sub-menu {
  list-style: none;
}

.hb-sub-menu__title {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-xs);
  padding: 0 var(--hb-spacing-md);
  height: var(--hb-size-default);
  line-height: var(--hb-size-default);
  cursor: pointer;
  transition: all var(--hb-transition-duration);
}

.hb-sub-menu__title:hover {
  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));
}

.hb-sub-menu__label {
  flex: 1;
}

.hb-sub-menu__arrow {
  font-size: 10px;
  transition: transform var(--hb-transition-duration);
}

.hb-sub-menu__arrow--open {
  transform: rotate(90deg);
}

.hb-sub-menu__children {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
}

.hb-sub-menu__children .hb-menu-item {
  padding-left: calc(var(--hb-spacing-md) + var(--hb-spacing-lg));
}
