/* region Font */

/* poppins-100 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 100;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-100.woff2') format('woff2');
}

/* poppins-200 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 200;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-200.woff2') format('woff2');
}

/* poppins-300 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 300;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-300.woff2') format('woff2');
}

/* poppins-regular - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 400;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-regular.woff2') format('woff2');
}

/* poppins-500 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 500;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-500.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 600;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-600.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 700;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-700.woff2') format('woff2');
}

/* poppins-800 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 800;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-800.woff2') format('woff2');
}

/* poppins-900 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 900;
    src         : local(''),
    url('../../resources/fonts/poppins-v20-latin-900.woff2') format('woff2');
}

@font-face {
    font-family   : 'Roboto Flex';
    font-style    : normal;
    font-weight   : 100 1000;
    font-stretch  : 100%;
    font-display  : swap;
    src           : url('../../resources/fonts/RobotoFlex.woff2') format('woff2');
    unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family : 'Montserrat';
    font-style  : normal;
    font-weight : 100 900;
    src         : url('../../resources/fonts/Montserrat.woff2') format('woff2');
}

/* endregion */

html, body {
    height     : 100%;
    overflow   : hidden;
    box-sizing : border-box;
}

@keyframes background-animation {
    0% {
        background-position : bottom, right, bottom right;
        background-size     : 50% 50%, 75% 75%, 100% 100%;
    }
    50% {
        background-position : top, left, bottom right;
        background-size     : 70% 70%, 40% 40%, 100% 100%;
    }
    100% {
        background-position : bottom, right, bottom right;
        background-size     : 50% 50%, 75% 75%, 100% 100%;
    }
}

body {
    font-family         : Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin              : 0;
    font-size           : 14px !important;
    display             : flex;
    flex-flow           : row nowrap;
    align-items         : stretch;
    transition          : background-color var(--b-default-transition-duration);

    background-color    : var(--b-neutral-97);
    background-image    : radial-gradient(circle, rgba(108, 207, 250, .3), transparent 70%, transparent 100%), radial-gradient(circle, rgba(78, 34, 191, .1), transparent 70%, transparent 100%), radial-gradient(circle at right bottom, color-mix(in srgb, var(--b-primary), transparent 90%), transparent 70%, transparent 100%);
    background-position : bottom, right, bottom right;
    background-size     : 50% 50%, 75% 75%, 100% 100%;
    /* animation           : background-animation 90s ease-in-out infinite; */

    &.b-initially-hidden {
        visibility : hidden;
    }

    &.b-screenshot * {
        transition         : none !important;
        animation-duration : 0s !important;
    }

    &.b-theme-fluent2-light,
    &.b-theme-fluent2-dark,
    &.b-theme-material3-light,
    &.b-theme-material3-dark {
        font-family : 'Roboto Flex', Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }

    &.b-theme-svalbard-light,
    &.b-theme-svalbard-dark {
        font-family : 'Montserrat', Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }

    &.b-theme-material3-light,
    &.b-theme-svalbard-light,
    &.b-theme-visby-light,
    &.b-theme-high-contrast-light,
    &.b-theme-stockholm-light {
        color-scheme : light;
    }

    &.b-theme-material3-dark,
    &.b-theme-svalbard-dark,
    &.b-theme-visby-dark,
    &.b-theme-high-contrast-dark,
    &.b-theme-stockholm-dark {
        color-scheme     : dark;

        background-image : radial-gradient(circle, rgba(55, 104, 122, .3), transparent 70%, transparent 100%), radial-gradient(circle, rgba(47, 21, 115, 0.1), transparent 70%, transparent 100%), radial-gradient(circle at right bottom, color-mix(in srgb, var(--b-primary), transparent 90%), transparent 70%, transparent 100%);
    }

    /* Space around component, except in thumbs */
    &:where(:not(.b-screenshot, .b-hide-header)) {
        #container {
            #outer,
            .demo-app,
            > .b-split-container,
            > .b-container.b-outer:where(:not(.no-demo-app-style)) {
                margin        : 0 1em 1em;
                box-shadow    : 0.2rem 0.2rem 1.2rem rgb(0 0 0 / 5%);
                overflow      : clip;
                transition    : background var(--b-default-transition-duration), border var(--b-default-transition-duration), max-width var(--b-default-transition-duration);

                background    : var(--b-neutral-100);
                border-radius : var(--b-widget-border-radius-large);

                .b-theme-visby-dark &,
                .b-theme-visby-light & {
                    border : 1px solid var(--app-border-color, var(--b-grid-cell-border-color, var(--b-neutral-80)));
                }

                .b-theme-high-contrast-dark &,
                .b-theme-high-contrast-light & {
                    border : 1px solid var(--b-border-1);
                }
            }

            .demo-header {
                margin-inline : 1em;
                border-bottom : none;
            }
        }

        @media screen and (min-width : 1000px) {
            #container {
                #outer,
                .demo-app,
                > .b-split-container,
                > .b-container.b-outer:where(:not(.no-demo-app-style)) {
                    margin        : 1em 4em 4em;

                    &:where(:first-of-type:not(:last-child)):has(~ .b-container) {
                        margin-top    : 1em;
                        margin-bottom : 2em;
                    }

                    &:where(:not(:first-of-type)) {
                        margin-top    : 2em;
                    }
                }

                .demo-header {
                    margin-top    : 1em;
                    margin-inline : 4em;
                }
            }
        }
    }
}

/* <trial-only> */

#trial-button {
    margin-inline-end : 1em;
}

@media (max-width : 800px) {
    #trial-button {
        display : none;
    }
}

@media print {
    body {
        background-image: none;
    }
}

/* <trial-only> */

.b-task-board-base.b-outer,
.b-grid-base.b-outer:not(.b-panel-collapsible, .b-timeline) {
    flex : 1;
}

#example-description {
    max-width : 0;
    clip      : rect(0, 0, 0, 0);
    overflow  : clip;
}

#skip-to-content {
    position         : fixed;
    padding          : 16px;
    font-size        : 120%;
    z-index          : 100;
    color            : var(--b-neutral-100);
    background-color : var(--b-primary-40);

    border-radius    : var(--b-widget-border-radius);

    &:not(:focus) {
        clip : rect(0, 0, 0, 0);
    }
}

#container {
    position       : relative;
    flex           : 1;
    min-height     : 0;
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    transform      : translate(0, 0);
    overflow       : hidden;

    &::after {
        content        : '';
        position       : absolute;
        width          : 0;
        height         : 0;
        max-height     : 0;
        left           : 0;
        border         : none;
        box-shadow     : none;
        pointer-events : none;
    }
}

.demo-header {
    display                    : flex;
    padding-inline             : 0.7em 0;
    padding-block              : 0;

    transition                 : background-color var(--b-default-transition-duration), padding var(--b-default-transition-duration), font-size .1s;
    border-bottom              : 1px solid var(--b-border-7);

    /* DemoHeader.js gets this from being a widget, match here */
    &, * {
        box-sizing : border-box;
    }

    a {
        text-decoration : none;
    }

    .b-icon {
        font-size : 1.1em;
    }

    .title {
        margin-inline-end : auto;
        display           : flex;
        align-items       : center;
        white-space       : nowrap;
        color             : var(--b-text-1);

        &:focus-visible {
            outline-offset : var(--b-button-focus-outline-offset);
            outline        : var(--b-button-focus-outline-width) solid var(--b-widget-focus-outline-color);
            border-radius  : var(--b-widget-border-radius);
        }

        h1 {
            display     : flex;
            align-items : center;
            margin      : 0;
            font-weight : 600;
            font-size   : 1.1em;
        }

        svg {
            margin-inline-end  : .75em;
            height             : 2em;
            width              : 2em;
            background         : #0076f8;
            padding-inline-end : .2em;
            border-radius      : 5px;

            g {
                fill : #fff;
            }
        }
    }

    .b-toolbar {
        font-size              : .9em;

        --b-toolbar-padding    : 0.7em;
        --b-toolbar-background : transparent;

        @media (height <= 768px) {
            --b-toolbar-padding : 0.4em 0.5em;
        }
    }

    .b-button-text {
        --b-button-type-text-hover-background : var(--b-neutral-100);
    }
}

.b-no-description [data-ref="infoButton"] {
    display : none;
}

.b-hint, .b-tooltip, .b-widget.b-html {
    code {
        background    : var(--b-neutral-93);
        padding       : 0.15em 0.3em;
        border-radius : 3px;
        margin-inline : 0.2em;
    }

    .description {
        line-height : 1.7em;
    }
}

.b-tooltip.b-plain-tooltip code {
    margin-inline : 0;

    background    : var(--b-neutral-93);
    color         : var(--b-neutral-30);
}

.b-hint .header {
    font-weight : bold;

    i {
        margin-inline-end : .5em;
    }
}

.b-no-initial-demo-transition * {
    transition : none !important;
}

.demo-header .b-button.b-text {
    min-height : 2.5em; /* make sure buttons don't stretch header to cause misalignment with code editor header */
}

@media (max-width : 450px) {
    .rc-feedbackbutton-iframe,
    .b-hint,
    #fullscreen-button,
    [data-ref="codeButton"],
    #trial-button,
    .learnButton,
    .b-code-editor .b-icon-download {
        display : none !important;
    }

    .demo-header a#title {
        padding-inline-start : 0;
        background           : none
    }

}

#header-tools {
    display : none;
}

#tools {
    display : flex;
}

.tools-container {
    order : 1;
}

.b-icon-codepen {
    mask-image       : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' id='codepen-logo' viewBox='0 0 512 512'%3E%3Cpath d='M502.3 159.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156C3.7 163.7 0 170.8 0 178v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V178c0-7.1-3.7-14.3-9.7-18.3zM278 63.1l172.3 114.9-76.9 51.4L278 165.7V63.1zm-44 0v102.6l-95.4 63.7-76.9-51.4L234 63.1zM44 219.1l55.1 36.9L44 292.8v-73.7zm190 229.7L61.7 334l76.9-51.4L234 346.3v102.6zm22-140.9l-77.7-52 77.7-52 77.7 52-77.7 52zm22 140.9V346.3l95.4-63.7 76.9 51.4L278 448.8zm190-156l-55.1-36.9L468 219.1v73.7z'/%3E%3C/svg%3E");
    width            : 1em;
    height           : 1em;
    flex-shrink      : 0;
    transition       : background-color .3s;

    background-color : var(--b-button-color);
}

.info-popup.b-popup {
    .b-popup-content {
        padding : 1.5em;

        .b-html {
            flex-direction : column;
        }

        .header {
            font-weight : 700;
        }

        .description {
            padding-top : .5em;
            line-height : 1.4em;
        }

        .b-color-field {

        }
    }

    [data-ref="playHintFlow"] {
        display : none;
    }

    .b-hint-flow & {
        /* If a hint flow is available, hide the regular hint UI */
        [data-ref="hintButton"], [data-ref="hintCheck"] {
            display : none;
        }

        /* And show the hint flow checkbox */
        [data-ref="playHintFlow"] {
            display : flex;
        }
    }
}

.feedback-savedmsg {
    h3 {
        margin-top : 0.6em;
    }

    i {
        margin-inline-end : 0.2em;
    }
}

.version-update-toast {
    max-width   : 250px;
    line-height : 1.4em;

    h4 {
        position      : relative;
        margin-top    : 0;
        margin-bottom : 0.5em;

        i.fa-times {
            position : absolute;
            right    : 0;
            top      : 0;

            .b-rtl & {
                right : auto;
                left  : 0;
            }
        }
    }

    a {
        text-decoration : underline;
    }
}

.b-hint .header {
    i.fa {
        margin-inline-end : 0.5em;
    }
}

.b-screenshot .demo-header,
.b-hide-header .demo-header {
    display : none;
}

/* Used by BannerMaker */
.b-hide-toolbar {
    .b-outer > .b-panel-body-wrap > .b-top-toolbar,
    .b-outer.b-panel > header.b-panel-ui-toolbar {
        display : none;
    }
}

/* Keycap icons, CMD + F3 */
.keycap {
    font-weight   : 600;
    font-size     : 0.8em;
    padding       : 0.2em 0.4em;
    margin-inline : .5em;
    border        : 1px solid var(--b-neutral-85);
    border-radius : 3px;
    background    : var(--b-neutral-97);
    color         : var(--b-widget-color);
}

.docsmenu {
    --b-panel-header-padding                     : 1em;
    --b-panel-header-font-size                   : 1.1em;
    --b-panel-header-text-align                  : center;
    --b-panel-header-font-weight                 : 600;
    --b-panel-with-header-top-toolbar-background : transparent;

    .b-menu-content {
        overflow : visible;
    }

    a {
        text-decoration : none;
    }

    .b-docs-category {
        background                : var(--b-neutral-100);

        .b-theme-high-contrast-dark &,
        .b-theme-high-contrast-light & {
            --b-menu-item-color      : var(--b-neutral-10);
            --b-menu-item-icon-color : var(--b-neutral-10);
        }

        --b-menu-item-font-weight : 500;

        position                  : sticky;
        top                       : calc(var(--b-panel-padding) * -1px);
        z-index                   : 1;
    }
}

/* Block UI of demo widgets until code changes have been applied */
.b-code-changes-pending {
    #container *,
    > .b-widget:not(.b-code-editor) * {
        pointer-events : none !important;
    }
}

.b-example-tooltip {
    .b-panel-header {
        .b-header-title {
            white-space : break-spaces;
        }
    }
}

.b-locale-picker .b-list-item-content {
    div:first-child {
        flex : 1;
    }
    div:last-child {
        color : var(--b-neutral-40);
    }
}

.b-demo-hint .header {
    font-weight : 600;
    display     : flex;
    align-items : center;
    gap         : .5em;
}

/* Undo bootstrap.js disruptions to label elements */
label {
    display       : block;
    margin-bottom : 0;
}