:root {
    --border-color    : var(--b-border-7);
    --thumb-min-width : 204px;
    --body-background : var(--b-neutral-100);
}

.b-theme-visby-dark,
.b-theme-stockholm-dark,
.b-theme-svalbard-dark,
.b-theme-material3-dark {
    color-scheme : dark;
}

.b-theme-material3-light,
.b-theme-material3-dark {
    .framework-tab {
        border-radius : var(--b-widget-border-radius);
    }
}

#outer {
    display  : flex;
    overflow : hidden !important;
    flex     : 1;
}

#sidebar {
    border-inline-end : 1px solid var(--border-color);

    width             : 18em;
}

#versionId {
    font-size           : .7em;
    margin-inline-start : 1.5em;
}

[data-ref="themeCombo"] {
    margin-top : 1.5em;
}

.framework-selector {
    flex-direction : column;
    width          : 100%;
    height         : auto !important;
    gap            : 0.5em;
}

.b-button.framework-tab {
    gap                  : 1em;
    width                : 100%;
    padding              : .5em;
    justify-content      : flex-start;

    color                : var(--b-text-1);

    --b-badge-height     : 2.2em;
    --b-badge-background : var(--b-primary-95);
    --b-badge-color      : var(--b-primary-30);

    i {
        background-size     : contain;
        background-position : center;
        background-repeat   : no-repeat;
        width               : 2em;
        height              : 2em;
        opacity             : 1;
        transition          : filter 0.2s, opacity 0.2s;
        border-radius       : .2em;
        display             : grid;
        place-items         : center;

        &.js {
            background-image : url(logo/js.svg);
        }

        &.react {
            background-image : url(logo/react.svg);
        }

        &.vue {
            background-image : url(logo/vue.svg);
        }

        &.angular {
            background-image : url(logo/angular.svg);
        }

        &.fa::before {
            font-size : 1.6em;
        }
    }

    &::after {
        transition        : all .2s;
        inset-inline-end  : .5em;
        inset-block-start : unset;
    }

    &:hover,
    &.b-pressed {
        --b-badge-background : transparent;
        --b-badge-color      : var(--b-text-1);
    }
}

.thumb-size {
    width : 100%;

    .b-button {
        flex : 1;
    }

    .small-thumb i {
        font-size : .75em;
    }

    .large-thumb i {
        font-size : 1.25em;
    }
}

.b-watermark {
    display : none;
}

#browser {
    flex                       : 1;
    -webkit-overflow-scrolling : touch;
    overflow-y                 : scroll;
    overflow-x                 : clip;
}

.group-header {
    position      : sticky;
    top           : 0;
    background    : var(--body-background);
    z-index       : 1;
    padding       : 1em 0;
    color         : var(--b-neutral-20);
    border-bottom : 1px solid var(--border-color);
    display       : flex;
    align-items   : center;
    /* To avoid hovered item bleeding through the header */
    box-shadow    : .5em 0 0 0 var(--body-background), -.5em 0 0 0 var(--body-background);

    a {
        position         : absolute;
        inset-inline-end : 0;
        font-size        : .7em;
        color            : #888;
        font-weight      : 400;

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

.tip-folder {
    margin-top : .5em;

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

a {
    text-decoration : none;
}

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

p:last-child {
    margin-bottom : 0;
}

#scroller {
    padding               : 0 2em 2em 2em;
    display               : grid;
    grid-gap              : 2em;

    grid-template-columns :repeat(auto-fit, minmax(var(--thumb-min-width), 1fr));

    &.medium-thumb {
        --thumb-min-width : 312px;
    }

    &.large-thumb {
        --thumb-min-width : 384px;
    }

    h2 {
        grid-column : 1 / -1;
        margin      : 0;
        font-size   : 1.5em;
        font-weight : 500;
    }
}

.example {
    cursor            : pointer;
    position          : relative;
    scroll-margin-top : 6em;
    overflow          : clip;

    background        : var(--b-neutral-100);
    border            : 1px solid var(--border-color);
    border-radius     : var(--b-widget-border-radius-large);
    color             : var(--b-widget-color);

    transition        : all 0.2s;
    @media (max-width : calc(512px - 4em)) {
        max-width : calc(100vw - 4em);
    }

    &.popular {
        background : var(--b-primary-95);
    }

    &.new {
        --b-primary : var(--b-color-deep-orange);
        background  : var(--b-primary-95);
    }

    &.updated {
        --b-primary : var(--b-color-amber);
        background  : var(--b-primary-95);
    }

    &.updated .title:after,
    &.new .title:after {
        content             : 'new';
        display             : inline-block;
        color               : #fff;
        margin-inline-start : .5em;
        padding             : 0.2em 0.4em 0.3em 0.4em;
        border-radius       : .2em;
        font-size           : .7em;
        height              : 1.8em;
        background          : var(--b-primary-50);
    }

    &.updated .title:after {
        content : 'updated';
    }

    .text {
        flex : 1;
    }

    .image {
        transition       : all 0.2s;
        display          : flex;
        flex-flow        : column nowrap;
        background-color : var(--b-neutral-97);
        border-bottom    : 1px solid var(--border-color);
    }

    img {
        aspect-ratio : calc(1024 / 768);
        transition   : all 0.2s;
    }

    i {

        &.popular {
            color               : var(--b-primary);
            margin-inline-start : auto;
        }
    }

    .contents {
        display        : flex;
        flex-direction : column;
        padding        : 1em;
        gap            : .5em;
    }

    .title {
        display             : flex;
        cursor              : pointer;
        -webkit-user-select : text;
        user-select         : text;
        font-size           : 14px;
        font-weight         : 600;
    }

    .versions {
        display        : flex;
        flex-direction : row;
        gap            : .25em;
    }

    .version {
        font-size     : .7em;
        opacity       : 0.7;
        width         : max-content;
        padding       : 0.15em 0.5em;
        border-radius : 5px;

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

    .thin {
        background    : var(--b-primary-90);
    }

    .description {
        display            : -webkit-box;
        -webkit-box-orient : vertical;
        -webkit-line-clamp : 4;
        overflow           : hidden;
        font-size          : .9em;
        line-height        : 1.5;

        color              : var(--b-text-3);
    }

    .overlay {
        position            : absolute;
        inset-inline-start  : 1em;
        top                 : 1em;
        font-size           : 1em;
        color               : #fff;
        width               : 4em;
        height              : 4em;
        background-color    : #fff;

        border-radius       : 50%;
        background-size     : 3em;
        background-repeat   : no-repeat;
        background-position : center;

        &.angular {
            background-color : hsl(347deg 98% 90%);
            background-image : url('./logo/angular.svg');
            background-size  : 2.6em;
        }

        &.dotnet {
            background-image : url('./logo/dotnet.svg')
        }

        &.extjs {
            background-image : url('./logo/sencha.svg')
        }

        &.ionic {
            background-image : url('./logo/ionic.svg')
        }

        &.php {
            background-image : url('./logo/php.svg');
            background-color : var(--b-neutral-95);
        }

        &.react {
            background-color : hsl(189deg 100% 90%);
            background-image : url('./logo/react.svg')
        }

        &.sharepoint {
            background-image : url('./logo/sharepoint.svg')
        }

        &.salesforce {
            display : none;
        }

        &.vue {
            background-color    : hsl(153deg 48% 90%);
            background-image    : url('./logo/vue.svg');
            background-size     : 2.6em;
            background-position : 50% 60%;
        }

        &.webpack {
            background-image : url('./logo/webpack.svg')
        }
    }

    &:hover {
        translate  : 0 -2px;
        box-shadow : var(--b-elevation-2);
    }

    &.b-focused {
        outline        : var(--b-widget-focus-outline-width) dashed var(--b-widget-focus-outline-color);
        outline-offset : 5px;
    }
}

.b-demo-unavailable {
    --b-panel-header-gap : 0.5em;
}

.b-tooltip {
    ul {
        padding : 0 1.5em;

        li {
            white-space : nowrap;
        }
    }
}

@media (max-width : 600px) {
    #outer {
        flex-direction : column;
    }

    #sidebar {
        width : 100%;

        .b-panel-content {
            flex-direction : row;
        }
    }

    [data-ref="framework"] {
        flex-direction : row;
        width          : auto;
    }

    .b-button.framework-tab {
        width : auto;

        label {
            display : none;
        }
    }

    .b-button.framework-tab::after {
        content : none;
    }

    [data-ref="themeCombo"] {
        margin-top          : 0;
        width               : 14em;
        margin-inline-start : auto;
    }

    [data-ref="thumbSize"],
    [data-ref="primaryColor"],
    [data-ref="newDemos"],
    [data-ref="filterField"],
    [data-ref="jumpTo"] {
        display : none;
    }

    .group-path {
        display : none;
    }

    #scroller .group-header {
        font-size : 1em;
    }
}

@media (max-width : 500px) {
    #sidebar {
        font-size : .9em;
    }
}

@media (max-width : 450px) {
    #sidebar {
        font-size : .8em;
    }
}

iframe[name=aweberFrame] {
    display : none;
}

.demo-header {
    z-index    : 21;
    min-height : 39px;
}