:root {
  --font-family: var(--font-family-body, sans-serif);
  --font-size: var(--font-size-body, 16px);
  --button-color: var(--color-primary-700, #1976d2);
  --button-background: transparent;
  --button-background-hover: var(--color-primary-50, #e3f2fd);
  --button-background-active: var(--color-primary-100, #bbdefb);
  --button-border-focus: var(--color-primary-700, #1976d2);
}

button {
  font-family: var(--font-family);
  background-color: var(--button-background);
  color: var(--button-color);
  font-size: var(--font-size);
  position: relative;
  border: 0;
  padding: 0 1em;
  line-height: 2.5em;
  border-radius: 4px;
  cursor: pointer;
  outline: 0;
}

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

button:active {
  background-color: var(--button-background-active);
}

button:focus {
  box-shadow: 0 0 0 2px var(--button-border-focus);
}