//Color Mixin
@mixin color($name, $color) {
  .#{$name} {
    color: $color;
    &:hover { color: $color; }
  }
}

//Background Mixin
@mixin bg-color($name, $color) {
  .bg-#{$name} {
    background: $color;
  }
}

// Primary
$iris: #10ADE4;
$mariner: #3558A8;
$bali-hai: #799EB2;
$regal-blue: #153A62;
$bc-blue: #004a7c;
$light-blue: #B2D5E5;
$blue: $bc-blue;
$primary: $iris;

// Secondary
$spray: #84D0D3;
$rosebud: #F9B0A1;
$moccasin: #FFE6B4;
$dandelion: #FFCF62;
$iris-green: #00BABC;
$bittersweet: #F26C57;

// Product
$jade: #00A76F;
$mahogany: #CA3A3C;

// Greys
$grey: #F5F7F9;
$text: #5f5f5f;
$black: #4B4D4E;
$border-grey: #DDD;
$mid-grey: #b0b0b0;
$basic-grey: #757575;
$grey-transparent: rgba(245, 247, 249, 0.9);

// Transaction Colors
$sent: $bittersweet;
$received: $iris-green;
$transferred: $bali-hai;

// Alerts
$success: $jade;

//Security Badge Colors
$security-red: $mahogany;
$security-green: $jade;
$security-yellow: $dandelion;
$bright-green:  $jade !important; //override Security Center nested css selectors

@include color('blue', $blue);
@include color('white', white);
@include color('black', $black);
@include color('grey', $grey);
@include color('mid-grey', $mid-grey);
@include color('basic-grey', $basic-grey);
@include color('border-grey', $border-grey);
@include color('security-red', $security-red);
@include color('security-yellow', $security-yellow);
@include color('security-green', $security-green);
@include color('bright-green', $jade);
@include color('success', $success);
@include color('success', $jade);
@include color('text-color', $text);
@include color('state-danger-text', $security-red);
@include color('medium-blue', $bali-hai);
@include color('transferred', $bali-hai);
@include color('received', $iris-green);
@include color('transfer', $bali-hai);
@include color('sent', $bittersweet);

@include bg-color('transferred', $bali-hai);
@include bg-color('received', $iris-green);
@include bg-color('sent', $bittersweet);
@include bg-color('red', $mahogany);
@include bg-color('grey', $grey);
@include bg-color('blue', $blue);
@include bg-color('black', $black);
@include bg-color('light-blue', $light-blue);
@include bg-color('mid-grey', $mid-grey);
@include bg-color('success', $jade);
