_buttons.scss

@import '../base/color';
@import '../base/mixins';

button {
  span {
    font-size: 1rem;
    font-weight: 700;
  }

  &.btnPrimary {
    @include button($dark-light-2, transparent, $multi-color-radial-gradient) {
      background-color: darken($gold-shadow, 12%);
    }
  }

  &.btnSecondary {
    @include button($grey-bright, $grey-bright, transparent);
  }

  &.btnText {
    text-decoration: underline;
    span {
      text-transform: none;
      font-weight: 400;
    }
  }

  &.btnPrimaryNegative {
    @include button($dark-light-2, transparent, $blue-gradient);
    &:hover {
      opacity: 0.7;
    }
  }

  &.btnIncrement {
    @include button($white, transparent, $grey-linear-gradient-background);
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.55);
  }
}