//
// Variables
// --------------------------------------------------
$frame-color:                   inherit !default;
$frame-background:              transparent !default;
$frame-embedded-border-radius:  .5rem !default;
$frame-width-large:             1600px !default;
$frame-width-medium:            870px !default;
$frame-width-small:             600px !default;
$frame-inner-spacing:           1.75rem !default;
$frame-inner-spacing-small:     .75rem !default;
$frame-inner-spacing-scaling:   () !default;
$frame-inner-spacing-scaling:   map-merge(
    (
        xs: 1,
        sm: 1.2,
        md: 1.3,
        lg: 1.4,
        xl: 1.5
    ),
    $frame-inner-spacing-scaling
);
$frame-outer-spacing:           1rem !default;
$frame-outer-spacing-scaling:  () !default;
$frame-outer-spacing-scaling:  map-merge(
    (
        'none': 0,
        'extra-small': 1,
        'small': 1.5,
        'medium': 2,
        'large': 2.5,
        'extra-large': 3
    ),
    $frame-outer-spacing-scaling
);
$frame-backgrounds: () !default;
$frame-backgrounds: map-merge(
    (
        'primary': (
            'background':       $primary,
            'color':            color-contrast($primary),
            'link-color':       color-contrast($primary),
            'link-hover-color': color-contrast($primary)
        ),
        'secondary': (
            'background':       $secondary,
            'color':            color-contrast($secondary),
            'link-color':       color-contrast($secondary),
            'link-hover-color': color-contrast($secondary)
        ),
        'tertiary': (
            'background':       $tertiary,
            'color':            color-contrast($tertiary),
            'link-color':       color-contrast($tertiary),
            'link-hover-color': color-contrast($tertiary)
        ),
        'quaternary': (
            'background':       $quaternary,
            'color':            color-contrast($quaternary),
            'link-color':       color-contrast($quaternary),
            'link-hover-color': color-contrast($quaternary)
        ),
        'light': (
            'background':       $light,
            'color':            $body-color,
            'link-color':       $link-color,
            'link-hover-color': $link-hover-color
        ),
        'dark': (
            'background':       $dark,
            'color':            color-contrast($dark),
            'link-color':       $link-color,
            'link-hover-color': $link-hover-color
        )
    ),
    $frame-backgrounds
);

//
// CSS Variables
// --------------------------------------------------
:root {
    --frame-color: #{$frame-color};
    --frame-link-color: #{$link-color};
    --frame-link-hover-color: #{$link-hover-color};
    --frame-background: #{$frame-background};
    --frame-embedded-border-radius: #{$frame-embedded-border-radius};
    --frame-width-large: #{$frame-width-large};
    --frame-width-medium: #{$frame-width-medium};
    --frame-width-small: #{$frame-width-small};
    --frame-spacing: #{$frame-inner-spacing};
    --frame-spacing-small: #{$frame-inner-spacing-small};
    @each $breakpoint in map-keys($frame-inner-spacing-scaling) {
        --frame-spacing-#{$breakpoint}: #{$frame-inner-spacing * map-get($frame-inner-spacing-scaling, $breakpoint)};
        --frame-spacing-small-#{$breakpoint}: #{$frame-inner-spacing-small * map-get($frame-inner-spacing-scaling, $breakpoint)};
    }
    --frame-outer-spacing-before: 0;
    --frame-outer-spacing-after: 0;
    @each $variant in map-keys($frame-outer-spacing-scaling) {
        --frame-outer-spacing-variant-#{$variant}: #{$frame-outer-spacing * map-get($frame-outer-spacing-scaling, $variant)};
    }
}

//
// Frame
// --------------------------------------------------
.frame {
    position: relative;
    margin-top: var(--frame-outer-spacing-before);
    margin-bottom: var(--frame-outer-spacing-after);
    padding-top: var(--frame-spacing);
    padding-bottom: var(--frame-spacing);
    color: var(--frame-color);
    background: var(--frame-background);
    a[class=""],
    a:not([class]) {
        color: var(--frame-link-color);
        &:hover {
            color: var(--frame-link-hover-color);
        }
    }
    @each $breakpoint in map-keys($frame-inner-spacing-scaling) {
        @include media-breakpoint-up($breakpoint) {
            --frame-spacing: var(--frame-spacing-#{$breakpoint});
        }
    }
}
.frame-inner {
    > *:last-child {
        margin-bottom: 0;
    }
}

//
// Layout
//
.frame-layout-embedded {
    background: transparent;
    > .frame-group-container {
        @include make-container();
        @each $breakpoint, $container-max-width in $container-max-widths {
            @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
                max-width: $container-max-width;
            }
        }
        &-full {
            max-width: 100%;
        }
        &-large {
            max-width: var(--frame-width-large);
        }
        &-medium {
            max-width: var(--frame-width-medium);
        }
        &-small {
            max-width: var(--frame-width-small);
        }
        > .frame-group-inner {
            position: relative;
            border-radius: var(--frame-embedded-border-radius);
            background: var(--frame-background);
            padding: var(--frame-spacing);
            > .frame-container {
                padding: 0;
            }
            .frame-backgroundimage-container {
                border-radius: var(--frame-embedded-border-radius);
            }
        }
    }
}

//
// Container
// --------------------------------------------------
.frame-container {
    position: relative;
    @include make-container();
    &-default {
        @each $breakpoint, $container-max-width in $container-max-widths {
            @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
                max-width: $container-max-width;
            }
        }
    }
    &-full {
        max-width: 100%;
    }
    &-large {
        max-width: var(--frame-width-large);
    }
    &-medium {
        max-width: var(--frame-width-medium);
    }
    &-small {
        max-width: var(--frame-width-small);
    }
}
.container {
    .frame-container,
    .frame-group-container {
        padding-left: 0;
        padding-right: 0;
    }
}

//
// Frame Options
// --------------------------------------------------
.frame-option-ruler-before {
    border-top: 1px solid rgba(0, 0, 0, .125);
    margin-top: 0;
}
.frame-option-ruler-after {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.frame-option-indent-left {
    .frame-inner {
        @each $breakpoint in map-keys($grid-breakpoints) {
            $i: index(map-keys($grid-breakpoints), $breakpoint);
            $i: $i - 1;
            @include media-breakpoint-up($breakpoint) {
                margin-left: $i * 5%;
            }
        }
    }
}
.frame-option-indent-right {
    .frame-inner {
        @each $breakpoint in map-keys($grid-breakpoints) {
            $i: index(map-keys($grid-breakpoints), $breakpoint);
            $i: $i - 1;
            @include media-breakpoint-up($breakpoint) {
                margin-right: $i * 5%;
            }
        }
    }
}

//
// Size
// --------------------------------------------------
.frame-size-small {
    @each $breakpoint in map-keys($frame-inner-spacing-scaling) {
        @include media-breakpoint-up($breakpoint) {
            --frame-spacing: var(--frame-spacing-small-#{$breakpoint});
        }
    }
}

//
// Height
// --------------------------------------------------
.frame-height-small,
.frame-height-medium,
.frame-height-max {
    display: flex;
    .frame-group-container,
    .frame-group-inner {
        display: flex;
        flex-grow: 1;
    }
    .frame-container {
        display: flex;
        align-items: center;
    }
    .frame-inner {
        flex-grow: 1;
    }
}
.frame-height-small {
    min-height: 300px;
    @include media-breakpoint-up(md) {
        min-height: 400px;
    }
}
.frame-height-medium {
    min-height: 400px;
    @include media-breakpoint-up(md) {
        min-height: 500px;
    }
}

//
// Background
// --------------------------------------------------
.container {
    .frame-has-backgroundimage,
    %frame-has-backgroundimage {
        &:not(.frame-layout-embedded) {
            padding-left: var(--frame-spacing);
            padding-right: var(--frame-spacing);
        }
    }
}
%frame-collapsible {
    --frame-outer-spacing-before: calc(-1 * var(--frame-spacing));
}
@mixin make-frame-collapsible($name) {
    .frame-size-default.frame-background-#{$name}.frame-space-after-none:not(.frame-option-ruler-after):not(.frame-has-backgroundimage):not(.frame-layout-embedded) +
    .frame-size-default.frame-background-#{$name}.frame-space-before-none:not(.frame-option-ruler-before):not(.frame-has-backgroundimage):not(.frame-layout-embedded) {
        @extend %frame-collapsible;
    }
}
@include make-frame-collapsible('none');
@each $name, $settings in $frame-backgrounds {
    .frame-background-#{$name} {
        @extend %frame-has-backgroundimage;
        $tmp-color: map-get($settings, 'color');
        $tmp-background: map-get($settings, 'background');
        $tmp-link-color: map-get($settings, 'link-color');
        $tmp-link-hover-color: map-get($settings, 'link-hover-color');
        @if ($tmp-color) {
            --frame-color: #{$tmp-color};
        }
        @if ($tmp-background) {
            --frame-background: #{$tmp-background};
        }
        @if ($tmp-link-color) {
            --frame-link-color: #{$tmp-link-color};
        }
        @if ($tmp-link-hover-color) {
            --frame-link-hover-color: #{$tmp-link-hover-color};
        }
    }
    @include make-frame-collapsible($name);
}
.frame-layout-embedded.frame-space-after-none:not(.frame-option-ruler-after) + .frame-layout-embedded.frame-space-before-none:not(.frame-option-ruler-before),
.frame-layout-embedded.frame-space-after-none:not(.frame-option-ruler-after) + .frame-size-default.frame-background-none.frame-space-before-none:not(.frame-option-ruler-before):not(.frame-has-backgroundimage),
.frame-size-default.frame-background-none.frame-space-after-none:not(.frame-option-ruler-after):not(.frame-has-backgroundimage) + .frame-layout-embedded.frame-space-before-none:not(.frame-option-ruler-before) {
    @extend %frame-collapsible;
}
.frame-background-none {
    --frame-background: transparent;
}

//
// Background Image
// --------------------------------------------------
.frame-backgroundimage-container {
    overflow: hidden;
}
.frame-backgroundimage-container,
.frame-backgroundimage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
}
.frame-backgroundimage-fade {
    opacity: .125;
}
.frame-backgroundimage-parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    @media (hover: none) {
        background-attachment: initial;
    }
}
.frame-backgroundimage-blur {
    filter: blur(10px);
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;
}
.frame-backgroundimage-grayscale {
    filter: grayscale(1);
}
.frame-backgroundimage-sepia {
    filter: sepia(1);
}
.frame-backgroundimage-behaviour-pattern {
    background-repeat: repeat;
    background-size: auto;
}

//
// Space
//
.frame-space-before {
    margin-top: var(--frame-outer-spacing-before, 0);
}
.frame-space-after {
    margin-bottom: var(--frame-outer-spacing-after, 0);
}
@each $name, $scaling in $frame-outer-spacing-scaling {
    .frame-space-before-#{$name} {
        --frame-outer-spacing-before: var(--frame-outer-spacing-variant-#{$name});
    }
    .frame-space-after-#{$name} {
        --frame-outer-spacing-after: var(--frame-outer-spacing-variant-#{$name});
    }
}

//
// Frame Header
// --------------------------------------------------
.frame-header {
    margin-bottom: $spacer;
    > *:last-child {
        margin-bottom: 0;
    }
}
.frame-header-permalink {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    color: inherit;
    opacity: .25;
    transition: opacity ease-in-out .3s;
    visibility: hidden;
    top: -.1em;
    &:hover {
        color: inherit;
        text-decoration: none;
        opacity: .75;
    }
}
*:hover > .frame-header-permalink {
    visibility: visible;
}