.button {
  padding: 1.2rem 2.4rem;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background 0.2s, color 0.2s;
  border: none;
  background: #e3e3e3;
  color: #000;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .button:hover {
    background: #d3d1d1;
  }
}
.button:active {
  background: #c4c4c4;
}
.button:focus {
  background: #e3e3e3;
  outline: 0.3rem solid rgba(227, 227, 227, 0.3);
}
.button[disabled], .button.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.button--big {
  padding: 1.6rem 3.2rem;
  font-size: 1.8rem;
}
.button--outline {
  background: none;
  border: 0.1rem solid #e3e3e3;
  color: #000;
}
.button--link {
  background: none;
  text-decoration: underline;
  padding: 0;
  border: none;
}
.button--link:active, .button--link:focus {
  background: none;
  outline: none;
}
@media (hover: hover) {
  .button--link:hover {
    background: none;
    text-decoration: none;
  }
}
.button--loader {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  color: transparent !important;
  transition: color 0.2s;
}
.button--loader:before, .button--loader:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.button--loader:before {
  width: 100%;
  height: 100%;
}
.button--loader:after {
  width: 4rem;
  height: 2rem;
  top: calc(50% - 1rem);
  left: calc(50% - 2rem);
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: 33.3333333333% 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }
  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }
  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }
  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}