@import "_layout.tokens";
@import "_layout.helpers";

$_grid_gutter: 40px !default;
$_page_content_max-width: 1366px !default;
$_narrow-content_max-width: 480px !default;

$_page_padding--mobile: 1rem !default;
$_grid_gutter--mobile: $_page_padding--mobile !default;

$_scrollbar-width: 15px !default;

$_viewport_background-color: $_gray-100 !default;

$_grid_item_min-width: get-flowbox-item-min-width(3) !default;

$_stack-spacing: 0.8rem !default;
$_stack-spacing--mobile: 0.75rem !default;

$_stack-spacings: (
    default: (
        default: $_stack-spacing,
        small: (.5 * $_stack-spacing),
        large: (2 * $_stack-spacing),
        component: (4 * $_stack-spacing),
        section: (8 * $_stack-spacing),
    ),
    mobile: (
        default: $_stack-spacing--mobile,
        small: (.5 * $_stack-spacing--mobile),
        large: (1.5 * $_stack-spacing--mobile),
        component: (2 * $_stack-spacing--mobile),
        section: (4 * $_stack-spacing--mobile),
    ),
) !default;

$_box_padding: 1.2rem !default;
$_box_padding--small: (.667 * $_box_padding) !default;
$_box_padding--large: $_grid_gutter !default;

$_box_padding--mobile: 1.25rem !default;
$_box_padding--small--mobile: (.6 * $_box_padding--mobile) !default;
$_box_padding--large--mobile: (1.4 * $_box_padding--mobile) !default;

$_border-radius: 8px !default;
$_border-radius--mobile: 6px !default;

$_border-width: 3px !default;
$_border-width--large: 6px !default;
$_border-width--largest: 9px !default;

$_border-width--mobile: 2px !default;
$_border-width--large--mobile: 4px !default;
$_border-width--largest--mobile: 6px !default;

$_border-widths: (
    default: (
        small: 1px,
        default: $_border-width,
        large: $_border-width--large,
        largest: $_border-width--largest,
    ),
    mobile: (
        small: 1px,
        default: $_border-width--mobile,
        large: $_border-width--large--mobile,
        largest: $_border-width--largest--mobile,
    ),
) !default;

$_border-radii: (
    default: (
        default: $_border-radius,
        small: round(.75 * $_border-radius),
        large: round(1.5 * $_border-radius),
    ),
    mobile: (
        default: $_border-radius--mobile,
        small: round(.67 * $_border-radius--mobile),
        large: round(1.67 * $_border-radius--mobile),
    ),
) !default;

$_border: var(--bw) var(--border-color, #{$_gray-300}) solid;

$_layers: (
    intrapageNav,
    ctaInset,
    filterPanel,
    siteHeader,
    mediaOverlay,
) !default;

@import "_layout.settings";
@import "_layout.styles";

// Set min height of main content

%grid-container {
    min-height: calc(100vh - var(--sp-section));

    display: flex;
    flex-direction: column;
}

%grid-container .mainContent {
    flex-grow: 1;
}

//***** Backdrop *****//

%has-fullwidth-backdrop {

    & + &,
    & + [id] > &:first-child { // Special case for Typo3 markup
        margin-top: -1px !important;
    }

    &[data-theme="dark"] + &[data-theme="dark"],
    &[data-theme="accent"] + &[data-theme="accent"] {
        padding-top: 0;
    }

    &[data-theme] { // Fix glitch in Fire Fox
        background-color: transparent;
    }

}

.has-backdrop {
    @extend %has-fullwidth-backdrop;
}

//***** Special cases for stack spacing *****//

*:has(> .has-backdrop:last-child) + * > .has-backdrop:first-child {
    @include stack-spacing(0);
}

.featureSection.has-backdrop[data-theme="dark"] + .pageSection:has(> .has-backdrop[data-theme="dark"]) {
    @include stack-spacing(0);

    > .has-backdrop[data-theme="dark"] {
        margin-top: calc(-1 * var(--sp-section));
    }

}

// Nested elements with backdrop

.has-backdrop > .has-backdrop:last-child {
    margin-bottom: calc(-1 * var(--sp-section));
}

.pageSection.has-backdrop .dataInset.has-backdrop,
.pageSection.has-backdrop .dataInset.has-intro {
    padding-top: 0;
}

// Themed data inset without Title
.has-backdrop + .dataInset[data-theme]:has(.dataInset-items:first-child),
.dataInset[data-theme] + .has-backdrop {
    @include stack-spacing(0);
}

div[id]:has(> .quoteInset) + .richtextBlock,
.has-backdrop + .richtextBlock {
    @include stack-spacing(section);
}

.ul > .copy.is-standfirst {
    @include stack-spacing(component);
}

.mockupInset + .richtextBlock {
    @include stack-spacing(section);
}

.pageSection-title + .formInset + .teaserList {
    @include stack-spacing(component);
}

$_grid_gutter: 32px !default;

    //----------------//
    //----- Page -----//
    //----------------//

$_viewport_background-color: #eee !default;
$_viewport_background: null !default;

$_page_max-width: 1680px !default; // To get full width layout, set $_page_max-width to `none`.
$_page_content_max-width: 1366px !default;

$_page_padding: $_grid_gutter !default;
$_page_padding--mobile: 1rem !default;

$_page_box-shadow: 0 0 20px rgba(black, .05), 0 0 5px rgba(black, .1) !default;

$_scrollbar-width: 15px !default;

    //----- Horizontal grid ----/

$_grid_gutter--mobile: $_page_padding--mobile !default;

$_grid_columns_count: 12 !default;

$_grid_spans: get-column-spans();

$_grid_item_min-width: get-flowbox-item-min-width() !default;

$_breakpoint--tablet: 640px !default;
$_breakpoint--desktop: 1024px !default;
$_breakpoint--small-desktop: auto !default;  // To set breakpoint automatically, set $_breakpoint--small-desktop to `auto`.

    //----- Vertical spacing -----//

$_stack-spacing: 1rem !default;
$_stack-spacing--mobile: 1rem !default;

$_stack-spacings: (
    default: (
        small: (.5 * $_stack-spacing),
        default: $_stack-spacing,
        large: (1.5 * $_stack-spacing),
        component: (2 * $_stack-spacing),
        section: (4 * $_stack-spacing),
    ),
    mobile: (
        small: (.5 * $_stack-spacing--mobile),
        default: $_stack-spacing--mobile,
        large: (1.5 * $_stack-spacing--mobile),
        component: (2 * $_stack-spacing--mobile),
        section: (4 * $_stack-spacing--mobile),
    ),
) !default;

$_scroll-margin: map.get(map.get($_stack-spacings, default), section) !default;
$_scroll-margin--mobile: map.get(map.get($_stack-spacings, mobile), section) !default;

$_scroll-margins: (
    default: (
        default: $_scroll-margin,
    ),
    mobile: (
        default: $_scroll-margin--mobile,
    ),
) !default;

    //----- Boxes -----//

$_box_padding: 1rem !default;
$_box_padding--mobile: $_box_padding !default;

$_box_padding--small: (.5 * $_box_padding) !default;
$_box_padding--small--mobile: (.5 * $_box_padding--mobile) !default;

$_box_padding--large: (2 * $_box_padding) !default;
$_box_padding--large--mobile: (2 * $_box_padding--mobile) !default;

$_box_paddings: (
    default: (
        default: $_box_padding,
        small: $_box_padding--small,
        large: $_box_padding--large,
    ),
    mobile: (
        default: $_box_padding--mobile,
        small: $_box_padding--small--mobile,
        large: $_box_padding--large--mobile,
    ),
) !default;

$_border-radius: 8px !default;
$_border-radius--mobile: 6px !default;

$_border-radii: (
    default: (
        default: $_border-radius,
        small: .5 * $_border-radius,
        large: 1.5 * $_border-radius,
    ),
    mobile: (
        default: $_border-radius--mobile,
        small: .5 * $_border-radius--mobile,
        large: 1.5 * $_border-radius--mobile,
    ),
) !default;

$_border-width: 1px !default;
$_border-width--mobile: 1px !default;

$_border-widths: (
    default: (
        default: $_border-width,
    ),
    mobile: (
        default: $_border-width--mobile,
    ),
) !default;

$_backdrop-padding: map.get(map.get($_stack-spacings, default), section) !default;
$_backdrop-padding--mobile: map.get(map.get($_stack-spacings, mobile), section) !default;

$_backdrop-paddings: (
    default: (
        default: $_backdrop-padding,
    ),
    mobile: (
        default: $_backdrop-padding--mobile,
    ),
);

    //----- Layering -----//

$_layers: (
) !default;

    //----- Calculated variables ----/

@if ($_page_max-width != none){
    $_page_padding: .5 * ($_page_max-width - $_page_content_max-width);

    // If $_page_content_max-width is greater than $_page_max-width
    @if ($_page_content_max-width > $_page_max-width - 2 * $_grid_gutter) {
        $_page_content_max-width: $_page_max-width - 2 * $_grid_gutter;
    }

}

@if ($_breakpoint--small-desktop == auto){
    $_breakpoint--small-desktop: ($_page_content_max-width + 2 * $_grid_gutter);
}

$_page_paddings: (
    default: (
        default: $_page_padding,
    ),
    small-desktop: (
        default: (.5 * $_page_padding),
    ),
    mobile: (
        default: $_page_padding--mobile,
    ),
) !default;

$_grid_gutters: (
    default: (
        default: $_grid_gutter,
    ),
    small-desktop: (
        default: $_grid_gutter,
    ),
    mobile: (
        default: $_grid_gutter--mobile,
    ),
) !default;

//***** Legacy *****//

$_stack-spacing: map.get(map.get($_stack-spacings, default), default) !default;
$_stack-spacing--small: map.get(map.get($_stack-spacings, default), small) !default;
$_stack-spacing--large: map.get(map.get($_stack-spacings, default), large) !default;
$_stack-spacing--component: map.get(map.get($_stack-spacings, default), component) !default;
$_stack-spacing--section: map.get(map.get($_stack-spacings, default), section) !default;

$_stack-spacing--mobile: map.get(map.get($_stack-spacings, mobile), default) !default;
$_stack-spacing--small--mobile: map.get(map.get($_stack-spacings, mobile), small) !default;
$_stack-spacing--large--mobile: map.get(map.get($_stack-spacings, mobile), large) !default;
$_stack-spacing--component--mobile: map.get(map.get($_stack-spacings, mobile), component) !default;
$_stack-spacing--section--mobile: map.get(map.get($_stack-spacings, mobile), section) !default;

:root {
    --scrollbar-width: #{$_scrollbar-width};

    & {
        @include responsive-variables(
            $set: $_box_paddings,
            $prefix: --bp
        );
    }

    & {
        @include responsive-variables(
            $set: $_grid_gutters,
            $prefix: --gg
        );
    }

    & {
        @include responsive-variables(
            $set: $_grid_spans,
            $prefix: --span
        );
    }

    & {
        @include responsive-variables(
            $set: $_page_paddings,
            $prefix: --pp
        );
    }

    & {
            @include only-on-small-desktop {
            --pp: #{$_grid_gutter};
        }
    }

    & {
            @include only-on-large-desktop {
            --pp: 0;
        }
    }

    & {
        @include responsive-variables(
            $set: $_border-widths,
            $prefix: --bw
        );
    }

    & {
        @include responsive-variables(
            $set: $_border-radii,
            $prefix: --br
        );
    }

    & {
        @include responsive-variables(
            $set: $_stack-spacings,
            $prefix: --sp
        );
    }

    & {
        @include responsive-variables(
            $set: $_scroll-margins,
            $prefix: --scroll-margin
        );
    }

    & {
        @include responsive-variables(
            $set: $_backdrop-paddings,
            $prefix: --backdrop-padding
        );
    }

    @each $layer in $_layers {
        --z-index--#{$layer}: #{get-z-index($layer)};
    }

}

    //-----------------------//
    //----- Page Layout -----//
    //-----------------------//

html {
    overflow-x: hidden;

    min-height: 100%; min-width: 100%;
    height: auto;

    background-color: $_viewport_background-color;

    @if meta.global_variable_exists(_viewport_background){
        background: $_viewport_background;
    }

    @supports (overflow-y: clip) {
        overflow-x: clip;
    }

}

body {
    @extend %grid-page;

    @if meta.global_variable_exists(_page_box-shadow) and $_page_box-shadow != none {
        box-shadow: $_page_box-shadow;
    }

}

h1, h2, h3, h4, h5, h6, p, blockquote,
table, caption,
address, big, dl, ol, ul,
form, fieldset, legend,
img {
    @include stack-spacing();
    margin-bottom: 0;
}

// Scroll margin

[id]:target {
    scroll-margin: var(--scroll-margin);
}

// Hide items before Scripts are loaded

[js-cloak] {
    display: none;
}

//***** Grid *****//

.grid-section {
    margin-top: $_stack-spacing--section--mobile;

    @include only-on-desktop(){
        margin-top: $_stack-spacing--section;
    }

}

.grid-component {
    margin-top: $_stack-spacing--component--mobile;

    &:first-child {
        margin-top: 0;
    }

    @include only-on-desktop(){
         margin-top: $_stack-spacing--component;
    }

}

    //----- Modifier classes for setting width ----/

.has-full-width {
    @include has-full-width();
}

.has-limited-width {
    @include has-limited-width();
}

.has-limited-wrapper {
    @include has-limited-wrapper();
}


    //----------------//
    //----- Grid -----//
    //----------------//

%grid-page {
    min-height: 100%;
    min-height: 100vh;

    max-width: $_page_max-width;
    margin: -1px auto 0 !important;

    padding-bottom: var(--sp-section);

    position: relative;
    z-index: 1;

    // Force to cover margin of first child
    border-top: 1px solid transparent;

    // Clip overflowing content (on modern browsers)
    overflow-x: clip;
}

.grid-page {
    @extend %grid-page;
}

%grid-container {
    @include has-limited-width();
}

.grid-container {
    @extend %grid-container;
}

    //----- Global attributes ----/

.grid-flowbox {
    @include grid-flowbox();
}

.grid-flexbox {
    display: flex;
    column-gap: var(--gg);
    flex-wrap: wrap;

    & > * {
        flex: 1 1 auto;
    }

    & > *:not(&-item) {
        width: 100%;
    }

}

@include only-on-desktop(){

    %grid-row {
        @include grid-row();

        &.is-centered {
            justify-content: center;
        }

        %grid-column {
            @include grid-column();
        }

    }

}

.grid-row {
    @extend %grid-row;

    .grid-column {
        @extend %grid-column;
    }

}

    //----- Rows with a fixed number of columns ----/
    //----- e.g. `.row.with-3-columns .column` ----/

@include only-on-desktop(){

    %grid-row {
        $spans: 2, 3, 4, 6 !default;

        @for $i from 1 through list.length($spans) {

            $count: list.nth($spans, $i);

            &.with-#{$count}-columns {
                flex-wrap: wrap;

                %grid-column {
                    @include grid-column(math.div(1, $count));
                }

            }

        }

    }

}

    //----- Rows with a fixed number of columns and ratio ----/
    //----- e.g. `.row.with-ratio-2-1 .column` ----------*/

@include only-on-desktop(){

    $ratios: (
        2 1,
        1 2,
        7 5,
        5 7,
        3 1,
        1 3
    );

    @if meta.type-of(list.nth($ratios, 1)) != "list" {
            // If `$ratios` is not a list of ratios, convert it
        $ratios: list.append((), $ratios, comma);
    }

    @for $i from 1 through list.length($ratios) {

        $ratio: list.nth($ratios, $i);
        $count: list.length($ratio);

        $total: 0;
        $selector: ".with-ratio";

        @for $j from 1 through list.length($ratio){
            $total: $total + list.nth($ratio, $j);

            $selector: "#{$selector}-#{list.nth($ratio, $j)}"
        }

        %grid-row {
            flex-wrap: wrap;

            &#{$selector} {

                %grid-column {

                    @for $j from 1 through list.length($ratio){

                        $cols: list.nth($ratio, $j);

                        &:nth-child(#{$j}n){
                            @include grid-column(math.div($cols, $total));
                        }

                    }

                }

            }

        }

    }

}


    //----- Elements with a span over n of $_grid_columns_count columns ----/
    //----- e.g. `span-6 grid-column` --------------------------/


%grid-row {

    @for $i from 1 through $_grid_columns_count {

        %grid-column.span-#{$i} {
            flex: 0 1 auto;
            @include columns-width($i);
        }

    }

    @include only-on-desktop(){

        @for $i from 1 through $_grid_columns_count {

            .indent-#{$i} {
                margin-left: (math.div($i, $_grid_columns_count) * 100%);
            }

        }

    }

}


    //----- Placeholder for width of one of n elements ----/

@for $i from 1 through $_grid_columns_count {

    %one-of-#{$i} {
        width: math.div(math.floor(math.div(100, $i) * 100%), 100);
    }

}

@for $i from 1 through $_grid_columns_count {

    %grid-row {

        .is-one-of-#{$i} {
            @extend %one-of-#{$i};
        }

    }

}

    //--* Visually hide elements -----//
    //-- Thanks to https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html --//

%visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

%is-visually-hidden { // Deprecated: Use "%visually-hidden"
    @extend %visually-hidden;
}

.is-visually-hidden {
    @extend %is-visually-hidden;
}

    //----- Utility classes -----//

.--bp {

    @each $name, $value in map.get($_box_paddings, default) {

        $variant: '';

        @if $name != default {
            $variant: '-#{$name}';
        }

        &#{$variant} {
            padding: $value !important;
            padding: var(--bp#{$variant}) !important;
        }

    }

    @each $name, $value in map.get($_box_paddings, default) {

        $variant: '';

        @if $name != default {
            $variant: '-#{$name}';
        }

        &-top#{$variant} {
            padding-top: $value !important;
            padding-top: var(--bp#{$variant}) !important;
        }

        &-bottom#{$variant} {
            padding-bottom: $value !important;
            padding-bottom: var(--bp#{$variant}) !important;
        }

        &-left#{$variant} {
            padding-left: $value !important;
            padding-left: var(--bp#{$variant}) !important;
        }

        &-right#{$variant} {
            padding-right: $value !important;
            padding-right: var(--bp#{$variant}) !important;
        }

    }

}

.--sp {

    &-none {
        margin-top: 0 !important;
    }

    @each $name, $value in map.get($_stack-spacings, default) {

        $variant: '';

        @if $name != default {
            $variant: '-#{$name}';
        }

        &#{$variant} {
            margin-top: $value !important;
            margin-top: var(--sp#{$variant}) !important;
        }

    }

}

$_grid_gutter: null !default;
$_page_padding: null !default;

@if variable-exists(grid-desktop) and type-of($grid-desktop) == "map"{

    @if map-has-key($grid-desktop, gutter) {
        $_grid_gutter: map-get($grid-desktop, gutter);
    }

    @if map-has-key($grid-desktop, page-padding) {
        $_page_padding: map-get($grid-desktop, page-padding);
    }

}

$_grid_gutter--mobile: null !default;
$_page_padding--mobile: null !default;

@if variable-exists(grid-mobile) and type-of($grid-mobile) == "map"{

    @if map-has-key($grid-mobile, gutter) {
        $_grid_gutter--mobile: map-get($grid-mobile, gutter);
    }

    @if map-has-key($grid-mobile, page-padding) {
        $_page_padding--mobile: map-get($grid-mobile, page-padding);
    }

}

$_grid_gutter--tablet: null !default;
$_page_padding--tablet: null !default;

@if variable-exists(grid-tablet) and type-of($grid-tablet) == "map"{

    @if map-has-key($grid-tablet, gutter) {
        $_grid_gutter--tablet: map-get($grid-tablet, gutter);
    }

    @if map-has-key($grid-tablet, page-padding) {
        $_page_padding--tablet: map-get($grid-mobile, page-padding);
    }

}