form button,
form input[type="submit"],
button.button,
input.button,
a.button {
  border-radius: $form-input-border-radius;
  border: none;
  padding: $form-input-padding;
  transition: all 0.1s ease-in-out;
  height: $form-input-height;
  background: $button-background;
  color: contrast-color($button-background);
  text-decoration: none;

  &.full-width {
    width: 100%;
  }

  @each $color-name, $hex in $color-palette {
    &.#{$color-name}-background {
      background-color: $hex;
      border: none;
      color: contrast-color($hex);
    }
  }

  &.rounded {
    border-radius: 50%;
  }

  &.circle {
    width: $form-input-height;
    border-radius: 50%;
  }
}

a.button {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover, &:active, &:visited {
    color: inherit;
  }
}