.hamburger {
  --line-width: 29px;
  --line-border-width: 2px;
  align-items: center;
  block-size: 48px;
  cursor: pointer;
  display: flex;
  inline-size: 48px;
  justify-content: center;
  margin-inline-end: -10px;
  position: relative;

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &-lines {
    block-size: 18px;
    inline-size: var(--line-width);
    position: relative;

    &::before,
    &::after {
      content: '';
    }

    &::before,
    &::after,
    &--primary,
    &--secondary {
      background-color: var(--color-text);
      block-size: var(--line-border-width);
      border-radius: 6px;
      display: block;
      inline-size: var(--line-width);
      inset-inline-start: 0;
      position: absolute;
      transition: opacity 0.2s ease-in-out 0.2s, rotate 0.2s ease-in-out 0.2s, translate 0.2s ease-in-out 0.2s;
    }

    &::before,
    &::after {
      will-change: translate, opacity;
    }

    &::before {
      inset-block-start: 0;
    }

    &--primary,
    &--secondary {
      inset-block-start: 9px;
      transition-delay: 0s;
      will-change: rotate;
    }

    &::after {
      inset-block-start: 18px;
    }
  }
}

&[data-status='menuIsOpen'] {
  .hamburger-lines {
    &::before,
    &::after {
      opacity: 0;
      transition-delay: 0s;
    }

    &::before {
      translate: 0 9px;
    }

    &::after {
      translate: 0 -9px;
    }

    &--primary {
      rotate: 45deg;
      transition-delay: 0.2s;
    }

    &--secondary {
      rotate: -45deg;
      transition-delay: 0.2s;
    }

    &::before,
    &::after {
      opacity: 0;
      transition-delay: 0s;
    }
  }
}
