/* Shared, fixed-box icon family for drawer and standalone menu triggers. */

.menu-trigger-icon {
  display: inline-flex;
  flex: 0 0 20px;
  width: 20px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: inherit;
}

.menu-trigger-icon-bar {
  display: block;
  width: 20px;
  height: 2px;
  flex: 0 0 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform var(--mc-menu-trigger-icon-duration, 180ms) var(--mc-menu-trigger-icon-easing, ease),
    opacity var(--mc-menu-trigger-icon-duration, 180ms) var(--mc-menu-trigger-icon-easing, ease),
    width var(--mc-menu-trigger-icon-duration, 180ms) var(--mc-menu-trigger-icon-easing, ease);
}

.menu-trigger-icon[data-menu-trigger-icon-style="compact"] {
  justify-content: center;
  gap: 3px;
}

.menu-trigger-icon[data-menu-trigger-icon-style="compact"] .menu-trigger-icon-bar {
  width: 16px;
  align-self: center;
}

.menu-trigger-icon[data-menu-trigger-icon-style="staggered"] .menu-trigger-icon-bar--top {
  width: 14px;
  align-self: flex-end;
}

.menu-trigger-icon[data-menu-trigger-icon-style="staggered"] .menu-trigger-icon-bar--bottom {
  width: 14px;
}

.menu-trigger-icon[data-menu-trigger-icon-style="tapered"] .menu-trigger-icon-bar--middle {
  width: 16px;
}

.menu-trigger-icon[data-menu-trigger-icon-style="tapered"] .menu-trigger-icon-bar--bottom {
  width: 12px;
}

.menu-trigger-icon[data-menu-trigger-icon-style="two-line"] {
  justify-content: center;
  gap: 6px;
}

.menu-trigger-icon[data-menu-trigger-icon-style="two-line"] .menu-trigger-icon-bar--middle {
  display: none;
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="x"] .menu-trigger-icon-bar--top,
[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-left"] .menu-trigger-icon-bar--top,
[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-right"] .menu-trigger-icon-bar--top {
  transform: translateY(7px) rotate(45deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="x"] .menu-trigger-icon-bar--middle,
[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="collapse"] .menu-trigger-icon-bar--middle {
  opacity: 0;
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="x"] .menu-trigger-icon-bar--bottom,
[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-left"] .menu-trigger-icon-bar--bottom,
[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-right"] .menu-trigger-icon-bar--bottom {
  transform: translateY(-7px) rotate(-45deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-left"] .menu-trigger-icon-bar--top {
  width: 12px;
  transform: translate(0, 4px) rotate(-35deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-left"] .menu-trigger-icon-bar--bottom {
  width: 12px;
  transform: translate(0, -4px) rotate(35deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-right"] .menu-trigger-icon-bar--top {
  align-self: flex-end;
  width: 12px;
  transform: translate(0, 4px) rotate(35deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="arrow-right"] .menu-trigger-icon-bar--bottom {
  align-self: flex-end;
  width: 12px;
  transform: translate(0, -4px) rotate(-35deg);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="collapse"] .menu-trigger-icon-bar--top {
  transform: translateY(4px);
}

[data-menu-drawer-trigger][aria-expanded="true"] .menu-trigger-icon[data-menu-trigger-icon-animation="collapse"] .menu-trigger-icon-bar--bottom {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .menu-trigger-icon-bar {
    transition-duration: 0.01ms;
  }
}