/**
 * Common example scss file
 */

// global styling
html,
body {
    height   : 100%;
    width    : 100%;
    overflow : hidden;
}

@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 {
    margin              : 0;
    padding             : 0;
    font-size           : 14px;
    font-family         : Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
    display             : flex;
    flex-flow           : column nowrap;
    align-items         : stretch;

    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, #1e88e5), transparent 90%), transparent 70%, transparent 100%);
    background-position : bottom, right, bottom right;
    background-size     : 50% 50%, 75% 75%, 100% 100%;
    background-repeat   : repeat repeat;
    //animation           : background-animation 90s ease-in-out infinite;

    /* Space around component, except in thumbs */
    &:where(:not(.b-screenshot, .b-hide-header)) {
        #container, #app, app-root, #root {
            .demo-app,
            > .b-split-container,
            > .b-container.b-outer:where(:not(.no-demo-app-style, .b-demo-code-editor)) {
                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, #app, app-root, #root {
                .demo-app,
                > .b-split-container,
                > .b-container.b-outer:where(:not(.no-demo-app-style, .b-demo-code-editor)) {
                    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)):has(~ .b-container) {
                        margin-top    : 2em;
                    }
                }

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

/* For Angular using web component ViewEncapsulation.ShadowDom */
:host {
    @media screen and (height > 768px) and (min-width : 800px) {
        .demo-header {
            margin-top    : 1em;
            margin-inline : 4em;
            border-bottom : none;
        }

        .demo-app {
            display        : flex;
            flex-direction : column;

            margin         : 1em 4em 4em;
            box-shadow     : 0.2rem 0.2rem 1.2rem rgb(0 0 0 / 5%);
            overflow       : clip;
            transition     : background var(--b-default-transition-duration, .2s), border var(--b-default-transition-duration, .2s), max-width var(--b-default-transition-duration, .2s);

            background     : var(--b-neutral-100, #fff);
            border-radius  : var(--b-widget-border-radius-large, 2em);
        }
    }
}

#container, #app, #root {
    position       : relative;
    flex           : 1 1 100%;
    min-height     : 0;
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    transform      : translate(0, 0);
    top            : 0;
    left           : 0;
}

.b-react-scheduler-container,
.b-vue-scheduler-container,
.b-angular-scheduler-container {
    flex : 1;
}

.demo-app {
    flex : 1;
}
