:host {
  --background-color-hover: var(--wa-color-neutral-fill-normal);
  --text-color-hover: var(--wa-color-neutral-on-normal);
  --submenu-offset: -0.125rem;

  display: block;
  color: var(--wa-color-text-normal);
}

:host([inert]) {
  display: none;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
  font: inherit;
  padding: var(--wa-space-xs) var(--wa-space-2xs);
  line-height: var(--wa-line-height-condensed);
  transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  cursor: pointer;
}

:host([disabled]) .menu-item {
  outline: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-item.menu-item--loading {
  outline: none;
  cursor: wait;
}

.menu-item.menu-item--loading *:not(wa-spinner) {
  opacity: 0.5;
}

.menu-item--loading wa-spinner {
  --indicator-color: currentColor;
  --track-width: 0.0625rem;
  position: absolute;
  font-size: 0.8em;
  top: calc(50% - 0.5em);
  left: 0.5rem;
  opacity: 1;
}

.menu-item .label {
  flex: 1 1 auto;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu-item .prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.menu-item .prefix::slotted(*) {
  margin-inline-end: var(--wa-space-xs);
}

.menu-item .suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.menu-item .suffix::slotted(*) {
  margin-inline-start: var(--wa-space-xs);
}

/* Safe triangle */
.menu-item--submenu-expanded::after {
  content: '';
  position: fixed;
  z-index: 899;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(
    var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
    var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
    var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
  );
}

:host(:focus-visible) {
  outline: none;
}

:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
  background-color: var(--background-color-hover);
  color: var(--text-color-hover);
}

:host(:focus-visible) .menu-item {
  outline: var(--wa-focus-ring);
  outline-offset: calc(-1 * var(--wa-focus-ring-width));
  background: var(--background-color-hover);
  color: var(--text-color-hover);
  opacity: 1;
}

.menu-item .check,
.menu-item .chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
  width: var(--wa-space-xl);
  visibility: hidden;
}

.menu-item--checked .check,
.menu-item--has-submenu .chevron {
  visibility: visible;
}

/* Add elevation and z-index to submenus */
wa-popup::part(popup) {
  box-shadow: var(--wa-shadow-m);
  z-index: 900;
  margin-left: var(--submenu-offset);
}

wa-popup:dir(rtl)::part(popup) {
  margin-left: calc(-1 * var(--submenu-offset));
}

@media (forced-colors: active) {
  :host(:hover:not([aria-disabled='true'])) .menu-item,
  :host(:focus-visible) .menu-item {
    outline: dashed 1px SelectedItem;
    outline-offset: -1px;
  }
}

::slotted(wa-menu) {
  max-width: var(--auto-size-available-width) !important;
  max-height: var(--auto-size-available-height) !important;
}
