.dsa-nav-toggle {
  --dsa-nav-toggle--size: var(--dsa-logo--height);
  --dsa-nav-toggle--color: var(--ks-text-color-default);
  --dsa-nav-toggle--color_open: var(--ks-text-color-default);
  --dsa-nav-toggle--shadow: none;
  --dsa-nav-toggle_floating--shadow: 2px 4px 6px var(--ks-color-fg-inverted);
  --dsa-nav-toggle_floating--color: var(--ks-color-fg);
  --dsa-nav-toggle_floating--color_open: var(--ks-color-fg);
}

html.overlay-open {
  overflow: hidden;
}

button.dsa-nav-toggle {
  display: block;
  position: relative;
  right: 0;
  box-sizing: content-box;
  transition: top var(--ks-transition-collapse);
  z-index: 1;
  padding: 0 var(--dsa-header--spacing-horizontal);
  transform: translateX(var(--dsa-header--spacing-horizontal));
  --toggle__icon-bar--offset: 45%;
}
button.dsa-nav-toggle .dsa-nav-toggle__label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
button.dsa-nav-toggle .dsa-nav-toggle__icon {
  position: relative;
  display: block;
  cursor: pointer;
  height: var(--dsa-nav-toggle--size);
  width: var(--dsa-nav-toggle--size);
  transform: scale(0.7) translate(7.5%, 7.5%);
  transition: inherit;
  color: var(--dsa-nav-toggle--color);
  filter: drop-shadow(var(--dsa-nav-toggle--shadow));
}
.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
  color: var(--dsa-nav-toggle_floating--color);
  filter: drop-shadow(var(--dsa-nav-toggle_floating--shadow));
}
@media (min-width: 40em) {
  button.dsa-nav-toggle .dsa-nav-toggle__icon {
    transform: scale(0.8) translate(2.5%, 2.5%);
  }
}
.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon {
  color: var(--dsa-nav-toggle--color_open);
}
button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
  content: "";
}
button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
  box-shadow: var(--dsa-nav-toggle--shadow);
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: currentColor;
}
button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle {
  top: 50%;
  margin-top: -1.5px;
}
button.dsa-nav-toggle .dsa-nav-toggle__icon::before {
  top: 2px;
  transition: top var(--ks-duration-slow)/2 ease var(--ks-duration-slow)/2, transform ease var(--ks-duration-slow)/2;
}
button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
  bottom: 2px;
  transition: bottom var(--ks-duration-slow)/2 ease var(--ks-duration-slow)/2, transform ease var(--ks-duration-slow)/2;
}
button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon__middle {
  display: none;
}
button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::before {
  top: var(--toggle__icon-bar--offset);
  transition: top ease var(--ks-duration-slow)/2, transform var(--ks-duration-slow)/2 ease var(--ks-duration-slow)/2;
  transform: rotate(-45deg);
}
button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::after {
  bottom: var(--toggle__icon-bar--offset);
  transition: bottom ease var(--ks-duration-slow)/2, transform var(--ks-duration-slow)/2 ease var(--ks-duration-slow)/2;
  transform: rotate(45deg);
}