/*  ==========================================================================
    THEMING (BACKGROUNDS, BORDERS, SHADOWS, ICONS)
    ========================================================================== */


/*
    Background Colors
    ==================================== */

/*
    Default colors
*/
.bg-w                       { background-color: $color-white; }
.bg-b                       { background-color: $color-black; }
.bg-error                   { background-color: $color-error; }
.bg-succes                  { background-color: $color-success; }
.bg-default                 { background-color: $color-default; }

/*
    Site colors
*/
.bg-dark                    { background-color: $color-dark; }
.bg-meta                    { background-color: $color-meta; }
.bg-info                    { background-color: $color-info; }
.bg-note                    { background-color: $color-note; }
.bg-light                   { background-color: $color-light; }
.bg-dist                    { background-color: $color-dist; }

/*
    Brand colors
*/
.bg-brand-alpha             { background-color: $color-brand-alpha; }
.bg-brand-beta              { background-color: $color-brand-beta; }
.bg-brand-gamma             { background-color: $color-brand-gamma; }
.bg-brand-delta             { background-color: $color-brand-delta; }
.bg-brand-epsilon           { background-color: $color-brand-epsilon; }
// .bg-brand-zeta              { background-color: $color-brand-zeta; }


/*
    Site sections
*/
html, body                  { background: $color-note; }


/*
    Borders
    ==================================== */
.brd-t-brand-alpha          { border-top: 1px solid $color-brand-beta; }


/*
    Shadows
    ==================================== */
    

/*
    Icons
    ==================================== */

/*.Icon, [class^="Icon--"], [class*=" Icon--"] {
    position: absolute; top: -13px; left: 0px;
    width: 50px; display: inline-block;
    font-family: $font-family-icons; text-align: center; @include rem('font-size', 50px); @include rem('line-height', 50px);
}
    .Icon--s
    {  
        top: -5px;
        @include rem('font-size', 40px); @include rem('line-height', 40px);
    }
    .Icon--xs
    {  
        @include rem('font-size', 30px); @include rem('line-height', 30px);
    }*/
