@use '../utilities';

.burger-btn {
  width: 3rem;
  height: 3rem;
  position: relative;
  cursor: pointer;

  span {
    display: block;
    width: 3rem;
    height: 0.4rem;
    background-color: utilities.$primary;
    position: absolute;
    transition:
      transform 0.3s,
      top 0.3s;
    overflow: hidden;

    @keyframes shine {
      0% {
        right: -200%;
      }

      30% {
        right: 200%;
      }

      100% {
        right: 200%;
      }
    }

    div {
      width: 200%;
      height: 100%;
      background: linear-gradient(
        90deg,
        utilities.$transparent 0%,
        utilities.$alt-color 50%,
        utilities.$transparent 100%
      );
      position: relative;
      animation: shine 5s infinite;
    }

    &:first-of-type {
      top: 15%;
      transform: translateY(-15%) rotate(0deg);
    }

    &:nth-of-type(2) {
      top: 50%;
      transform: translateY(-50%) rotateY(0deg);
    }

    &:last-of-type {
      top: 85%;
      transform: translateY(-85%) rotate(0deg);
    }
  }

  &.active {
    span {
      &:first-of-type {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }

      &:nth-of-type(2) {
        transform: translateY(-50%) rotateY(-90deg);
      }

      &:last-of-type {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }
}