form button,
form input[type="submit"],
button.button,
input.button,
a.button {
  border-radius: $ds-form-input-border-radius;
  border: $ds-form-input-border-width solid $ds-form-input-border-color;
  padding: 0 $ds-form-input-padding 0 $ds-form-input-padding;
  transition: all 0.1s ease-in-out;
  caret-color: $ds-form-input-border-color-active;
  min-height: $ds-form-input-height;
  font-size: 1rem;

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

  @each $color-name, $hex in $ds-color-palette {
    &.#{$color-name}-background {
      background-color: $hex;
      border-color: darken($hex, 10%);
    }
  }

  &.rounded {
    width: $ds-form-input-rounded;
    height: $ds-form-input-rounded;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 3px #999;
    border: none;
  }

  &:hover {
    text-decoration: none;
  }
}

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

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