loomio/loomio

%btn--base {
  border-radius: 4px;
  padding: 1rem 1rem*2;
  border: 1px solid #bbb;
  color: $font-color;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  background: transparent;
}

.btn {
  @extend %btn--base;
}

.btn--blue {
  @extend %btn--base;

  border-color: darken($blue, 3%);
  background-color: $blue;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: darken($blue, 10%);
  }
}

.btn--primary {
  @extend %btn--base;

  border-color: transparent;
  background-color: $primary-color;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    opacity: 0.9;
  }
}

.btn--accent--raised {
  @extend %btn--base;

  border-color: darken($accent-color, 5%);
  background-color: $accent-color;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: lighten($accent-color, 5%);
    border-color: $accent-color;
  }
}