/// /// Solid State by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///

/* Wrapper */

/// Sets the colors of the wrapper's top/bottom edges.
/// @param {string} $color Color.
@mixin wrapper-edges-color($color: black) {
        &:before, &:after {
                background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,100 100,0 100,100" style="fill:#{$color};" /></svg>');
        }
}
#wrapper {
        > header {
                @include padding(7.5em, 0, (3.5em, 0, _size(wrapper-edges, large) * -0.5, 0));
                .inner {
                        margin: 0 auto;
                        width: _size(inner);
                }
                h2 {
                        border-bottom: solid 2px _palette(border);
                        font-size: 2em;
                        margin-bottom: _size(element-margin) * 0.4;
                        padding-bottom: _size(element-margin) * 0.2;
                }
                p {
                        font-family: _font(family-heading);
                        font-size: 1em;
                        font-weight: _font(weight-heading);
                        letter-spacing: _font(kern-heading);
                        line-height: 2;
                        text-transform: uppercase;
                }
        }
        @include breakpoint(large) {
                > header {
                        @include padding(5em, 0, (4em, 0, _size(wrapper-edges, large) * 0.5, 0));
                        background-color:               _palette(bg);
                        background-image:               linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)),
                                                                        url('../../images/bg.jpg');
                        background-size:                auto,
                                                                        cover;
                        background-position:    center,
                                                                        0% 30%;
                        margin-bottom: (_size(wrapper-edges, large) * -1);
                }
        }
        @include breakpoint(medium) {
                > header {
                        @include padding(7em, 3em, (4em, 0, _size(wrapper-edges, medium) * 0.5, 0));
                        background-size:                auto,
                                                                        cover;
                        background-position:    center,
                                                                        0% 0%;
                        margin-bottom: (_size(wrapper-edges, medium) * -1);
                        .inner {
                                width: 100%;
                        }
                }
        }
        @include breakpoint(small) {
                > header {
                        @include padding(3.75em, 2em, (2.75em, 0, _size(wrapper-edges, small) * 0.5, 0));
                        background-size:                auto,
                                                                        125%;
                        margin-bottom: (_size(wrapper-edges, small) * -1);
                        h2 {
                                font-size: 1.25em;
                        }
                        p {
                                font-size: 0.8em;
                        }
                }
        }
}
.wrapper {
        background-color: _palette(bg);
        margin: _size(wrapper-edges, large) 0;
        position: relative;
        @include wrapper-edges-color(_palette(bg));
        &:before, &:after {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                content: '';
                display: block;
                height: _size(wrapper-edges, large);
                position: absolute;
                width: 100%;
        }
        &:before {
                left: 0;
                top: (_size(wrapper-edges, large) * -1);
        }
        &:after {
                @include vendor('transform', 'scaleY(-1)');
                bottom: (_size(wrapper-edges, large) * -1);
                left: 0;
        }
        &.alt {
                &:before {
                        @include vendor('transform', 'scaleX(-1)');
                }
                &:after {
                        @include vendor('transform', 'scaleY(-1) scaleX(-1)');
                }
        }
        .inner {
                @include padding(3em, 0);
                margin: 0 auto;
                width: _size(inner);
        }
        @for $i from 2 through _misc(max-wrapper-styles) {
                $j: 3 * ($i - 1);
                $color: desaturate(lighten(_palette(bg), $j), $j * 0.5);
                &.style#{$i} {
                        background-color: $color;
                        @include wrapper-edges-color($color);
                }
        }
        &.spotlight {
                @include wrapper-edges-color(_palette(accent));
                background-color: _palette(accent);
                .inner {
                        @include vendor('display', 'flex');
                        @include vendor('align-items', 'center');
                        @include vendor('flex-direction', 'row');
                }
                .image {
                        border-radius: 100%;
                        margin: 0 _size(section-spacing, large) _size(element-margin) 0;
                        width: 22em;
                        overflow: hidden;
                        -ms-flex: 1;
                        img {
                                border-radius: 100%;
                                width: 100%;
                        }
                }
                .content {
                        width: 100%;
                        -ms-flex: 2;
                }
                &:nth-child(2n - 1) {
                        .inner {
                                @include vendor('flex-direction', 'row-reverse');
                                text-align: right;
                        }
                        .image {
                                margin: 0 0 _size(element-margin) _size(section-spacing, large);
                        }
                }
                @for $i from 2 through _misc(max-wrapper-styles) {
                        $j: 3 * ($i - 1);
                        $color: saturate(darken(_palette(accent), $j), $j * 0.5);
                        &.style#{$i} {
                                background-color: $color;
                                @include wrapper-edges-color($color);
                        }
                }
        }
        @include breakpoint(medium) {
                margin: _size(wrapper-edges, medium) 0;
                &:before, &:after {
                        height: _size(wrapper-edges, medium);
                }
                &:before {
                        top: (_size(wrapper-edges, medium) * -1);
                }
                &:after {
                        bottom: (_size(wrapper-edges, medium) * -1);
                        left: 0;
                }
                .inner {
                        @include padding(3em, 3em);
                        width: 100%;
                }
                &.spotlight {
                        .image {
                                margin: 0 _size(section-spacing, medium) _size(element-margin) 0;
                                width: 32em;
                        }
                        &:nth-child(2n - 1) {
                                .image {
                                        margin: 0 0 _size(element-margin) _size(section-spacing, medium);
                                }
                        }
                }
        }
        @include breakpoint(small) {
                margin: _size(wrapper-edges, small) 0;
                &:before, &:after {
                        height: _size(wrapper-edges, small);
                }
                &:before {
                        top: (_size(wrapper-edges, small) * -1);
                }
                &:after {
                        bottom: (_size(wrapper-edges, small) * -1);
                        left: 0;
                }
                .inner {
                        @include padding(2em, 2em);
                }
                &.spotlight {
                        .inner {
                                @include vendor('align-items', 'flex-start');
                        }
                        .image {
                                width: 19em;
                                margin: 0 _size(section-spacing, small) _size(element-margin) 0;
                        }
                        &:nth-child(2n - 1) {
                                .image {
                                        margin: 0 0 _size(element-margin) _size(section-spacing, small);
                                }
                        }
                }
        }
        @include breakpoint(xsmall) {
                &.spotlight {
                        .inner {
                                display: block;
                        }
                        .image {
                                margin: 0 0 (_size(element-margin) * 0.5) 0 !important;
                                max-width: 85%;
                                width: 12em;
                        }
                }
        }
        @include breakpoint(xxsmall) {
                .inner {
                        @include padding(2em, 1.5em);
                }
        }
}