button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn {
  --btn-border-radius: var(--radius-full, 99rem);
  --btn-hover-brightness: 0.92;

  align-items: center;
  text-decoration: none !important;
  background-color: var(--btn-background, var(--color-canvas-elevated));
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-size, 1px) solid
    var(--btn-border-color, var(--color-ink-lighter));
  color: var(--btn-color, var(--color-ink));
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.9375em;
  font-weight: var(--btn-font-weight, 600);
  gap: var(--btn-gap, 0.5em);
  justify-content: center;
  letter-spacing: -0.01em;
  line-height: 1.4;
  padding: var(--btn-padding, 0.5em 1.2em);
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    box-shadow 120ms ease-out,
    color 120ms ease-out,
    filter 120ms ease-out,
    opacity 120ms ease-out,
    transform 150ms cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: var(--shadow-xs);
}

button[type="submit"],
input[type="submit"] {
  --btn-background: var(--color-link);
  --btn-border-color: var(--color-link);
  --btn-color: white;
  box-shadow:
    var(--shadow-sm),
    0 0 0 0 color-mix(in srgb, var(--color-link) 40%, transparent);
}

@media (hover: hover) {
  button[type="submit"]:hover,
  input[type="submit"]:hover {
    box-shadow:
      var(--shadow-md),
      0 0 12px color-mix(in srgb, var(--color-link) 25%, transparent);
  }
}

@media (any-hover: hover) {
  .btn:hover {
    filter: brightness(var(--btn-hover-brightness));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.95);
  }
}

@media (prefers-color-scheme: dark) {
  .btn {
    --btn-hover-brightness: 1.2;
  }
}

.btn[disabled],
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

/* Button variants */
.btn--primary {
  --btn-background: var(--color-link);
  --btn-border-color: var(--color-link);
  --btn-color: white;
  box-shadow:
    var(--shadow-sm),
    0 0 0 0 color-mix(in srgb, var(--color-link) 40%, transparent);
}

@media (hover: hover) {
  .btn--primary:hover {
    box-shadow:
      var(--shadow-md),
      0 0 14px color-mix(in srgb, var(--color-link) 30%, transparent);
  }
}

.btn--positive {
  --btn-background: var(--color-positive);
  --btn-border-color: var(--color-positive);
  --btn-color: white;
  box-shadow:
    var(--shadow-sm),
    0 0 0 0 color-mix(in srgb, var(--color-positive) 40%, transparent);
}

@media (hover: hover) {
  .btn--positive:hover {
    box-shadow:
      var(--shadow-md),
      0 0 14px color-mix(in srgb, var(--color-positive) 30%, transparent);
  }
}

button[type="submit"].btn--negative {
  --btn-background: var(--color-negative) !important;
  --btn-border-color: var(--color-negative) !important;
  --btn-color: white !important;
}

.btn--plain {
  --btn-background: transparent;
  --btn-border-size: 0;
  --btn-padding: 0;
  box-shadow: none;
}

@media (hover: hover) {
  .btn--plain:hover {
    transform: none;
    box-shadow: none !important;
    filter: none;
    text-decoration: underline !important;
  }
}

.btn--left {
  justify-content: flex-start;
  width: fit-content;
}

/* Disable drag and touch-and-hold gestures on mobile */
@media (max-width: 640px) {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .btn,
  a.btn {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
  }
}