.button {
  --_button-padding-inline: var(--button-padding-inline, var(--spacing-md));
  --_button-height: var(--button-height, 3rem);
  --_button-gap: var(--button-gap, var(--spacing-xs));
  --_button-background-color: var(--button-background-color, transparent);
  --_button-background-color-hover: var(
    --button-background-color-hover,
    transparent
  );
  --_button-border-width: var(--button-border-width, 2px);
  --_button-border-color: var(--button-border-color, transparent);
  --_button-border-color-hover: var(--button-border-color-hover, transparent);
  --_button-color: var(--button-color, var(--color-text));
  --_button-color-hover: var(--button-color-hover, var(--color-text));
  --_button-font: var(--button-font, var(--typography-label-large));
  --_button-border-radius: var(--button-border-radius, var(--radius-xs));
  --_button-box-shadow: var(--button-box-shadow, var(--shadow-xs));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--_button-height);
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 250ms cubic-bezier(0.39, 0.58, 0.57, 1);
  text-decoration: none;
  color: var(--_button-color);
  border: var(--_button-border-width) solid var(--_button-border-color);
  border-radius: var(--_button-border-radius);
  background: var(--_button-background-color);
  box-shadow: var(--_button-box-shadow);
  font: var(--_button-font);
  font-weight: bold;
  padding-inline: var(--_button-padding-inline);
  gap: var(--_button-gap);

  &:focus,
  &:hover {
    color: var(--_button-color-hover);
    border-color: var(--_button-border-color-hover);
    background-color: var(--_button-background-color-hover);
  }

  &:focus {
    box-shadow: var(--focus-box-shadow);
  }
}

/* Contained variants. */
.button--variant--contained.button--color--primary {
  --button-background-color: var(--color-primary);
  --button-background-color-hover: var(--color-primary-dark);
  --button-color: var(--color-on-primary);
  --button-color-hover: var(--color-on-primary);
}

.button--variant--contained.button--color--secondary {
  --button-background-color: var(--color-secondary);
  --button-background-color-hover: var(--color-secondary-dark);
  --button-color: var(--color-on-secondary);
  --button-color-hover: var(--color-on-secondary);
}

.button--variant--contained.button--color--danger {
  --button-background-color: var(--color-error);
  --button-background-color-hover: var(--color-error-dark);
  --button-color: var(--color-on-error);
  --button-color-hover: var(--color-on-error);
}

/* Text variants. */
.button--variant--text.button--color--primary {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-primary);
  --button-color: var(--color-primary);
  --button-color-hover: var(--color-on-primary);
  --button-box-shadow: none;
}

.button--variant--text.button--color--secondary {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-secondary);
  --button-color: var(--color-secondary);
  --button-color-hover: var(--color-on-secondary);
  --button-box-shadow: none;
}

.button--variant--text.button--color--danger {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-error-container);
  --button-color: var(--color-error);
  --button-color-hover: var(--color-error);
  --button-box-shadow: none;
}

/* Outlined variants. */
.button--variant--outlined.button--color--primary {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-primary-container);
  --button-color: var(--color-primary);
  --button-color-hover: var(--color-primary);
  --button-border-color: var(--color-primary);
  --button-border-color-hover: var(--color-primary);
  --button-box-shadow: none;
}

.button--variant--outlined.button--color--secondary {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-secondary-container);
  --button-color: var(--color-secondary);
  --button-color-hover: var(--color-secondary);
  --button-border-color: var(--color-secondary);
  --button-border-color-hover: var(--color-secondary);
  --button-box-shadow: none;
}

.button--variant--outlined.button--color--danger {
  --button-background-color: transparent;
  --button-background-color-hover: var(--color-error-container);
  --button-color: var(--color-error);
  --button-color-hover: var(--color-error);
  --button-border-color: var(--color-error);
  --button-border-color-hover: var(--color-error);
  --button-box-shadow: none;
}

/* Sizes. */
.button--size--small {
  --button-height: 2rem;
  --button-font: var(--typography-label-small);
  --button-padding-inline: var(--spacing-sm);
}

.button--size--medium {
  --button-font: var(--typography-label-large);
}

.button--size--large {
  --button-height: 3.5rem;
  --button-font: var(--typography-body-large);
}

/* Disabled. */
.button[disabled] {
  cursor: not-allowed;
  opacity: 0.75;
  filter: grayscale(1);

  &:hover {
    --_button-color-hover: var(--_button-color);
    --_button-background-color-hover: var(--_button-background-color);
    --_button-border-color-hover: var(--_button-border-color);
  }
}