@import '@opensumi/ide-core-browser/lib/style/variable.less';
.icon,
.submenuIcon {
  width: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  :global(.kt-icon) {
    color: var(--menu-foreground);
  }
}

.label {
  flex: 1;
  padding-left: 4px;
  padding-right: 16px;
}

.shortcut,
.submenuIcon,
.extraDesc {
  padding-right: 4px;
}

.extraDesc,
.shortcut {
  justify-content: right;
  text-align: center;
  color: var(--kt-menu-descriptionForeground);
}

.menuAction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  user-select: none;
  padding: 0 6px;

  &.disabled {
    .shortcut {
      color: var(--kt-menu-disableForeground);
    }
  }

  &:not(.disabled):hover {
    .shortcut {
      color: var(--menu-selectionForeground);
    }
  }

  &:focus {
    .shortcut {
      color: var(--menu-selectionForeground);
    }
  }
  .label {
    font-size: @base-font-size;
    display: flex;
    align-items: center;
    // stop Flexbox removing trailing whitespace
    // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
    white-space: pre-wrap;
  }
}

.titleActions {
  display: flex;
  align-items: center;
  height: 100%;
}

.iconAction {
  cursor: pointer;
  color: var(--kt-actionbar-foreground);
  border: 1px solid transparent;

  &.disabled {
    color: var(--kt-actionbar-disableForeground);
    pointer-events: none;
  }

  &:not(.disabled):hover {
    border-radius: 4px;
    background-color: var(--kt-icon-hoverBackground);
  }

  &.selected {
    background-color: var(--kt-actionbar-selectionBackground);
    border-color: var(--kt-actionbar-selectionBorder);
  }

  :global(.kt-button) {
    padding: 0;
  }
}

.btnAction :global(.kt-icon) {
  color: inherit;
}

.btnAction + .btnAction,
.btnAction + .iconAction,
.iconAction + .btnAction,
.iconAction + .iconAction {
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconAction + .divider,
.divider + .iconAction {
  margin-left: 8px;
}

.titleActions + .titleActions::before {
  content: ' ';
  display: block;
  margin: 0 6px;
}

// divider 存在于两个 InlineActionBar 组件之间，也存在与 group 之间
.titleActions + .titleActions::before,
.divider {
  background-color: var(--kt-actionbar-separatorBackground);
  width: 1px;
  height: 14px;
}

// 这里的 css 规则是为了合理展示 divider 元素/菜单分割符
// .menuItemDivider {
//   display: none;
// }

// .menuItem + .menuItemDivider,
// .submenuItem + .menuItemDivider {
//   display: block;
// }

.menuItemDivider:first-child,
.menuItemDivider:last-child {
  display: none;
}

.titleActions {
  .verticalDivider {
    width: 1px;
    display: list-item;
    background-color: var(--menu-separatorBackground);
    pointer-events: none;
    overflow: hidden;

    &::marker {
      content: '';
      unicode-bidi: initial;
    }
  }
}

:global {
  // 菜单项增加滚动条
  .kt-menu {
    max-height: 75vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
