@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');.attribution[data-astro-cid-ma42rjro]{display:none}

    @layer variables, reset, typography, layout, components;

    @layer variables {
        [data-theme="light"] {
            --clr-gradient: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);

            --clr-bgrd: #FFF;
            --clr-text: #000;

            --clr-border: rgb(221, 221, 221, 0.9);

            --icon-fill: hsl(210 10% 30%);
            --icon-fill-hover: hsl(210 10% 15%);

            --clr-accent: rgb(200, 35, 26);
            --clr-accent-text: #fff;

            --clr-surface-1: var(--clr-bgrd);
            --clr-surface-2: hsl(from var(--clr-text) h s l / 10%);

            --clr-bgrd-checkbox: hsl(from var(--clr-bgrd) h s 80% / 100%);
            --clr-frgd-checkbox: var(--clr-bgrd);
        }

        [data-theme="dark"] {
            
            --clr-gradient: linear-gradient(180deg, #040918 0%, #091540 100%);

            --clr-bgrd: #000;
            --clr-text: #fff;

            --clr-border: #444;

            --clr-icon-fill: hsl(210 10% 70%);
            --clr-icon-fill-hover: hsl(210 15% 90%);

            --clr-accent: hsl(from rgb(240, 80, 80) h 60% l / 100%);
            --clr-accent-text: #fff;

            --clr-surface-1: hsl(from var(--clr-bgrd) h s 15% / 70%);
            --clr-surface-2: hsl(from var(--clr-text) h s l / 10%);

            --clr-bgrd-checkbox: hsl(from var(--clr-bgrd) h s 30% / 100%);
            --clr-frgd-checkbox: var(--clr-text);
        }
    }

    @layer reset {
        * {
            padding: 0;
            margin: 0;
        }

        *, *::before, *::after {
            box-sizing: inherit;
        }

        html {
            box-sizing: inherit;
        }
    }

    @layer typography {

        :root {
            --fs-body: clamp(0.75rem, 0.6667rem + 0.4167vw, 1rem);
            --fs-heading-6: clamp(0.8438rem, 0.725rem + 0.5938vw, 1.2rem);
            --fs-heading-5: clamp(0.9492rem, 0.7856rem + 0.818vw, 1.44rem);
            --fs-heading-4: clamp(1.0679rem, 0.8478rem + 1.1002vw, 1.728rem);
            --fs-heading-3: clamp(1.2014rem, 0.9106rem + 1.4537vw, 2.0736rem);
            --fs-heading-2: clamp(1.3515rem, 0.9726rem + 1.8947vw, 2.4883rem);
            --fs-heading-1: clamp(1.5205rem, 1.032rem + 2.4425vw, 2.986rem);
        }

        html {
            font-family: 'Noto Sans', sans-serif;
            font-size: var(--fs-body);
        }

        h1, h2, h3, h4, h5, h6 {
            line-height: 1.1;
            margin-bottom: 0.3em;

            &:where(:not(:first-child)) {
                margin-top: 1em;
            }
        }

        h1 { font-size: var(--fs-heading-1); }
        h2 { font-size: var(--fs-heading-2); }
        h3 { font-size: var(--fs-heading-3); }
        h4 { font-size: var(--fs-heading-4); }
        h5 { font-size: var(--fs-heading-5); }
        h6 { font-size: var(--fs-heading-6); }

        p, ul, ol {
            margin-bottom: 1.5em;
        }
    }

    @layer layout {

        body {
            min-height: 100vh;
            background: var(--clr-gradient);
            color: var(--clr-text);
        }

        .page {
            padding: 2em;
            max-width: 140ch;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--clr-surface-1);
            padding: 0.8em 1em;
            border: 1px solid var(--clr-border);
            border-radius: 1em;
            box-shadow: 0 0.2em 0.2em 0 rgb(0, 0, 0, 0.1);
            margin-bottom: 4em;

            & > * {
                margin: 0;
            }

            h2 {
                text-indent: -200vw;
                width: 200px;
                background-image: url('/challenge/browser-extension-manager/assets/images/logo.svg');
                background-size: contain;
                background-position: left center;
                background-repeat: no-repeat;
            }

            button {
                display: block;
                width: 3em;
                height: 3em;
                border: none;
                text-indent: -200vw;
                background: var(--clr-surface-2);
                border-radius: 0.5em;
                background-image: url('/challenge/browser-extension-manager/assets/images/icon-moon.svg');
                background-size: 50%;
                background-position: center;
                background-repeat: no-repeat;
                cursor: pointer;
            }
        }

        [data-theme="dark"] .page-header button {
            background-image: url('/challenge/browser-extension-manager/assets/images/icon-sun.svg');
        }
    }

    @layer components {

        .listing {

            header {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 2em;

                :is(h1, h2, h3) {
                    margin: 0;
                    line-height: 1;
                }
            }

            .filter {
                display: flex;
                gap: 1em;

                label {
                    box-shadow: 0 0.2em 0.2em 0 rgb(0, 0, 0, 0.1);
                }

                input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    visibility: hidden;
                }
            }

            input + label {
                background-color: var(--clr-surface-1);
            }

            input:checked + label {
                background-color: var(--clr-accent);
                color: var(--clr-accent-text);
            }

            &:has(#extensions-list-filter-all:checked) {

            }

            &:has(#extensions-list-filter-active:checked) {
                .extension:has(.state:not(:checked)) {
                    display: none;
                }
            }

            &:has(#extensions-list-filter-inactive:checked) {
                .extension:has(.state:checked) {
                    display: none;
                }
            }
        }

        .list {
            --size-column-min: 36ch;

            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--size-column-min), 1fr));
            gap: 1em;
        }

        .extension {
            display: flex;
            flex-wrap: wrap;
            padding: 1.5em;
            gap: 1rem;
            border-radius: 1.2em;
            background: var(--clr-surface-1);
            border: 1px solid var(--clr-border);
            box-shadow: 0 0.2em 0.2em 0 rgb(0, 0, 0, 0.1);

            & > * {
                flex: 0 1 auto;
            }

            .media {

            }

            .content {
                flex: 1 1 50%;

                p {
                    opacity: 0.7;
                }
            }

            .actions {
                flex-basis: 100%;
                margin-top: auto;
                padding-top: 1em;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .button {
            display: block;
            border: 1px solid var(--clr-border);
            padding: 0.5em 1em;
            border-radius: 2em;
            cursor: pointer;
            background: none;
            color: var(--clr-text);

            &:hover {
                background: #C00;
                color: #fff;
            }
        }

        input[type="checkbox"] {
            appearance: none;
            display: flex;
            align-items: center;
            width: 3.2em;
            height: 1.5em;
            border-radius: 2em;
            padding: 0.2em;
            position: relative;
            background: var(--clr-bgrd-checkbox);

            &::before {
                --size-width: 1.3em;
                display: block;
                content: '';
                width: var(--size-width);
                height: var(--size-width);
                background: var(--clr-frgd-checkbox);
                border-radius: 50%;
                position: absolute;
                left: 0.3em;
                transition: left 0.2s ease-in-out;
            }

            &:checked {
                --clr-bgrd-checkbox: var(--clr-accent);

                &::before {
                    left: calc( 100% - var(--size-width) - 0.2em );
                }
            }
        }
    }