.rd-hamburger {
  display: flex;
  width: 35px;
  aspect-ratio: 1;
  position: relative;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  &[aria-expanded='true'] {
    .rd-hamburger__line {
      width: calc(100% - 8px);
      left: 4px;
      &:nth-child(1) {
        transform: translateY(0) rotate(45deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: translateY(0) rotate(-45deg);
      }
    }
  }
  &:focus {
    outline: none !important;
  }
}

.rd-hamburger__line {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  background-color: var(--color-black-txt);
  width: 100%;
  height: 2px;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
    width 0.3s ease-in-out, background-color 0.2s ease-in-out,
    left 0.3s ease-in-out;
  &:nth-child(1) {
    transform: translateY(-8px);
  }
  &:nth-child(3) {
    transform: translateY(8px);
  }
}