// Blue button
@import "colors";

// Button Colors //================================
$button-color-disabled:            #888;

$button-color-simple:              $text-color;
$button-color-simple-active:       #b9b9b9;

$button-color-blue:                #55acee;
$button-color-blue-active:         #4b82b7;

$button-color-green:               #2ecc71;
$button-color-green-active:        #21a057;

$button-color-red:                 #e74c3c;
$button-color-red-active:          #bd382a;

$button-color-orange:              #e67e22;
$button-color-orange-active:       #c16819;

@include button-mixin('.blue') {
  border: 2px $button-color-blue solid;
  color: $button-color-blue;
}

// Blue button's hover
@include button-mixin('.blue:hover') {
  background-color: $button-color-blue;
  border-color: $button-color-blue;
  color: $meshki-black;
}

// Blue button's active
@include button-mixin('.blue:active') {
  background-color: $button-color-blue-active;
  border-color: $button-color-blue-active;
  color: $meshki-black;
}

// Green button
@include button-mixin('.green') {
  border: 2px $button-color-green solid;
  color: $button-color-green;
}

// Green button's hover
@include button-mixin('.green:hover') {
  background-color: $button-color-green;
  border-color: $button-color-green;
  color: $meshki-black;
}

// Green button's active
@include button-mixin('.green:active') {
  background-color: $button-color-green-active;
  border-color: $button-color-green-active;
  color: $meshki-black;
}

// Red button
@include button-mixin('.red') {
  border: 2px $button-color-red solid;
  color: $button-color-red;
}

// Red button's hover
@include button-mixin('.red:hover') {
  background-color: $button-color-red;
  border-color: $button-color-red;
  color: $meshki-black;
}

// Red button's active
@include button-mixin('.red:active') {
  background-color: $button-color-red-active;
  border-color: $button-color-red-active;
  color: $meshki-black;
}

// Orange button
@include button-mixin('.orange') {
  border: 2px $button-color-orange solid;
  color: $button-color-orange;
}

// Orange button's hover
@include button-mixin('.orange:hover') {
  background-color: $button-color-orange;
  border-color: $button-color-orange;
  color: $meshki-black;
}

// Orange button's active
@include button-mixin('.orange:active') {
  background-color: $button-color-orange-active;
  border-color: $button-color-orange-active;
  color: $meshki-black;
}
