.header__menu .menu-item--level-0 .menu-item__link {
  padding-inline: var(--spacing-large);

  &:has(~ .sub-menu-item-toggle:hover) {
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }
}

.header__menu .menu-item > .menu {
  display: none
}

@media (min-width:960px) {
  .header__menu .menu-item > .menu {
    position: absolute;
  }
}

.header__menu .menu-item > .menu[data-disclosure-expanded="true"] {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 260px;
  align-items: start;
  background: var(--zevi-default-body-background);
  padding-block: var(--spacing-xxlarge) var(--spacing);
  z-index: 100;
}

.header__menu .menu-item--has-sub-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

@media (min-width:960px) {
  .header__menu .menu-item > .menu[data-disclosure-expanded="true"] {
    top: 100%;
    inset-inline-start: 0;
    display: flex;
    margin: 0;
  }
}

/* Menu item toggle (button) */
.sub-menu-item-toggle {
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: right;
  width: calc(1.5 * var(--spacing));
  padding: 0;
  border: 0;
  background: 0 0
}

.sub-menu-item-toggle > * {
  pointer-events: none
}

.sub-menu-item-toggle__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: 0;
  width: var(--spacing);
  height: var(--spacing);
}

.sub-menu-item-toggle__icon svg {
  width: 100%;
  height: auto;
}

.sub-menu-item-toggle__icon svg path {
  fill: var(--zevi-default-body-foreground);
}

.menu-item--level-0 > .sub-menu-item-toggle .sub-menu-item-toggle__icon {
  transform: rotate(90deg);
}

.header__menu .menu-item--level-0:hover .sub-menu-item-toggle svg,
.header__menu .menu-item--level-0 .sub-menu-item-toggle[aria-expanded="true"] svg {
  transform: rotate(-180deg);
}

.header__menu .menu-item--level-0:hover .sub-menu-item-toggle svg path,
.header__menu .menu-item--level-0 .sub-menu-item-toggle:focus svg path,
.header__menu .menu-item--level-0 .sub-menu-item-toggle:focus-visible svg path {
  fill: var(--zevi-default-body-foreground);
}