.spr-button-hamburger--dark {
  --button-hamburger-color: #fff;
  --button-hamburger-background-color: transparent;
}

.spr-button-hamburger {
  position: relative;
  display: block;
  inline-size: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  color: var(--button-hamburger-text-color);
  border: none;
  outline: none;
  background-color: var(--button-hamburger-background-color);
  padding-block: var(--button-hamburger-padding-block);
  padding-inline: var(--button-hamburger-padding-inline);
  appearance: none;

  &:hover {
    background-color: var(--button-hamburger-hover-background-color);
  }

  &:focus,
  &:focus-visible {
    outline: 3px solid var(--button-hamburger-outline-color);
  }
}

.spr-button-hamburger__line {
  position: absolute;
  top: 50%;
  left: calc(0.5rem + 3px);
  display: block;
  inline-size: 1.125rem;
  height: 0.125rem;
  transition: transform 0.4s;
  transform: translateY(-50%);
  transform-origin: center;
  background-color: var(--button-hamburger-color);
}

.is-active .spr-button-hamburger__line {
  background-color: transparent;
}

.spr-button-hamburger__line::before {
  display: block;
  inline-size: 1.125rem;
  height: 0.125rem;
  content: "";
  transform: translateY(-5px);
  transform-origin: center;
  background-color: var(--button-hamburger-color);
}

/* .spr-button-hamburger__line:before {
  animation: rotate-top-bar 0.4s reverse;
} */
.is-active .spr-button-hamburger__line::before {
  transform: translate(-1px, 0) rotate(-45deg);
}

.spr-button-hamburger__line::after {
  display: block;
  inline-size: 1.125rem;
  height: 0.125rem;
  content: "";
  transform: translateY(3px);
  transform-origin: center;
  background-color: var(--button-hamburger-color);
}

/* .spr-button-hamburger__line:after {
  animation: rotate-bottom-bar 0.4s reverse;
} */

.is-active .spr-button-hamburger__line::after {
  transform: translate(-1px, -2px) rotate(45deg);
}

/* @keyframes rotate-top-bar {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}

@keyframes rotate-bottom-bar {
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
} */