.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: var(--space-s) var(--space-l);
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  font: inherit;
  font-weight: var(--font-weight-label);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-quick),
    border-color var(--duration-quick),
    color var(--duration-quick);
}

.button--primary {
  background-color: var(--color-button-background);
  color: var(--color-button-text);
}

.button--primary:hover {
  background-color: var(--color-button-background-hover);
}

.button--light {
  background-color: var(--color-highlight-on-dark);
  color: var(--color-text);
}

.button--light:hover {
  background-color: var(--color-text-on-dark);
}

.button--outline {
  border-color: currentColor;
  color: var(--color-text-on-dark);
}

.button--outline:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.button__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}