.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--btn-fw);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.button:hover, .button:focus {
  text-decoration: none;
  outline: none;
}

.button:disabled, .button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button--primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.button--primary:hover, .button--primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

.button--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.button--secondary:hover, .button--secondary:focus {
  background-color: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

.button--ghost {
  background-color: transparent;
  color: var(--color-link);
  border-color: transparent;
  padding: var(--space-sm) var(--space-md);
}

.button--ghost:hover, .button--ghost:focus {
  background-color: var(--color-bg);
  color: var(--color-primary-hover);
}

.button--danger {
  background-color: var(--color-price);
  color: #fff;
  border-color: var(--color-price);
}

.button--danger:hover, .button--danger:focus {
  filter: brightness(0.9);
  color: #fff;
}

.button--block {
  display: flex;
  width: 100%;
}

.button--small {
  padding: calc(var(--btn-py) * 0.6) calc(var(--btn-px) * 0.7);
  font-size: var(--fs-sm);
}

.button--large {
  padding: calc(var(--btn-py) * 1.3) calc(var(--btn-px) * 1.2);
  font-size: var(--fs-lg);
}