/* CSS declarations go here */
normalize-css()

// Colors
black = #222
grey = #D8D8D8
purp = #524763
dark-purp = #373142
red = #E54B4B
teal = #82D8D8
dark-teal = #66A6A6
green = #CBE56C
blue = #16528E
bright-blue = #0082C8
maroon = #6A2140
light-red = #CA5765
pink = #CF256D
orange = #E8846B

// cisco brand Colors
brand-blue = #2196F3
spark-blue = #0A9AD7
spark-green = #73BE46
spark-grey = #D1D2D1
dk-blue = #303f9f
light-grey = #efefef
dk-gray1 = #58585b
// cisco brand status Colors
status-blue = #64bbe3
status-turq = #14a792
status-green = #6cc04a
status-yellow = #ffcc00
status-orange = #ff7300
status-red = #cf2030
// cisco accepteble colors

// Material Shadows
shadow-level(l = 1)
    if l == -1
        box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
    if l == 0
        box-shadow: none;
    if l == 1
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    if l == 2
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    if l == 3
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    if l == 4
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    if l == 5
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

// Common Transition
trans($sec = 0.3s)
    transition: all $sec ease

// Grid
$xsmall = 340px
$small = 500px
$med = 700px
$large = 960px
$wide = 1200px

z = {
    neg: -7,
    lowest: 1,
    low: 4,
    mid: 5,
    video: 6,
    header: 7,
    nav: 8,
    mini: 9,
    modal: 10,
    highest: 11
}

$side-nav = 100px
$side-nav-large = 200px

body{
    background light-grey
}

@import 'css/*'