.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-s) var(--spacing-l);
  border-radius: var(--borderRadiusSmall);
  font-size: var(--defaultFontSize);
  font-weight: var(--textFontWeight);
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: var(--transitionAll);
  white-space: nowrap;

  &:active {
    transform: translateY(0);
  }
}

.btn-primary {
  @extend .btn;
  background: var(--gradientPrimary);
  color: var(--colorTextContrast);

  &:hover {
    transform: translateY(calc(-2px * var(--animEnabled)));
    box-shadow: var(--boxShadowStrong);
    color: var(--colorTextContrast);
  }

  &.active {
    background: var(--colorBackgroundAccentActive);
  }
}

.btn-secondary {
  @extend .btn;
  background: transparent;
  color: var(--colorBackgroundAccent);
  border: var(--borderAccent);

  &:hover {
    background: var(--colorBackgroundAccent);
    color: var(--colorTextContrast);
  }
}

.btn-white {
  @extend .btn;
  background: var(--colorWhite);
  color: var(--colorPrimary);

  &:hover {
    box-shadow: var(--boxShadowStrong);
    transform: translateY(calc(-2px * var(--animEnabled)));
  }
}

.btn-outline-white {
  @extend .btn;
  background: transparent;
  color: var(--colorWhite);
  border: 2px solid var(--colorWhite);

  &:hover {
    background: var(--colorWhite);
    color: var(--colorPrimary);
  }
}

.btn-lg {
  padding: var(--spacing-m) var(--spacing-xxl);
  font-size: var(--titleFontSize);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-m);
  font-size: var(--descriptionFontSize);
}

.btn-icon {
  width: var(--iconSizeLarge);
  height: var(--iconSizeLarge);
  padding: 0;
  border-radius: 50%;
}