.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--hit-target);
  padding: var(--button-primary-padding-block) var(--button-primary-padding-inline);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-default);
  font-family: var(--font-sans);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.btn--primary {
  background-color: var(--button-primary-background);
  border-color: var(--color-mark-accent);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
}

.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible:not(:disabled) {
  background-color: var(--button-primary-background-hover);
  box-shadow: var(--button-primary-shadow-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
}

.btn:disabled {
  opacity: var(--button-primary-opacity-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.btn--full {
  align-self: stretch;
  width: 100%;
}

@media (max-width: 600px) {
  .btn {
    align-self: stretch;
    width: 100%;
  }
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}