@import "./../../common/mordern-reset.css";
@import "./../../common/base.css";

h1,
h2,
button {
  margin-block: 1rem;
}

.button--burger {
  inline-size: 100px;
  block-size: 100px;
  position: relative;
  background-color: var(--red);
  border: 0;
  padding: 0;
  overflow: hidden;

  .burger-bar {
    position: absolute;
    inset-inline: 0;
    block-size: 20%;
    background-color: var(--silver);
    border-radius: 100px;
    transition: all 2s;
  }

  .burger-bar-top {
    inset-block-start: 0;
  }

  .burger-bar-middle {
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .burger-bar-bottom {
    inset-block-start: 100%;
    transform: translateY(-100%);
  }

  &:hover {
    .burger-bar-top {
      inset-block-start: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    .burger-bar-middle {
      transform: translate(120%, -50%);
    }

    .burger-bar-bottom {
      inset-block-start: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }
  }
}

@keyframes spinner {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.loading-spinner {
  inline-size: 48px;
  block-size: 48px;
  color: var(--red);

  svg {
    animation: spinner 1s infinite steps(12);
  }
}