.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--color-primary {
  --hs-button-color: var(--hs-palette-primary-main);
  --hs-button-color-contrast: var(--hs-palette-primary-contrast);
  --hs-button-color-highlight: var(--hs-palette-primary-highlight);
  --hs-button-color-border: var(--hs-palette-primary-accent);
}

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

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

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

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

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

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

.button--variant-text {
  color: var(--hs-button-color-highlight);
}

.button--variant-outlined {
  color: var(--hs-button-color-highlight);
  border: 1px solid var(--hs-button-color-border);
  font-weight: 400;
}

.button--variant-outlined:hover {
  filter: opacity(50%);
}

.button--variant-contained {
  color: var(--hs-button-color-contrast);
  background: var(--hs-button-color);
}

.button-base:hover {
  filter: brightness(80%);
}

.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;
}