button,
input[type='submit'] {
  background-color: var(--button-background);
  box-shadow: 0 1px 1px rgba(5, 5, 5, 0.04);
  color: var(--text-color);
  font-size: var(--font-size);

  padding: var(--spacing-half) var(--spacing);

  border: 1px solid var(--box-border-color);
  border-radius: var(--border-radius);

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

  &:active {
    box-shadow: inset 0 0 1px rgba(5, 5, 5, 0.15);
  }
}

button,
input[type='submit'] {
  background-color: var(--button-background);
  box-shadow: 0 1px 1px rgba(5, 5, 5, 0.04);
  color: var(--text-color);
  font-size: var(--font-size);

  padding: var(--spacing-half) var(--spacing);

  border: 1px solid var(--box-border-color);
  border-radius: var(--border-radius);

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

  &:active {
    box-shadow: inset 0 0 1px rgba(5, 5, 5, 0.15);
  }

  &:focus {
    outline: none;
    border-color: var(--focus-color);
  }
}

Use border color for button focus state
Use border color for button focus state
