/**
 * @file
 * Button that expands second level nav when clicked.
 */

:where([data-theme="dgsom"]) {
  --menu-svg-start: var(--size-1);
  --menu-svg-size: 20px;
}

:where([data-theme="labs-dynamic"]) {
  --menu-svg-start: var(--size-1);
  --menu-svg-size: 20px;
}

.menu-toggle {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  display: flex;
  height: 2em;
  justify-content: center;
  width: 2em;
}

.menu-toggle:focus {
  outline: auto 2px var(--midnight-joshua-tree);
  outline-offset: 2px;
}

/* aria-hidden attribute is removed by JS. Button is non-functional  until JS is enabled. */

.menu-toggle[aria-hidden="true"] {
  pointer-events: none;
}

.menu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

@media (min-width: 1280px) {
  .menu-toggle[aria-expanded="true"] svg {
    transform: none;
  }
}

@media (--desktop) {
  .menu-toggle[aria-expanded="true"] svg {
    transform: none;
  }
}

.menu-toggle svg {
  height: 1em;
  height: var(--menu-svg-size, 1em);
  -webkit-padding-before: 0;
  padding-block-start: 0;
  -webkit-padding-before: var(--menu-svg-start, 0);
  padding-block-start: var(--menu-svg-start, 0);
  width: 1em;
  width: var(--menu-svg-size, 1em);
}