button,
[role="button"],
input[type="submit"] {
  background-color: var(--button-background-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: var(--button-cursor, pointer);
  display: var(--button-display, var(--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, 1);
  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, var(--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: var(--button-outline-offset, 4px);

  &:focus {
    [data-whatintent="keyboard"] & {
      --button-outline-width: 4px;
    }
  }

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