.button {
  border: $border-width solid $primary;
  padding: $btn-padding-y $btn-padding-x;

  &:hover{
    background-color: $primary-700;
    border-color:$primary-700;
    color: $white;
  }

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

.button-primary {
  background-color: $primary;
  color: $white;
}

.button-secondary {
  background-color: $white;
  color: $primary;
}
