/**
 * @file
 * Buttons that expands second level nav when clicked.
 * Applies to both the full horizontal and mobile vertical menus.
 * Possible @todo Replace the CSS style chevron with an icon to get more even spacing?
 */

.primary-nav__button-toggle {
  position: relative;
  box-sizing: content-box;
  overflow: hidden;
  width: 1.25rem;
  height: 2.25rem;
  margin-left: 0.2rem;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: var(--white);
}

.primary-nav__button-toggle:is(:focus, :focus-visible) {
  border: 0;
  outline: 0;
}

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

.primary-nav__button-toggle .icon--menu-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
}

.primary-nav__button-toggle:is(:hover, :focus) .icon--menu-toggle {
  outline: solid 2px var(--laurier-gold);
}

.primary-nav__button-toggle .icon--menu-toggle:before,
.primary-nav__button-toggle .icon--menu-toggle:after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 1.125rem;
  height: 0;
  content: "";
  transform: translate(-50%, -50%);
  border-top: solid 3px var(--laurier-purple);
}

.primary-nav__button-toggle .icon--menu-toggle:after {
  transition: opacity 0.2s;
  transform: translate(-50%, -50%) rotate(90deg);
}

.primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle:after {
  opacity: 0;
}