$button-colour: $petitions-brand;
$button-text-colour: $white;
$button-hover-colour: shade($button-colour, 20%);
$button-shadow-colour: shade($button-colour, 60%);
$secondary-button-colour: $grey-3;
$secondary-button-text-colour: $text-colour;
$secondary-button-hover-colour: shade($secondary-button-colour, 20%);
$secondary-button-shadow-colour: shade($secondary-button-colour, 60%);
$border-width-form-element: 2px;
$button-shadow-size: 2px;

.button {
  @include bold-24;

  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  @include responsive-margin(6, "bottom", $adjustment: $button-shadow-size);
  padding: (spacing(2) - $border-width-form-element) spacing(2) (spacing(2) - $border-width-form-element - ($button-shadow-size / 2));
  border: $border-width-form-element solid transparent;
  border-radius: 0;
  color: $button-text-colour;
  background-color: $button-colour;
  box-shadow: 0 $button-shadow-size 0 $button-shadow-colour;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  -webkit-appearance: none;

  @include media(tablet) {
    width: auto;
  }

  &:link,
  &:visited,
  &:active,
  &:hover {
    color: $button-text-colour;
    text-decoration: none;
  }

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &:hover {
    background-color: $button-hover-colour;
  }

  &:active {
    top: $button-shadow-size;
  }

  &:focus {
    border-color: $focus-colour;
    outline: $focus-width solid transparent;
    box-shadow: inset 0 0 0 1px $focus-colour;
  }

  &:focus:not(:active):not(:hover) {
    border-color: $focus-colour;
    color: $focus-text-colour;
    background-color: $focus-colour;
    box-shadow: 0 2px 0 $focus-text-colour;
  }

  &::before {
    content: "";
    display: block;

    position: absolute;

    top: -$border-width-form-element;
    right: -$border-width-form-element;
    bottom: -($border-width-form-element + $button-shadow-size);
    left: -$border-width-form-element;

    background: transparent;
  }

  &:active::before {
    top: -($border-width-form-element + $button-shadow-size);
  }
}

.button[disabled] {
  opacity: (0.5);

  &:hover {
    background-color: $button-colour;
    cursor: not-allowed;
  }

  &:active {
    top: 0;
    box-shadow: 0 $button-shadow-size 0 $button-shadow-colour; // s0
  }
}

.button-secondary {
  background-color: $secondary-button-colour;
  box-shadow: 0 $button-shadow-size 0 $secondary-button-shadow-colour;

  &,
  &:link,
  &:visited,
  &:active,
  &:hover {
    color: $secondary-button-text-colour;
  }

  &:hover {
    background-color: $secondary-button-hover-colour;

    &[disabled] {
      background-color: $secondary-button-colour;
    }
  }
}
