///////////////////////////////////////////////////////////////////////////////
// SASS Elevations
// 2019-02-26
//
// PostNord
///////////////////////////////////////////////////////////////////////////////


@mixin pn-elevation-01 {
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 6px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 6px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 6px 0;
}
@mixin pn-elevation-02 {
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 3px 10px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 3px 10px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 3px 10px 0;
}
@mixin pn-elevation-03 {
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 5px 16px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 5px 16px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 5px 16px 0;
}
@mixin pn-elevation-04 {
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 12px 32px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 12px 32px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 12px 32px 0;
}
@mixin pn-elevation-05 {
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 16px 48px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 16px 48px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 16px 48px 0;
}


// Also possible to add as class on an element

.pn-elevation-01 {
    @include pn-elevation-01
}
.pn-elevation-02 {
    @include pn-elevation-02
}
.pn-elevation-03 {
    @include pn-elevation-03
}
.pn-elevation-04 {
    @include pn-elevation-04
}
.pn-elevation-05 {
    @include pn-elevation-05
}