//
// Color system
//

$color0:             ;
$color0-trans1:      rgba(,.8);
$color0-trans2:      rgba(,.5);
$color0-trans2:      rgba(,.2);

$color1:             #000000;
$color1-trans1:      rgba(0,0,0,.8);
$color1-trans2:      rgba(0,0,0,.5);
$color1-trans2:      rgba(0,0,0,.2);

$color2:             #E6007E;
$color2-trans1:      rgba(230,0,126,.8);
$color2-trans2:      rgba(230,0,126,.5);
$color2-trans2:      rgba(230,0,126,.2);

$color4:             #009FE3;
$color4-trans1:      rgba(0,159,227,.8);
$color4-trans2:      rgba(0,159,227,.5);
$color4-trans2:      rgba(0,159,227,.2);

$color5:             #FFED00;
$color5-trans1:      rgba(255,237,0,.8);
$color5-trans2:      rgba(255,237,0,.5);
$color5-trans2:      rgba(255,237,0,.2);

$color6:             #e0e0e0;
$color6-trans1:      rgba(224,224,224,.8);
$color6-trans2:      rgba(224,224,224,.5);
$color6-trans2:      rgba(224,224,224,.2);

$color7:             #ffffff;
$color7-trans1:      rgba(255,255,255,.8);
$color7-trans2:      rgba(255,255,255,.5);
$color7-trans2:      rgba(255,255,255,.2);


//
// Class to id assignment
//

$none:             $color0;
$black:             $color1;
$magenta:             $color2;
$blue:             $color4;
$yellow:             $color5;
$lightgrey:             $color6;
$white:             $color7;

//
// Copy&paste colors for _styleguide.scss
//

&.color-0 {
    background-color: $none;
}

&.color-1 {
    background-color: $black;
}

&.color-2 {
    background-color: $magenta;
}

&.color-4 {
    background-color: $blue;
}

&.color-5 {
    background-color: $yellow;
}

&.color-6 {
    background-color: $lightgrey;
}

&.color-7 {
    background-color: $white;
}