@use "../../wc";

:host {
  --submenu-offset: -2px;
  --color: rgba(var(--zn-text), var(--zn-text-opacity));
  --hover-color: rgb(var(--zn-primary));
  --hover-bg: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
  display: block;
}

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

.menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
  transition: .4s fill;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  cursor: pointer;
  border-bottom-width: 1px;
  width: 100%;
  text-decoration: none;
  color: var(--color);
}

.menu-item__label::slotted(*) {
  text-decoration: none;
  color: inherit;
}

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

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

// Flush variants - remove padding
.menu-item--flush {
  padding: 0;
}

.menu-item--flush-x {
  padding-left: 0;
  padding-right: 0;
}

.menu-item--flush-y {
  padding-top: 0;
  padding-bottom: 0;
}

// No border variant
.menu-item--no-border {
  border-bottom-width: 0;
}

// Active state - vertical strip indicator
.menu-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--hover-color);
}

.menu-item.menu-item--active .menu-item__label {
  font-weight: 700;
  color: var(--hover-color);
}

.menu-item--rtl.menu-item--active::before {
  left: auto;
  right: 0;
}

// Active state with color variants
.menu-item--active.menu-item--primary::before {
  background-color: rgb(var(--zn-primary));
}

.menu-item--active.menu-item--error::before {
  background-color: rgb(var(--zn-color-error));
}

.menu-item--active.menu-item--info::before {
  background-color: rgb(var(--zn-color-info));
}

.menu-item--active.menu-item--warning::before {
  background-color: rgb(var(--zn-color-warning));
}

.menu-item--active.menu-item--success::before {
  background-color: rgb(var(--zn-color-success));
}

.menu-item--active.menu-item--secondary::before {
  background-color: rgb(var(--zn-accent));
}

.menu-item .menu-item__label {
  display: flex;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  align-items: center;
  overflow: hidden;
  color: var(--color);
}

.menu-item:hover .menu-item__label {
  color: var(--hover-color);
}

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

.menu-item .menu-item__prefix::slotted(*) {
  --icon-size: var(--zn-font-size-small);
  margin-inline-end: var(--zn-spacing-small);
}

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

.menu-item .menu-item__suffix::slotted(*) {
  margin-inline-start: var(--zn-spacing-x-small);
}

/* Safe triangle */
.menu-item--submenu-expanded::after {
  content: '';
  position: fixed;
  z-index: calc(var(--zn-z-index-dropdown) - 1);
  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,
.menu-item--active {
  background-color: var(--hover-bg);
  color: var(--hover-color);
}

:host(:focus-visible) .menu-item {
  outline: none;
  background-color: var(--hover-bg);
  color: var(--hover-color);
  opacity: 1;
}

.menu-item .menu-item__check,
.menu-item .menu-item__chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  visibility: hidden;
}

.menu-item .menu-item__chevron {
  display: none;
}

.menu-item--has-submenu .menu-item__chevron {
  display: flex;
}

:host(:not([role="menuitemcheckbox"])) .menu-item .menu-item__check {
  display: none;
}

.menu-item--checked .menu-item__check,
.menu-item--has-submenu .menu-item__chevron {
  visibility: visible;
  display: flex;
}

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

.menu-item--rtl zn-popup::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(zn-menu) {
  max-width: var(--auto-size-available-width) !important;
  max-height: var(--auto-size-available-height) !important;
}


.menu-item--primary {
  --color: rgba(var(--zn-primary), 0.9);
  --hover-color: #ffffff;
  --hover-bg: rgba(var(--zn-primary), 0.9);
}

.menu-item--error {
  --color: rgb(var(--zn-color-error));
  --hover-color: #ffffff;
  --hover-bg: rgba(var(--zn-color-error), 0.9);
}

.menu-item--info {
  --color: rgb(var(--zn-color-info));
  --hover-color: #ffffff;
  --hover-bg: rgba(var(--zn-color-info), 0.9);
}

.menu-item--warning {
  --color: rgb(var(--zn-color-warning));
  --hover-color: #ffffff;
  --hover-bg: rgba(var(--zn-color-warning), 0.9);
}

.menu-item--success {
  --color: rgb(var(--zn-color-success));
  --hover-color: #ffffff;
  --hover-bg: rgba(var(--zn-color-success), 0.9);
}

.menu-item--secondary {
  --color: rgb(var(--zn-accent));
}

.menu-item--transparent {
  --color: rgb(var(--zn-text));
}