.button {
  align-items: center;
  background: var(--button-bg, var(--color-surface-bg));
  border-color: var(--button-border-color, var(--color-mid));
  border-radius: var(--button-radius, var(--radius));
  border-style: var(--button-border-style, solid);
  border-width: var(--button-border-width, var(--stroke-weight-heavy));
  box-shadow: var(--button-box-shadow, none);
  color: var(--button-text, var(--color-surface-text));
  cursor: pointer;
  display: inline-flex;
  font-family: var(--button-font-family, inherit);
  font-size: var(--button-font-size, var(--size-step--1));
  font-weight: var(--button-font-weight, var(--font-weight-emphasis));
  gap: var(--button-gap, var(--gutter));
  justify-content: center;
  letter-spacing: var(--button-kerning, var(--kerning-loose));
  line-height: var(--button-leading, var(--leading-fine));
  padding: var(--button-padding, var(--space-2xs, .8em) var(--space-m, 2em));
  text-decoration: none;
  text-transform: var(--button-text-transform, none);
  text-box: trim-both cap alphabetic;
  width: var(--button-width, 100%);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

  &[data-button-variant='primary'] {
    --button-bg: var(--color-primary);
    --button-border-color: var(--color-primary);
    --button-text: var(--color-light);
    --button-width: 100%;
    /* hover values */
    --button-bg-hover: var(--color-primary-dark);
    --button-border-color-hover: var(--color-dark);
    --button-text-hover: var(--color-light);
  }

  &[data-button-variant='secondary'] {
    --button-bg: var(--color-secondary);
    --button-border-color: var(--color-secondary);
    --button-text: var(--color-light);
    --button-width: 100%;
    /* hover values */
    --button-bg-hover: var(--color-secondary-dark, var(--color-secondary));
    --button-border-color-hover: var(--color-secondary-dark, var(--color-secondary));
    --button-text-hover: var(--color-light);
  }

  &[data-button-variant='tertiary'] {
    --button-bg: var(--color-tertiary);
    --button-border-color: var(--color-tertiary);
    --button-text: var(--color-light);
    --button-width: 100%;

    /* hover values */
    --button-bg-hover: var(--color-tertiary-dark, var(--color-tertiary));
    --button-border-color-hover: var(--color-tertiary-dark, var(--color-tertiary));
    --button-text-hover: var(--color-light);
  }

  &:hover{
    --button-bg: var(--button-bg-hover, var(--color-primary-dark));
    --button-border-color: var(--button-border-color-hover, var(--color-primary-dark));
    --button-text: var(--button-text-hover, var(--color-light));
  }
}