.button {
  background-color: theme-color("charcoal");
  color: color("white");
  border: none;
  border-bottom: $link-border-bottom;
  border-bottom-color: theme-color("charcoal");
  padding: $link-primary-padding;
  margin: $link-primary-padding 0;
  display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  border-radius: 0;

  &:hover,
  &:focus {
    padding-bottom: 4 + ($link-primary-padding - $link-border-bottom-width);
    background-color: theme-color("red");
    color: color("white");
    cursor: pointer;
    outline: 0;
  }

  &[type="submit"] {
    margin-bottom: 0;

    @include tablet {
      margin-bottom: $submit-button-margin-bottom;
    }
  }

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

.blue-theme,
.purple-theme,
.red-theme,
.green-theme,
.yellow-theme,
.pink-theme {
  .button {
    color: theme-color("charcoal");

    &:hover, &:focus {
      background-color: theme-color("charcoal");
      color: color("white");
    }
  }
}

.red-theme {
  .button {
    background-color: theme-color("red");
    color: color("white");
  }
}

.yellow-theme {
  .button {
    background-color: theme-color("yellow");
  }
}

.green-theme {
  .button {
    background-color: theme-color("green");
  }
}

.blue-theme {
  .button {
    background-color: theme-color("blue");
    color: color("white")
  }
}

.purple-theme {
  .button {
    background-color: theme-color("purple");
    color: color("white");
  }
}

.pink-theme {
  .button {
    background-color: theme-color("pink");
  }
}