hummingbird-me/kitsu-web

.button {
  @extend .btn;
  font-family: $heading-font-family;
  letter-spacing: .05em;
  transition: all .2s ease;
}

.user-cover .button {
  &:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.80);
  }
}

.button--primary {
  background-color: $primary-cta-color;
  color: $white;
  padding: 10px 60px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
  &:hover {
    background: lighten($primary-cta-color, 5);
    color: $white;
  }
  &:disabled {
    background: $secondary-cta-color;
    opacity: 1;
  }
  &.inactive {
    background: $secondary-cta-color;
    color: $body-tertiary-text-color;
    &:hover {
      background: lighten($secondary-cta-color, 5);
    }
  }
}

.button--secondary {
  background-color: $secondary-cta-color;
  color: $white;
  padding: 10px 60px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
  &:hover {
    background: lighten($secondary-cta-color, 5);
  }
}

.btn-secondary {
  border: darken($background-color,5);
}

.button--light-outline {
  background-color: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.60);
  padding: 10px 60px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
  &:hover {
    @if $theme == 'kitsu-light' {
      color: $body-text-color;
      background: darken($white, 5);
    }
    @if $theme == 'kitsu-dark' {
        color: darken($body-text-color, 20);
        background: $white;
    }
  }
}

.button--dark-outline {
  background-color: transparent;
  border: 1px solid $divider-color;
  color: $body-text-color;
  padding: 10px 60px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
  &:hover {
    color: $body-text-color;
    border: 1px solid $divider-color;
    background: darken($white, 2);
  }
}

.button--small {
  font-size: 12px;
  padding: 10px 20px;
}

.button--save-edit {
  float: right;
  margin-left: 20px;
  font-size: 12px;
  padding: 10px 15px;
}

.button--twitter {
  background-color: #55acee;
}

.button--facebook {
  background-color: #3b5998;
  color: #fff;
  fill: #fff;
  display: inline-flex;
  align-items: center;
  svg {
    margin-right: 10px;
  }
}