.btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5.5rem;
  height: 42rem;
  background: var(--color-font);
  border-radius: 54rem;
  border: 2rem solid var(--color-font);
  padding-inline: 20rem;
  padding-block: 6rem;
  color: var(--color-black);
  font-size: 16rem;
  font-weight: 500;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  appearance: none;
}

.btn.dark {
  background: #070707;
  color: var(--color-white);
  font-weight: 400;
  gap: 4rem;
  padding: 4rem 8rem;
  font-size: 12rem;
  height: 44rem;
  min-width: 180rem;
  border-radius: 8rem;
}

.btn.outline-hover,
.btn.outline {
  color: var(--color-font);
  background: transparent;
}

.btn.outline-hover:not(:hover):not(:active):not(:focus-visible) {
  border-color: transparent;
}

.btn.sm {
  height: 32rem;
  font-weight: 400;
  font-size: 12rem;
  gap: 4rem;
  border-radius: 24rem;
  padding: 8rem;
  border-width: clamp(1px, 1rem, 1rem);
}

.btn.empty {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  height: auto;
  border-radius: 0;
}

@media (hover: hover) {
  a:not(.shine):hover,
  .btn:not(.shine):hover {
    opacity: 0.85;
  }
}

a:not(.shine):active,
.btn:not(.shine):active {
  opacity: 0.75;
}

.gradient-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4rem;
  height: 22rem;
  padding-block: 8rem;
  padding-inline: 20rem;
  color: var(--color-white);
  font-size: 9.3rem;
  font-weight: 500;
  text-decoration: none;
  user-select: none;
  background: linear-gradient(90deg, #43a4ff 0%, #4375ff 100%);
  box-shadow: 4.45rem 3.34rem 13.36rem 0rem #4375ff4d,
    1.12rem 0.96rem 0rem 0rem #2f59ce, -0.5rem -0.5rem 1rem 0rem #2f59ce inset,
    0.5rem 0.5rem 1rem 0rem #ffffff inset;
  border-radius: 40rem;
}

@media (orientation: landscape) {
  .gradient-btn {
    height: 25rem;
    font-size: 11rem;
  }
}

.gradient-btn.cancel {
  background: linear-gradient(90deg, #cdcecc 0%, #b7cae3 100%);
  box-shadow: 4.45rem 3.34rem 13.36rem 0rem #b3bdd74d,
    1.11rem 0.96rem 0rem 0rem #8ea1b9, -0.5rem -0.5rem 1rem 0rem #8ea1b9 inset,
    0.5rem 0.5rem 1rem 0rem #ffffff inset;
}

.gradient-btn:active,
.gradient-btn:focus-visible {
  box-shadow: none;
}

@property --authBorderDeg {
  syntax: '<angle>';
  initial-value: 220deg;
  inherits: true;
}

.btn.shine {
  --shineBgColorAlphaValue: 0;
  --baseShineColor: #905e32;
  border-color: transparent;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.btn.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;

  background: linear-gradient(
    to top,
    hsl(from var(--baseShineColor) h s l) 0%,
    transparent 100%
  );

  pointer-events: none;

  opacity: var(--shineBgColorAlphaValue);
  transition: opacity 0.5s ease;
}

.btn.shine.visible {
  --authBorderDeg: 97.16deg;
}

.btn.shine .shineDecoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  transition: filter 1s ease, scale 0.5s ease, rotate 0.5s ease;
}

.btn.shine::before,
.btn.shine .shineDecoration::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    var(--authBorderDeg),
    #f0cfb7 -4.59%,
    #bc8350 35.26%,
    #f0cfb7 49.03%,
    var(--baseShineColor) 64.95%,
    #f0cfb7 103.72%
  );
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
  border-radius: inherit;
  pointer-events: inherit;
  padding: clamp(1.4px, 2px, 1.1rem);
  transition: --authBorderDeg 4s cubic-bezier(0.75, 0, 0.16, 2) 0.5s;
}

@media (hover: hover) {
  .btn.shine:hover {
    --authBorderDeg: 185deg !important;
    --shineBgColorAlphaValue: 0.3;
  }

  .btn.shine:hover .shineDecoration {
    filter: blur(4rem);
    scale: 1.1 1.1;
    rotate: 2deg;
    opacity: 1;
  }

  .btn.shine:hover::before,
  .btn.shine:hover .shineDecoration::before {
    transition-delay: 0s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.15, 0, 0.15, 1);
  }
}

.btn.shine:active,
.btn.shine:focus-visible {
  --shineBgColorAlphaValue: 0.4;
  transition-duration: 0.1s;
}