.spr-button-hamburger--dark {
  --button-hamburger-color: var(--color-white);
  --button-hamburger-background-color: transparent;

  .spr-header:hover &,
  .spr-header.is-active & {
    --button-hamburger-color: var(--color-black);
  }
}

.spr-button-hamburger {
  position: relative;
  display: block;
  width: 2.8125rem;
  height: 2.8125rem;
  cursor: pointer;
  color: var(--button-hamburger-text-color);
  border: 0.0625rem solid var(--button-hamburger-color);
  border-radius: 50%;
  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;

  &: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;
  width: 1.375rem;
  height: 0.0625rem;
  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;
  width: 1.375rem;
  height: 1px;
  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 {
  width: 1.6rem;
  transform: translate(-2px, 0) rotate(-45deg);
}

.spr-button-hamburger__line::after {
  display: block;
  width: 1.375rem;
  height: 1px;
  content: "";
  transform: translateY(4px);
  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 {
  width: 1.6rem;
  transform: translate(-2px, -1px) 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);
  }
} */