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

/* Panel */

$pad: _size(pad); $pad-small-tb: _size(pad-small-tb); $pad-small-lr: _size(pad-small-lr);

@mixin panel-colors {

$opacity: 0.175;
$darken: 3;
$desaturate: 3;
&.color0 {
    @include gradient-background(false, 1, 20%, 60%);
}
&.color1 {
    @include gradient-background;
    background-color: _palette(accent1);
}
&.color2 {
    @include gradient-background;
    background-color: _palette(accent2);
}
&.color3 {
    @include gradient-background;
    background-color: desaturate(darken(_palette(accent3), 9), 9);
}
&.color4 {
    @include gradient-background;
    background-color: _palette(accent4);
}
&.color1-alt {
    @include gradient-background(false, $opacity);
    background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
}
&.color2-alt {
    @include gradient-background(false, $opacity);
    background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
}
&.color3-alt {
    @include gradient-background(false, $opacity);
    background-color: desaturate(darken(_palette(accent3), 12), 12);
}
&.color4-alt {
    @include gradient-background(false, $opacity);
    background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
}

}

.panel {

@include vendor('display', 'flex');
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
@include vendor('justify-content', 'center');
@include vendor('align-items', 'stretch');
height: 100%;
overflow-x: hidden;
overflow-y: auto;
> * {
    position: relative;
    min-width: 10rem;
    @include panel-colors;
}
> .intro {
    @include padding($pad, $pad);
    @include vendor('display', 'flex');
    @include vendor('flex-grow', '0');
    @include vendor('flex-shrink', '0');
    @include vendor('justify-content', 'center');
    @include vendor('align-items', 'flex-start');
    @include vendor('flex-direction', 'column');
    width: 22rem;
    &.joined {
        width: (22rem - $pad);
        padding-right: 0;
        & + .inner {
            padding-left: ($pad * 0.75);
        }
    }
}
> .inner {
    @include padding($pad, $pad);
    @include vendor('display', 'flex');
    @include vendor('flex-grow', '1');
    @include vendor('flex-shrink', '1');
    @include vendor('justify-content', 'center');
    @include vendor('align-items', 'flex-start');
    @include vendor('flex-direction', 'column');
    position: relative;
    width: 100%;
    &.columns {
        @include vendor('display', 'flex');
        @include vendor('justify-content', 'center');
        @include vendor('align-items', 'center');
        @include vendor('flex-direction', 'row');
        > * {
            @include vendor('flex-grow', '0');
            @include vendor('flex-shrink', '0');
            margin-left: $pad;
        }
        > :first-child {
            margin-left: 0;
        }
        &.divided {
            > * {
                margin-left: ($pad * 2);
                &:before {
                    content: '';
                    position: absolute;
                    top: $pad;
                    width: 2px;
                    height: calc(100% - #{$pad * 2});
                    margin-left: ($pad * -1);
                    background-color: _palette(border);
                }
            }
            > :first-child {
                margin-left: 0;
                &:before {
                    display: none;
                }
            }
        }
        &.aligned {
            @include vendor('align-items', 'flex-start');
        }
    }
}
@include spans(_size(span-fixed));
&.small {
    width: 35rem;
}
&.medium {
    width: 50rem;
}
&.large {
    width: 65rem;
}
&.small,
&.medium,
&.large {
    @include spans(_size(span-variable));
}
@include panel-colors;

}

@mixin panel-colors-small {

$opacity: 0.175;
$darken: 3;
$desaturate: 3;
&.color1 {
    @include gradient-background-small;
    background-color: _palette(accent1);
}
&.color2 {
    @include gradient-background-small;
    background-color: _palette(accent2);
}
&.color3 {
    @include gradient-background-small;
    background-color: _palette(accent3);
}
&.color4 {
    @include gradient-background-small;
    background-color: _palette(accent4);
}
&.color1-alt {
    @include gradient-background-small(false, $opacity);
    background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
}
&.color2-alt {
    @include gradient-background-small(false, $opacity);
    background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
}
&.color3-alt {
    @include gradient-background-small(false, $opacity);
    background-color: desaturate(darken(_palette(accent3), $darken), $desaturate);
}
&.color4-alt {
    @include gradient-background-small(false, $opacity);
    background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
}

}