normalize-css()

// 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

// Colors
black = #222
grey = #D8D8D8
light-grey = #EEE
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

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

social = {
    twitter: #00aced,
    facebook: #3b5998,
    google: #dd4b39,
    youtube: #bb0000
}

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

html
    box-sizing: border-box

*, *:before, *:after
    box-sizing: inherit

body
    background light-grey
    padding: 70px 0 150px

header
    color #FFF 
    background: purp
    padding 20px 
    fixed top left
    width 100%
    height 70px  
    z-index: z.header
    shadow-level(2)
    clearfix()
    h1 
        margin 0
        font-size 1.6em 
        float left
    .login-buttons-dropdown-align-
        float right
        a
            color #FFF
            text-decoration none 

p
    color #333 

.page-title
    text-transform uppercase
    text-align center
    margin-bottom 30px 

.billboard
    background dark-purp
    color #FFF
    font-size 2em
    text-align center
    padding 60px 
    h2
        margin 0

.main-layout
    lost-center 90%
    margin-top 20px 
    +above($med)
        lost-center 90%
        padding-left $side-nav
    +above($large)
        lost-center 80%
        margin-top 40px
        padding-left $side-nav-large
    
.new-recipe
    margin-bottom 20px 

.new-recipe-container
    position relative
    background #FFF
    padding 20px 
    margin-bottom 20px 
    shadow-level(2) 
    .fa-close
        position absolute
        top 0
        right 0
        padding 20px   
    label
        display block
        margin-bottom 10px 
    textarea, input
        width 100% 

.btn, button
    display inline-block
    cursor pointer
    background purp
    color #FFF
    text-decoration none
    text-transform uppercase
    padding 5px 15px
    border solid 3px purp
    border-radius 2px
    font-weight 800
    shadow-level(1)
    trans()
    &:hover
        background @background - 20
        border-color @background
        shadow-level(2)
    &.btn-primary
        background teal
        border-color teal
        color dark-purp
        &:hover
            background @background - 40
            border-color @background
    &.btn-deny
        background red
        border solid 3px @background
        &:hover
            background @background - 20
            border-color @background
    &.btn-text
        color purp
        background transparent
        border solid 2px purp
        shadow-level(0)
        &:hover
            background teal
            border-color @background
            shadow-level(1)
    &.btn-text-dark
        color #FFF
        background transparent
        border solid 2px #FFF
        shadow-level(0)
        &:hover
            background #FFF
            color dark-purp 
            border-color @background
            shadow-level(1)
    &.btn-confirmation
        color black
        background green
        border solid 2px @background
        &:hover
            background @background - 20
            border-color dark-purp
    &.btn-cancel
        color #FFF
        background transparent
        border solid 2px #FFF 
        opacity 0.4
        shadow-level(-1)
        &:hover
            background red
            color #FFF
            opacity 1
            shadow-level(2)
            border-color @background

input, select, textarea
    color purp
    background #FFF
    border solid 2px light-grey
    border-radius 2px
    font-weight 800
    width 100% 
    padding 6px 10px
    margin-bottom 10px  
    &.static-input
        border none
        background transparent

.list-group
    list-style none
    padding 0
    
.panel-body
    .form-group
        lost-column 1/2 
        
.autoform-remove-item.btn
    background light-grey
    box-shadow none
    border none
    border-radius 50%
    font-size 1em
    height: 25px
    width: 25px
    text-align: center
    display: block
    padding: 0

.autoform-add-item.btn
    width 100%
    border-radius 0
    border none
    box-shadow none
    background light-grey
     

.autoform-remove-item-wrap
    vertical-align middle 

.side-nav
    fixed bottom left
    height 100px
    width 100%
    overflow hidden 
    background dark-purp
    color #FFF
    z-index: z.header
    shadow-level(2)
    ul
        margin 0
        padding 0
        display flex
        justify-content space-between 
        list-style none
    a
        color #FFF
        text-decoration none
        padding 20px 20px
        display block
        text-align center
        trans()
        &:hover, &.active
            background purp 
    i
        display block
        font-size 2em
        margin-bottom 10px 
    +above($med)
        height 100%
        z-index: z.mid
        padding 120px 0
        fixed top left
        width $side-nav
        ul 
            display block
        shadow-level(-1)
        a
            padding 20px 10px
            &:hover, &.active
                border-left 4px solid teal
    +above($large)
        width $side-nav-large
        a
            padding 20px 20px
            &:hover, &.active
                border-left 10px solid teal

.recipe
    background #FFF 
    padding 0 20px 20px
    margin-bottom 20px
    position relative 
    z-index 1
    shadow-level(1)
    trans()
    .remove-from-menu
        display none
    &.in-menu
        background teal
        color #FFF
        h3
            border-bottom: rgba(255,255,255, 0.6) solid 3px
        .add-to-menu
            display none
        .remove-from-menu  
            display block
    h3
        font-size: 3em;
        opacity: 0.3;
        border-bottom: rgba(0,0,0, 0.3) solid 3px
        margin-top 0
        margin-bottom 10px 
    button
        margin-top 20px 
    .fa-trash
        opacity 0.3
        cursor pointer
        position absolute
        top 0
        right 0
        font-size 1.6em  
        display block
        padding 20px 
        color black
        trans()
        &:hover
            color red 
            opacity 0.6
    .ingredient
        display inline-block
        margin-right 10px 
        font-size 1.2em 
    &:hover 
        shadow-level(3)
        // animation card 0.6s ease 1 forwards

@keyframes card
    0%
        transform translate3d(0, 0, 0)
    50%
        transform translate3d(0, -135px, 0)
    51%
        z-index 10
        transform translate3d(0, -135px, 0)
    100%
        z-index 10
        transform translate3d(0, 0, 0)

            
.menu-item
    @extend .recipe
    
.shopping-list
    @extend .recipe
    padding 50px 5%
    list-style none
    li
        font-size 2em 
        padding 20px
        border-bottom 1px solid light-grey
        border-top 1px solid light-grey
        & + li 
            border-top none

.login-buttons-dropdown-align-
    #login-dropdown-list
        right 0
        left auto 
        a 
            color dark-purp