button,
[role="button"],
input[type="submit"] {
  background-color: var(--button--bg-color);
  border:
    var(--button--border--width, 0)
    var(--button--border--style, solid)
    var(--button--border--color);
  border-radius: var(--button--border-radius, 0);
  color: var(--button--color);
  cursor: pointer;
  display: var(--button--display, inline-block);
  font-family: var(--button--font-family);
  font-size: var(--button--font-size);
  font-weight: var(--button--font-weight);
  line-height: var(--button--line-height);
  margin: var(--button--margin, 0);
  padding: var(--button--padding, 0);
  text-align: var(--button--text-align);
  text-transform: var(--button--text-transform);
  transition: var(--button--transition, all 200ms ease-in-out);
  width: var(--button--width);
  outline:
    var(--button--outline--width, 0)
    var(--button--outline--style, dashed)
    var(--button--outline--color, currentColor);
  outline-offset: 4px;

  &:focus-visible {
    --button--outline-width: 4px;
  }

  &:hover,
  &:focus {
    background-color: var(--button--bg-color--active, var(--button--bg-color));
    color: var(--button--color--active, var(--button--color, currentColor));
  }
}
