:host {
  /**
    * @prop --popup-menu-text-color: [DEPRECATED] Menu Text Color
  */
  --popup-menu-text-color: var(--color-background-interactive-default);
  /**
    * @prop --popup-menu-item-background-color: [DEPRECATED] Menu Item Background Color
  */
  --popup-menu-item-background-color: var(--color-background-base-default);
  /**
    * @prop --popup-menu-item-hover-background-color: [DEPRECATED] Menu Item Hover Background Color
  */
  --popup-menu-item-hover-background-color: var(
      --color-background-surface-hover
  );
  /**
    * @prop --popup-menu-item-hover-background-color: [DEPRECATED] Menu Item Hover Text Color
  */
  --popup-menu-item-hover-text-color: var(
      --color-background-interactive-hover
  );
  display: block;
}
:host li {
  list-style: none;
  padding: 0.15rem 0.75rem;
  overflow: hidden;
  font-family: var(--font-body-1-font-family);
  font-size: var(--font-body-1-font-size);
  font-weight: var(--font-body-1-font-weight);
  letter-spacing: var(--font-body-1-letter-spacing);
  background-color: var(--popup-menu-item-background-color);
  color: var(--popup-menu-text-color);
}
:host li:hover {
  background-color: var(--popup-menu-item-hover-background-color);
}
:host li a,
:host li div {
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--popup-menu-text-color);
  word-wrap: none;
  white-space: nowrap;
  overflow: hidden;
}
:host li a:hover,
:host li div:hover {
  color: var(--popup-menu-item-hover-text-color);
}
:host li a {
  display: block;
  padding: 0;
  width: 100%;
}

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

:host([disabled]) {
  cursor: not-allowed;
}
:host([disabled]) li:hover {
  background-color: transparent;
}
:host([disabled]) li a,
:host([disabled]) li div {
  opacity: var(--disabled-opacity);
}