:root {
    --resources-padding        : 2rem;
    --resource-controls-height : 0px;
}

body {
    background-color : var(--color-grey-light);
}

.resources-auth-hint-bg {
    display         : none;
    backdrop-filter : blur(8px) grayscale(20%) hue-rotate(348deg) brightness(0.6);
    z-index         : 10;
    position        : fixed;
    inset           : 0;
    justify-content : center;
    align-items     : center;
    overflow-y      : auto;
    padding         : var(--var-panel-padding);

    .resources-auth-hint-container {

        background-color : white;
        padding          : var(--var-panel-padding);
        border-radius    : var(--var-panel-border-radius);
        box-shadow       : 0 2px 24px 0 rgba(0, 0, 0, 0.2);
        display          : flex;
        flex-direction   : column;
        gap              : 2rem;
        align-items      : center;

        .resources-auth-hint-text {

        }

        .resources-auth-hint-login-button {
            --size                : 64px;

            font                  : var(--font-button);
            font-feature-settings : var(--font-features);
            height                : var(--size);
            border-radius         : calc(var(--size) / 2);
            color                 : black;
            padding-inline        : 40px;
            background-color      : var(--color-itp-green);
            display               : flex;
            align-items           : center;
            text-wrap             : nowrap;
        }
    }
}

.resources-bg {
    --header-height  : var(--var-navbar-height);
    --margin         : 2rem;

    height           : 100dvh;
    background-color : var(--color-grey-light);
    padding-block    : var(--margin);

    .resources-container {
        --controls-padding : 1rem;
        
        display            : flex;
        flex-direction     : column;
        position           : relative;
        height             : calc(100dvh - var(--margin) * 2);
        background-color   : white;
        max-width          : var(--var-resources-width);
        margin-inline      : auto;
        border-radius      : var(--var-panel-border-radius);
        box-shadow         : 0 2px 24px -4px rgba(0, 0, 0, 0.1);

        .controls {
            z-index          : 1;
            position         : absolute;
            top              : var(--controls-padding);
            left             : var(--controls-padding);
            width            : calc(100% - var(--controls-padding) * 2);
            background-color : rgba(255, 255, 255, 0.4);
            backdrop-filter  : var(--var-glass-filter);

            border-radius    : calc(var(--var-panel-border-radius) - var(--controls-padding));
            border           : 1px solid var(--color-grey-light-bright);
            box-shadow       : 0 2px 24px -4px rgba(0, 0, 0, 0.1);

            .header {
                height          : var(--header-height);
                padding-block   : 12px;
                padding-right   : 3rem;
                padding-left    : 2rem;
                display         : flex;
                align-items     : center;
                justify-content : space-between;
                gap             : 12px;

                .header-title {
                    text-wrap : nowrap;
                }

                .header-nav {
                    display : flex;
                    gap     : 2rem;
                }
            }

            .filters {
                display        : flex;
                gap            : 0.8rem;
                padding-inline : 1rem;
                padding-bottom : 1rem;
                flex-wrap      : wrap;

                .filter-btn {
                    --filter-btn-height   : 24px;

                    height                : var(--filter-btn-height);
                    font                  : var(--font-tag-label);
                    font-feature-settings : var(--font-features);
                    padding-inline        : 1.2rem;
                    border-radius         : calc(var(--filter-btn-height) / 2);
                    background-color      : var(--color-navbar-hover);
                    color                 : var(--color-grey-black);

                    cursor                : pointer;
                    transition            : background-color 0.1s, color 0.1s;
                    align-content         : center;
                    text-wrap             : nowrap;
                    overflow              : hidden;
                    user-select           : none;

                    &:not(.is-active):hover {
                        background-color : var(--color-grey-light);
                    }
                }

                .is-active {
                    background-color : black;
                    color            : white;
                }
            }
        }

        .resources {
            overflow-y     : scroll;
            font           : var(--font-small);
            display        : flex;
            flex-direction : column;
            gap            : var(--resources-padding);
            padding-top    : calc(var(--controls-padding) + var(--resource-controls-height) + var(--resources-padding));
            padding-bottom : var(--resources-padding);
            padding-inline : var(--resources-padding);
        }

        [data-type="product-description"] .resource-tag,
        .filters .filter-btn[data-filter="product-description"].is-active {
            color            : #229c9c;
            background-color : #d2fef0;
        }

        [data-type="language-specific"] .resource-tag,
        .filters .filter-btn[data-filter="language-specific"].is-active {
            color            : #b58826;
            background-color : #f9efcc;
        }

        [data-type="manual"] .resource-tag,
        .filters .filter-btn[data-filter="manual"].is-active {
            color            : #2078e8;
            background-color : #dbf4ff;
        }

        [data-type="setup"] .resource-tag,
        .filters .filter-btn[data-filter="setup"].is-active {
            color            : #d84868;
            background-color : #fad9d1;
        }

        [data-type="beta-version"] .resource-tag,
        .filters .filter-btn[data-filter="beta-version"].is-active {
            color            : #9258d8;
            background-color : #ece0ff;
        }

        [data-type="other"] .resource-tag {
            color            : #848484;
            background-color : #e8e8e8;
        }
    }
}

@media (max-width : 400px) {
    .resources-bg {
        .resources-container {
            .controls {
                .header {
                    padding-right : 2rem;
                    padding-left  : 1rem;
                }
            }
        }
    }
}