.button {
  display: inline-flex;
  height: 4.6rem;
  box-sizing: border-box;
  border-radius: var(--hs-radius-buttons);
  font-weight: 600;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  transition-property: color, border-color, background-color, filter;
  transition-duration: var(--hs-transitions-duration-short);
  transition-timing-function: var(--hs-transitions-easing);
}

.button svg {
  stroke-width: 2.2;
}

.button--variant-primary {
  --hs-button-color: var(--hs-palette-button-primary-main);
  --hs-button-color-contrast: var(--hs-palette-button-primary-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-primary-highlight);
  --hs-button-color-border: var(--hs-palette-button-primary-accent);

  color: var(--hs-button-color-contrast);
  background: var(--hs-button-color);
}

.button--variant-primary:hover {
  background-color: color-mix(in srgb, var(--hs-button-color) 80%, transparent);
}

.button--variant-secondary {
  --hs-button-color: var(--hs-palette-button-secondary-main);
  --hs-button-color-contrast: var(--hs-palette-button-secondary-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-secondary-highlight);
  --hs-button-color-border: var(--hs-palette-button-secondary-accent);

  color: var(--hs-button-color-border);
  background-color: var(--hs-button-color);
  border: 1px solid var(--hs-button-color-border);
  font-weight: 400;
}

.button--variant-secondary:hover {
  background-color: var(--hs-button-color-highlight);
}

.button--variant-error {
  --hs-button-color: var(--hs-palette-button-error-main);
  --hs-button-color-contrast: var(--hs-palette-button-error-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-error-highlight);
  --hs-button-color-border: var(--hs-palette-button-error-accent);

  color: var(--hs-button-color-contrast);
  background: var(--hs-button-color);
}

.button--variant-error:hover {
  background-color: color-mix(in srgb, var(--hs-button-color) 80%, transparent);
}

.button--variant-success {
  --hs-button-color: var(--hs-palette-button-success-main);
  --hs-button-color-contrast: var(--hs-palette-button-success-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-success-highlight);
  --hs-button-color-border: var(--hs-palette-button-success-accent);

  color: var(--hs-button-color-contrast);
  background: var(--hs-button-color);
}

.button--variant-success:hover {
  background-color: color-mix(in srgb, var(--hs-button-color) 80%, transparent);
}

.button--variant-link {
  --hs-button-color: var(--hs-palette-button-primary-main);
  --hs-button-color-contrast: var(--hs-palette-button-primary-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-primary-highlight);
  --hs-button-color-border: var(--hs-palette-button-primary-accent);

  color: var(--hs-button-color-border);
}

.button--variant-disabled,
.button[disabled] {
  --hs-button-color: var(--hs-palette-button-disabled-main);
  --hs-button-color-contrast: var(--hs-palette-button-disabled-contrast);
  --hs-button-color-highlight: var(--hs-palette-button-disabled-highlight);
  --hs-button-color-border: var(--hs-palette-button-disabled-accent);
}

.button--variant-secondary.button--variant-disabled,
.button--variant-secondary[disabled] {
  color: var(--hs-button-color-contrast);
  font-weight: 600;
}

.button--width-wide {
  padding: 0 calc(var(--hs-spacing-large) * 2.5);
}

.button--width-narrow {
  padding: 0 var(--hs-spacing-large);
}

.button--fit-content-width {
  width: fit-content;
}

.button--fit-content-height {
  height: fit-content;
}

.button--fit-content-both {
  width: fit-content;
  height: fit-content;
}