@import "../../styles/common";

.button {
  composes: PhasersButton from global;
  border-radius: $border-radius-2;
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
}

.primary {
  background: $blue;
  border: 1px solid $black-05;
  color: $white;
}

.secondary {
  background: $near-white;
  border: 1px solid $black-10;
  color: $near-black;
}

.success {
  background: $green;
  border: 1px solid $black-05;
  color: $white;
}

.danger {
  background: $dark-red;
  border: 1px solid $black-05;
  color: $white;
}

.link {
  background: none;
  border: 1px solid transparent;
  color: $blue;
}

.small {
  font-size: $font-size-6;
  padding: $spacing-extra-small $spacing-small;
}

.medium {
  padding: $spacing-small $spacing-medium;
}

.large {
  font-size: $font-size-4;
  padding: ($spacing-small + $spacing-extra-small) ($spacing-medium + $spacing-extra-small);
}