Button Styles

button_styles.scss

/******************************
        PRIMARY BUTTONS
******************************/

/*-------------------------------
  SOLID BUTTON 
-------------------------------*/
.button_primary_solid {
  @include rect_button_base();
  background-color: $color-interaction-primary;
  border: solid 2px $color-interaction-primary;
  color: $color-text-reverse;

  &:hover:enabled {
    background-color: $color-interaction-primary-hover;
    border: solid 2px $color-interaction-primary-hover;
  }

  &_active,
  &:focus {
    border: solid 2px $color-interaction-primary-active;
    background-color: $color-interaction-primary-active;
  }

  &:disabled,
  &[disabled] {
    background-color: $color-interaction-primary-disabled;
    border: solid 2px $color-interaction-primary-disabled;
    color: $color-text-disabled;
  }
}

/*-------------------------------
  SIZES
-------------------------------*/

.small {
  padding: 6px 12px;
}

.medium {
  padding: 8px 16px;
}

.large {
  padding: 12px 18px;
}