/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT License
 *
 * Variables.less
 */

// Units
@unit: 20px;
@subunit: 5px;

// Color vars
@white:                 #ffffff;
@black:                 #000000;
@blue:                  #2d89ef;
@blueLight:             #EFF4FF;
@blueDark:              #2B5797;
@green:                 #00a300;
@greenLight:            #99b433;
@greenDark:             #1E7145;
@red:                   #b91d47;
@yellow:                #ffc40d;
@orange:                #e3a21a;
@orangeDark:            #da532c;
@pinkDark:              #7E3878;
@pink:                  #9f00a7;
@purple:                #603cba;
@darken:                #1d1d1d;
@lighten:               #d5e7ec;
@grayDark:              #525252;


// Foregraund colors classes
.fg-color-blue {color: @blue !important;}
.fg-color-blueLight {color: @blueLight !important;}
.fg-color-blueDark {color: @blueDark !important;}
.fg-color-green {color: @green !important;}
.fg-color-greenLight {color: @greenLight !important;}
.fg-color-greenDark {color: @greenDark !important;}
.fg-color-red {color: @red !important;}
.fg-color-yellow {color: @yellow !important;}
.fg-color-orange {color: @orange !important;}
.fg-color-orangeDark {color: @orangeDark !important;}
.fg-color-pink {color: @pink !important;}
.fg-color-pinkDark {color: @pinkDark !important;}
.fg-color-purple {color: @purple !important;}
.fg-color-darken {color: @darken !important;}
.fg-color-lighten {color: @lighten !important;}
.fg-color-white {color: @white !important;}
.fg-color-grayDark {color: @grayDark !important;}

// Background colors classes
.bg-color-blue {background-color: @blue !important;}
.bg-color-blueLight {background-color: @blueLight !important;}
.bg-color-blueDark {background-color: @blueDark !important;}
.bg-color-green {background-color: @green !important;}
.bg-color-greenLight {background-color: @greenLight !important;}
.bg-color-greenDark {background-color: @greenDark !important;}
.bg-color-red {background-color: @red !important;}
.bg-color-yellow {background-color: @yellow !important;}
.bg-color-orange {background-color: @orange !important;}
.bg-color-orangeDark {background-color: @orangeDark !important;}
.bg-color-pink {background-color: @pink !important;}
.bg-color-pinkDark {background-color: @pinkDark !important;}
.bg-color-purple {background-color: @purple !important;}
.bg-color-darken {background-color: @darken !important;}
.bg-color-lighten {background-color: @lighten !important;}
.bg-color-white {background-color: @white !important;}
.bg-color-grayDark {background-color: @grayDark !important;}

// Border colors classes

[class*=border-color]{
    border: 2px solid;
}

.border-color-blue {border-color: @blue !important;}
.border-color-blueLight {border-color: @blueLight !important;}
.border-color-blueDark {border-color: @blueDark !important;}
.border-color-green {border-color: @green !important;}
.border-color-greenLight {border-color: @greenLight !important;}
.border-color-greenDark {border-color: @greenDark !important;}
.border-color-red {border-color: @red !important;}
.border-color-yellow {border-color: @yellow !important;}
.border-color-orange {border-color: @orange !important;}
.border-color-orangeDark {border-color: @orangeDark !important;}
.border-color-pink {border-color: @pink !important;}
.border-color-pinkDark {border-color: @pinkDark !important;}
.border-color-purple {border-color: @purple !important;}
.border-color-darken {border-color: @darken !important;}
.border-color-lighten {border-color: @lighten !important;}
.border-color-white {border-color: @white !important;}
.border-color-grayDark {border-color: @grayDark !important;}

*:hover[class=outline-color] {
    outline: 3px solid;
}
.outline-color-blue {outline-color: @blue !important;}
.outline-color-blueLight {outline-color: @blueLight !important;}
.outline-color-blueDark {outline-color: @blueDark !important;}
.outline-color-green {outline-color: @green !important;}
.outline-color-greenLight {outline-color: @greenLight !important;}
.outline-color-greenDark {outline-color: @greenDark !important;}
.outline-color-red {outline-color: @red !important;}
.outline-color-yellow {outline-color: @yellow !important;}
.outline-color-orange {outline-color: @orange !important;}
.outline-color-orangeDark {outline-color: @orangeDark !important;}
.outline-color-pink {outline-color: @pink !important;}
.outline-color-pinkDark {outline-color: @pinkDark !important;}
.outline-color-purple {outline-color: @purple !important;}
.outline-color-darken {outline-color: @darken !important;}
.outline-color-lighten {outline-color: @lighten !important;}
.outline-color-white {outline-color: @white !important;}
.outline-color-grayDark {outline-color: @grayDark !important;}