:root {
    --thumbnail-style: square;
    --icon-size: 2rem;
    --icon-size: 1.5rem;
    --icon-color: var(--ca-10);
}

.icon {
    height: var(--icon-size);
    width: var(--icon-size);
}

/* DEBUG */
/* input {
    display: initial;
} */

body {
    --sensitive-content-filter: blur(10px);
    --moderate-gore-content-filter: blur(10px);
    --mod-gore-plus-sens-cont-filter: blur(10px);
    --heavy-gore-content-filter: blur(10px);
    --heavy-gore-plus-sens-cont-filter: blur(10px);
    /* --sensitive-content-filter: unset;
    --moderate-gore-content-filter: unset;
    --mod-gore-plus-sens-cont-filter: blur(10px);
    --heavy-gore-content-filter: unset;
    /* --heavy-gore-plus-sens-cont-filter: unset; */
    /* --heavy-gore-plus-sens-cont-filter: blur(10px);  */
    --both-content-filter: blur(10px);
    --tooltip-visibility: unset;
}

body:has(#thm-sw:checked) {
    color-scheme: light;
}

/* show sens content, hide gore */
/* body:has(#sensitive-content-toggle:checked):has(#gore-content-toggle:not(:checked)) {
{
    --sensitive-content-filter: unset;
    --tooltip-visibility: none;
} */

/* body:has(#sensitive-content-toggle:checked)
{
    --sensitive-content-filter: blur(10px);
    --tooltip-visibility: none;
} */

/* show gore, hide sens content */
/* body:has(#gore-content-toggle:checked):has(#sensitive-content-toggle:not(:checked)) {

    --moderate-gore-content-filter: unset;

    .tooltip:has(+ .moderate-gore-content-filter) {
        --tooltip-visibility: none;
    }
} */
/* hide gore */
/* body:has(#heavy-gore-content-toggle:checked) {
    --heavy-gore-content-filter: blur(10px);

    .tooltip:has(+ .heavy-gore-content-filter) {
        --tooltip-visibility: none;
    }
}
body:has(#moderate-gore-content-toggle:checked) {
    --moderate-gore-content-filter: blur(10px);

    .tooltip:has(+ .moderate-gore-content-filter) {
        --tooltip-visibility: none;
    }
} */

/* hide gore + sens */
/* TO-DO: ISNT WORKING!!! KILLS MYSELF */
/* body:has(#heavy-gore-content-toggle:checked):has(#sensitive-content-toggle:checked) { */
/* body:has(#heavy-gore-content-toggle:not(:checked)):has(#sensitive-content-toggle:not(:checked)),
body:has(#moderate-gore-content-toggle:not(:checked)):has(#sensitive-content-toggle:not(:checked)) */
/* body:has(:is(#heavy-gore-content-toggle:not(:checked),#sensitive-content-toggle:not(:checked)))  */
/* body:has(#heavy-gore-content-toggle:not(:checked))
body:has(#sensitive-content-toggle:not(:checked))  */
/* {
    --heavy-gore-plus-sens-cont-filter: unset;

    .tooltip:has(+ .heavy-gore-plus-sens-cont-filter) {
        --tooltip-visibility: none;
    }
}
body:has(#moderate-gore-content-toggle:checked) {
    --moderate-gore-content-filter: blur(10px);

    .tooltip:has(+ .moderate-gore-content-filter) {
        --tooltip-visibility: none;
    }
} */

/* show both */
/* body:has(#gore-content-toggle:checked):has(#sensitive-content-toggle:checked) { */
/* body:has(#moderate-gore-content-toggle:checked):has(#sensitive-content-toggle:checked),
body:has(#heavy-gore-content-toggle:checked):has(#sensitive-content-toggle:checked) 
{
    --both-content-filter: unset;
    --tooltip-visibility: none;
    --gore-content-filter: unset;
    --sensitive-content-filter: unset;
} */



.default-lightbox {
    /* max-height: 90dvh; */
    /* margin:3rem auto; */
    /* width: auto; */
    height: unset;
    color: var(--ca-30);
    /* border: none; */
    /* background: #00000081;
        backdrop-filter: blur(15px); */
    /* background: hsl(from var(--c-a-100) h s l / 0.2); */
    background: radial-gradient(at center top, hsl(from var(--ca-100) h s l / 0.9), hsl(from var(--ca-110) h s l / 0.9));
    position: relative;
    inset: 0;
    overflow: unset;
    text-align: center;
    --lightbox-height: 90dvh;
    --lightbox-width: 90dvw;
    transition-behavior: allow-discrete;

    /* border: 0.2rem solid #ffffff6c; */
    border: 2px solid var(--ca-a1);
    box-shadow: 0px 0px 2em rgb(from var(--c-a) r g b / 0.5), inset 0px 0px 5em rgb(from var(--ca-a1) r g b / 0.3);
    /* box-shadow: 0px 0px 2em #ffffff6c; */
    --transition-delay: 2s;

    /* backdrop-filter: blur(5px); */
    &::backdrop {
        backdrop-filter: blur(5px);
    }

    &:popover-open {
        anchor-name: --lightbox;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        height: var(--lightbox-height);
        /* width: var(--lightbox-width); */
        max-width: var(--lightbox-width);
        /* max-width: min(max-content, var(--lightbox-width)); */
        margin: auto;

        --link-padding: 0.5rem;
        container-name: popover;
        /* transition: height 0.3s; */
        transition: opacity 0.3s;
        /* transition-duration: 0.3s; */
        /* o:h needed to hide the square edges of the scrollbar when expanded */
        overflow: hidden;
        border-radius: 0.5rem;

        a {
            color: var(--ca-a2);
            transition: color 0.3s;

            &:hover,
            &:focus-visible {
                color: light-dark(var(--ca-a2-dark), var(--ca-a2-light));
                --icon-color: light-dark(var(--ca-a2-dark), var(--ca-a2-light));
                outline: none;
            }

            &:active {
                color: var(--ca-a2-dark);
            }
        }




        &::before {
            position: absolute;
            content: '';
            inset: 0;
            clip-path: ellipse(150% 100% at 50% 150%);
            /* mask-image: linear-gradient(black, transparent); */
            background: linear-gradient(rgba(255, 255, 255, 0.048), transparent);

            z-index: -1;
        }

        &::after {
            position: absolute;
            inset: 0;
            content: '';
            background-image: repeating-conic-gradient(transparent 0% 25%, var(--ca-50) 0% 50%);
            background-repeat: repeat;
            background-position: 0 0, 32px 32px;
            background-size: 3em 3em;
            background-color: transparent;
            mask-image: linear-gradient(-45deg, black 0%, transparent 20%, transparent 70%, black);
            z-index: -2;
            opacity: 0.1;

        }

        &.lb-full {
            @media (orientation:landscape) {
                grid-template-columns: 2fr 1fr;
                grid-template-columns: 1fr max-content;
                /* grid-template-columns: fit-content 1fr; */
                grid-template-columns: 1fr 1fr;
                grid-template-columns: max-content minmax(auto, 40ch);
                grid-template-columns: 1fr minmax(auto, 20rem);
                grid-template-columns: minmax(10rem, 1fr) minmax(auto, 20rem);
                /* grid-template-columns: 2fr 1fr; */
                /* grid-template-columns: repeat(2, max-content); */
                grid-template-rows: 1fr;
                transition: grid-template-columns var(--transition-delay) cubic-bezier(0, 1, 0, 1) 0 allow-discrete;


            }

            @media (orientation:portrait) {
                grid-template-columns: 1fr;
                grid-template-rows: 2fr 1fr;
            }

        }

        &.lb-minimal {
            grid-template-columns: 1fr;
            /* @media (orientation:landscape) {
                grid-template-columns: 1fr;
                grid-template-rows:fit-content;
            } */

            /* @media (orientation:portrait) {
                grid-template-columns: 1fr;
                grid-template-rows: 2fr 1fr;
            } */

        }

        &.lb-img-only {
            height: max-content;
            max-height: var(--lightbox-height);
            &:focus-within{
                outline: 5px solid var(--ca-a2);
            }

            img{
                margin: auto;
            }

            &.full-height {
                align-items: start;
                overflow: auto;
                display: flex;

                .wrapper {
                    height: fit-content;
                    margin: auto;
                    /* align-self: center; */
                }

                img {
                    height: auto;
                }
            }
        }

        /* type of variable being changed has to be the same before and after. so no going from max-content to zero. fucking hell */
        &:has(.expand-button-input:checked) {
            --transition-delay: inherit;

            &.lb-full {
                @media (orientation:landscape) {
                    /* grid-template-columns: max-content 0fr; */
                    grid-template-columns: max-content 1fr;
                    grid-template-columns: 3fr max-content;
                    grid-template-columns: 3fr 0fr;
                }

                @media (orientation: portrait) {
                    grid-template-columns: 1fr;
                    grid-template-rows: 3fr 0fr;
                }

            }

            & .side {

                /* display: none; */
                /* width: 0%; */
                @media (orientation:landscape) {
                    transform: translateX(250%);
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto 1fr auto;
                }

                @media (orientation: portrait) {
                    transform: translateY(250%);
                    grid-template-columns: 1fr;
                    grid-template-rows: 3fr 0fr;
                }

                &>* {
                    grid-column: 1;
                }
            }

            & .img-wrapper img {
                max-height: calc(var(--lightbox-height) * 5);
                /* max-width: calc(var(--lightbox-width) - ((var(--div-padding)*2) + (var(--link-padding)*2) + (var(--border-size)*2) + (var(--img-wrapper-padding) * 2))); */
            }
        }
    }



    & .img-wrapper {
        --img-wrapper-padding: 1em;
        --expand-button-padding: 0.5em;
        --expand-button-border: 2px;
        --expand-button-margin: 0.5em;
        --fullres-button-top-margin: 0.5em;
        scrollbar-color: var(--ca-a2) var(--ca-70);
        padding: var(--img-wrapper-padding);
        overflow: auto;
        max-height: 100%;
        scrollbar-gutter: stable;

        border-radius: 0.5rem;
        /* display: grid;
         grid-template-rows: minmax(minmax(0, auto), var(--lightbox-height));
         grid-auto-flow: row;
         place-content: center;
         place-items: center; */

        &:focus-visible {
            outline: var(--ca-a2) solid 2px;
        }

        direction: rtl;

        & * {
            direction: ltr;
        }

        @media (orientation: portrait) {
            border-image: linear-gradient(90deg, transparent 10%, var(--c-50) 50%, transparent 90%) 30;
            border-bottom: 2px solid;
        }

        &>.image {
            --div-padding: 1rem;
            --border-size: 2px;
            padding: var(--div-padding);
            width: fit-content;
            /* height: calc(100% - (var(--link-padding) + var(--icon-size))); */
            background-color: hsl(from var(--ca-90) h s l / 0.9);
            border: var(--border-size) solid hsl(from var(--ca-70) h s l / 0.5);
            /* max-height: fit-content; */
            margin: auto;
            /* height: 100%; */
            border-radius: 5px;


            /* display: flex;
             flex-direction: column;
             max-height: var(--lightbox-height); */
            /* height: calc(var(--lightbox-height) - ((var(--div-padding)*2) + (var(--link-padding)*2) + var(--icon-size) + (var(--border-size)*2) )); */

            &:not(:last-child) {
                margin-bottom: var(--img-wrapper-padding);
            }

            & img {
                /* max-height: calc(var(--lightbox-height) - (1rem + var(--div-padding) + var(--link-padding) + var(--icon-size))); */
                max-height: calc(var(--lightbox-height) - ((var(--div-padding)*2) + (var(--link-padding)*2) + var(--icon-size) + (var(--border-size)*2) + (var(--img-wrapper-padding) * 2)));

                &:first-of-type {

                    max-height: calc(var(--lightbox-height) - (1rem + (var(--expand-button-padding) * 2) + (var(--expand-button-margin)*2) + var(--fullres-button-top-margin) + (var(--div-padding)*2) + (var(--link-padding)*2) + var(--icon-size) + (var(--border-size)*2) + (var(--img-wrapper-padding) * 2)));
                    max-height: calc(var(--lightbox-height) - (1rem + (var(--expand-button-padding) * 2) + (var(--expand-button-margin)*2) + var(--fullres-button-top-margin) + (var(--div-padding)*2) + (var(--link-padding)*2) + var(--icon-size) + (var(--border-size)*2) + (var(--img-wrapper-padding) * 2)));
                }

                /* max-height: calc(100% - ((var(--link-padding)*2) + var(--icon-size) )); */
                margin: auto;
                transition: max-height 1.5s cubic-bezier(0, 1, 0, 1);
                transition: max-height var(--transition-delay) cubic-bezier(0, 1, 0, 1);
                /* transition-property: max-height;
                 transition-duration: 1s;
                 transition-behavior: allow-discrete; */
                /* height: 100%; */
            }
        }

        & a {
            padding: var(--link-padding);
            align-items: center;
            display: flex;
            gap: 0.5rem;
            border-radius: inherit;
            background: var(--c-a1-dark);
            background: hsl(from var(--ca-a2) h s l / 0.7);
            color: var(--ca-20);
            width: fit-content;
            margin: var(--fullres-button-top-margin) auto auto auto;
            text-decoration: none;
            /* border: 2px solid hsl(from var(--ca-a2) h s l / 0.7); */
            --icon-color: var(--c-10);

            transition: box-shadow 0.3s;
            color: var(--c-10);

            &:hover,
            &:focus-visible {
                outline: 0.13em solid rgb(from var(--c-10) r g b / 0.9);
                box-shadow: 0em 0em 2em hsl(from var(--ca-a2-dark) h s l / 0.7);
                text-shadow: 0px 0px 1em var(--c-10);
            }

            &:active {
                background: hsl(from var(--ca-a2-dark) h s l / 0.7);
            }

        }

        /* & .expand-button-input {
             display: block;
         } */

        & .expand-button {
            padding: var(--expand-button-padding);
            display: block;
            border: var(--expand-button-border) solid var(--ca-50);
            background-color: hsl(from var(--ca-80) h s l / 0.95);
            background: linear-gradient(to bottom, var(--ca-80), var(--ca-70));
            border-radius: 5px;
            color: var(--ca-10);
            position: sticky;
            top: 0;
            /* margin-bottom: var(--expand-button-margin); */
            margin: 0 0.5em var(--expand-button-margin) 0.5em;
            z-index: 2;
            cursor: pointer;
            isolation: isolate;
            transition: all 0.3s;
            font-family: var(--font-d2);
            font-weight: bold;
            line-height: 1;

            /* display: flex;
            place-content: center;
            place-items: center;
            gap: 1rem;
            --icon-size:1.5rem; */
            overflow: hidden;

            & svg {
                position: absolute;
                inset: auto auto -60% calc(50% - 5em);
                --icon-size: 4rem;
                opacity: 0.2;
            }

            &:hover,
            &:has(.expand-button-input:focus-visible) {
                border-color: var(--ca-a2);
                text-shadow: 0px 0px 0.5em var(--ca-a2);
                box-shadow: 0px 0px 1em var(--ca-a2);
                background-color: hsl(from var(--ca-60) h s l / 1);
            }

            &:active {
                text-shadow: 0px 0px 0.5em var(--ca-a2-dark);
                box-shadow: 0px 0px 1em var(--ca-a2-dark);
                background-color: hsl(from var(--ca-70) h s l / 0.95);
            }

        }

        & .expand-button-input {
            position: absolute;
            display: unset;
            inset: 0;
            opacity: 0;
            z-index: -1;
            cursor: pointer;
        }

    }


    & .side {
        overflow: auto;
        padding: 1rem;
        display: grid;
        width: max-content;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;

        /* transition-property: width, display;
         transition-duration: 1.5s; */
        /* transition: width var(--transition-delay) cubic-bezier(0, 1, 0, 1); */
        /* transition: transform var(--transition-delay) cubic-bezier(0, 1, 0, 1); */
        transition: transform var(--transition-delay) cubic-bezier(0, 1, 0, 1) allow-discrete;

        &:focus-visible {
            outline: var(--ca-a2) solid 2px;
        }


        @media (orientation: landscape) {
            transform: translateX(0%);
            border-image: linear-gradient(transparent 10%, var(--c-50) 50%, transparent 90%) 30;
            border-left: 2px solid;
        }

        @media (orientation: portrait) {
            transform: translateY(0%);
            /* border-image: linear-gradient(90deg, transparent 10%, var(--c-50) 50%, transparent 90%) 30;
             border-top: 2px solid; */
        }

        &>* {
            padding: 1rem;

        }

        & .date-info {
            padding: 0;
            grid-column: span 2;
            display: flex;
            flex-wrap: wrap;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, auto);


            /* &:has(&:nth-child(2)) .time-made::before {
                border-right: 2px solid var(--c-50);
            } */
        }

        & .elsewhere {
            /* border-top: 2px solid;
            border-image: linear-gradient(90deg, transparent, var(--c-50), transparent) 30; */
            opacity: 0.5;
            padding: 0.5rem;
            flex-grow: 2;
            position: relative;
            align-content: center;

            &:nth-child(3) {
                grid-column: span 2;
            }

            &::before {
                border-top: 2px solid var(--c-50);
                mask-image: linear-gradient(90deg, transparent, black, transparent) !important;
            }

            @media (orientation: portrait) {
                /* padding: 0 0.5em 0.5em 0.5em; */
                border-top: 0;
                border-left: 2px solid;
                border-image: linear-gradient(0deg, transparent, var(--c-50), transparent) 30;

                /* &::before {
                    border-top: 0;
                    border-left: 2px solid var(--c-50);
                    mask-image: linear-gradient(transparent, black)!important;
                } */
            }
        }

        & .time-made,
        & .added-in {
            padding: 0 0.5em 0.5em 0.5em;
            opacity: 0.5;
            flex-grow: 1;
            align-content: center;
        }

        & .time-made::before,
        & .elsewhere::before,
        & .added-in::before {
            position: absolute;
            inset: 0;
            content: '';
            mask-image: linear-gradient(transparent, black);
            /* border: solid 2px var(--c-50); */
            /* border-image: linear-gradient(transparent 10%, var(--c-50) 50%, transparent 90%) 30; */
            z-index: -1;
            /* border-radius: 5px; */
        }

        & .time-made {
            /* background-color: #827ba0; */
            position: relative;

            &:only-child {
                grid-column: span 2;
            }

            /* &::before { */
            /* mask-image: linear-gradient(transparent, black); */
            /* border: solid 2px var(--c-50);
                 z-index: -1;
                 border-radius: 5px; */


            /* border-right: 1px solid var(--c-50); */
            /* } */
        }

        & .added-in {
            /* background-color: #453a72; */
            position: relative;

            &::before {
                border-left: 2px solid var(--c-50);
            }
        }

        & .description,
        & .notes {
            grid-column: span 2;
        }

        & .description {
            border-style: solid;
            border-image: linear-gradient(90deg, transparent 10%, var(--c-50) 50%, transparent 90%) 30;
            border-image-width: 2px 0px 0px 0px;
            line-height: 1.3;

            /* border-top: 2px solid;
             border-bottom: 2px solid; */
            p {
                margin: 0.5rem;
            }

            p.extra {
                color: var(--ca-60);

                p:not(.extra)+& {
                    margin-top: 1rem;
                }
            }
        }

        & .notes {
            border-style: solid;
            border-image: linear-gradient(90deg, transparent 10%, var(--c-50) 50%, transparent 90%) 30;
            border-image-width: 2px 0px 0px 0px;
            color: var(--ca-50);

            img {
                margin: 0.5rem;
            }

            &:has(p:empty) {
                display: none;
            }
        }



    }
}



@starting-style {
    .default-lightbox:popover-open {
        height: 0;
        opacity: 0;
    }
}






:has(.default-thumbnail:hover) .default-thumbnail:not(:hover),
:has(.default-thumbnail:focus-visible) .default-thumbnail:not(:focus-visible) {
    filter: brightness(0.5) saturate(0.1);
    position: relative;

}

body:has(#sensitive-content-toggle:checked) {
    --blur-toggle: unset;
}

.default-thumbnail {
    border: none;
    /* width:  200px; */
    /* overflow: hidden; */
    align-content: center;
    position: relative;
    background-color: var(--c-50);
    cursor: pointer;
    transition: 0.3s;
    border-radius: 10px;
    outline: 2px solid #ffffff31;
    /* box-shadow: inset 5px 0px 10px black;     */
    --thumb-size: 13rem;
    --icon-color: var(--c-100);
    --icon-size: 1.7em;
    --mini-thumbs-size: calc(var(--thumb-size) * 0.13);
    --thumbnail-style: square;
    overflow: hidden;
    margin: 0.5em;
    /* height: var(--thumb-size); */

    /* display: grid;
    grid-template-columns: 7fr var(--mini-thumbs-size);
    grid-template-columns: auto auto; */
    &:not(:has(img)) {
        padding: 0.5rem;
        border-radius: 0;
        background: hsl(from var(--ca-50) h s l / 0.3);
        display: block;


        /* display: inline; */
        &::before {
            content: unset;
        }
    }

    


    & .tooltip {
        display: var(--tooltip-visibility);
        position: absolute;
        background-color: var(--ca-100);
        z-index: 4;
        padding: 0.5em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.3s;
        overflow: auto;
        scrollbar-width: thin;
        max-height: 100%;
        border-radius: inherit;
    }
    @media (orientation:portrait){
        .tooltip{
            opacity: 1;
        }
    }

    & .mini-thumbs {
        /* --icon-size:calc(var(--mini-thumbs-size) * 0.8); */
        /* place-content: center; */
        position: absolute;
        inset: 0 0 0 auto;
        inset: 0 0 auto auto;
        border-top-right-radius: inherit;
        /* border-bottom-right-radius: inherit; */
        place-items: center;
        display: flex;
        flex-direction: column;
        max-width: var(--mini-thumbs-size);
        /* background-color: var(--ca-70); */
        transition: inset 0.3s, opacity 0.3s;
        max-height: 100%;
        overflow: hidden;
        z-index: 2;

        & img {
            z-index: 0;
        }

        & svg {
            /* border-top-right-radius: inherit; */
            padding: calc(var(--mini-thumbs-size) * 0.15);
            background-color: var(--ca-a1);
            width: 100%;
        }
    }

    & .tags {
        position: absolute;
        inset: auto auto 0 0;
        border-bottom-left-radius: inherit;
        border-top-right-radius: inherit;
        overflow: hidden;
        transition: opacity 0.3s, inset 0.3s;
        z-index: 5;
        display: flex;

        & svg {
            padding: 0.2em;
            background-color: var(--ca-a1);
            --icon-color: var(--ca-10);

            &.gift {
                background-color: var(--ca-a1-dark);

            }
        }
    }

    & .sensitive-content-filter,
    /* & .gore-content-filter, */
    & .moderate-gore-content-filter,
    & .mod-gore-plus-sens-cont-filter,
    & .heavy-gore-content-filter,
    & .heavy-gore-plus-sens-cont-filter,
    & .both-content-filter {
        /* & .sensitive-content-filter { */
        position: absolute;
        inset: 0;
        /* filter: var(--blur-toggle); */
        /* backdrop-filter: var(--blur-toggle); */
        z-index: 3;
        border-radius: inherit;
        pointer-events: none;
    }

    & .sensitive-content-filter {
        backdrop-filter: var(--sensitive-content-filter);
    }

    & .moderate-gore-content-filter {
        backdrop-filter: var(--moderate-gore-content-filter);
    }

    & .heavy-gore-content-filter {
        backdrop-filter: var(--heavy-gore-content-filter);
    }

    .mod-gore-plus-sens-cont-filter {
        backdrop-filter: var(--mod-gore-plus-sens-cont-filter);
    }

    .heavy-gore-plus-sens-cont-filter {
        backdrop-filter: var(--heavy-gore-plus-sens-cont-filter);
    }

    & .both-content-filter {
        backdrop-filter: var(--both-content-filter);
    }



    &::before, &::after{
        pointer-events: none;
    }
    &::before {
        position: absolute;
        content: '';
        inset: 0;
        box-shadow: inset 0 -1em 1em #00000077,
            inset 0 -0.3em 0.1em #ffffff59,
            inset 0 0.3em 0.1em #ffffff52;
        box-shadow: inset 0 -0.3em 0.3em #00000052,
            inset 0 -0.3em 0.1em #ffffff59,
            inset 0 0.3em 0.1em #ffffff52;
        border-radius: inherit;
        z-index: 4;
    }

    /* background: linear-gradient(180deg,  transparent 50%, #ffffff2d 51%, transparent 60%, #00000070); */
    /* box-shadow: inset 0em 2em 1em #ffffff41, inset 0em -2em 1em #0000003a; */
    /* clip-path: ellipse(150% 100% at 50% 150%); */
    /* &::after {
        position: absolute;
        content: '';
        inset: 0.3em;
        background: linear-gradient(180deg, transparent, #fff);
        opacity: 0.3;
        height: 50%;
        z-index: 4;
        border-radius: inherit;
        transition: opacity 0.3s;
    } */
    &::after {
        position: absolute;
        content: attr(data-day);
        font-weight: bold;
        font-family: var(--font-d2);
        inset: 0 auto auto 0;
        background: var(--ca-a1-dark);
        z-index: 4;
        padding: 0.3rem;
        border-bottom-right-radius: 10px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    &.day-visible{
        &::after{
            opacity: 1;
        }
    }

    &:hover,
    &:focus-visible {
        outline: 5px solid var(--ca-a1);


        &::after {
            /* background: linear-gradient(transparent); */
            opacity: 0;
        }

        & .tooltip {
            opacity: 1;
        }

        & .mini-thumbs {
            inset: 0 -100% 0 auto;
            opacity: 0;
        }

        & .tags {
            inset: auto auto -100% 0;
            opacity: 0;
        }

        /* &::after {
             position: absolute;
             content: '';
             inset: 0;
             background: #fff;
             transform: scale(1.1);
             z-index: 2;
             clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 70% 0, 70% 0.5em, calc(100% - 0.5em) 0.5em, calc(100% - 0.5em) 30%, 100% 30%, 100% 70%, calc(100% - 0.5em) 70%, calc(100% - 0.5em) calc(100% - 0.5em), 71% calc(100% - 0.5em), 71% 100%, 30% 100%, 0.5em calc(100% - 0.5em), 10% 70%, 0.5em 66%, 0 65%, 0 29%, 15% 29%, 15% 15%, 31% 16%, 30% 0);

         } */
    }

    &>img {
        height: var(--thumb-size);
        width: var(--thumb-size);
        margin: auto;
        /* width: 100%; */
        /* scale: 2; */
        object-fit: cover;
        border-radius: inherit;

        &.horiz-full-right {
            object-position: 100% 00%;
        }

        &.horiz-medium-right {
            object-position: 70% 00%;
        }

        &.horiz-full-left {
            object-position: 00% 00%;
        }

        &.horiz-medium-left {
            object-position: 30% 00%;
        }

        &.vert-full-bottom {
            object-position: 00% 100%;
        }

        &.vert-medium-bottom {
            object-position: 00% 70%;
        }

        &.vert-full-top {
            object-position: 00% 00%;
        }

        &.vert-medium-top {
            object-position: 00% 30%;
        }

    }
}

body:has(#thumbnail-toggle:checked), .force-fluid-thumbnails {
    & .default-thumbnail {
        display: inline-flex;
        grid-template-columns: 7fr var(--mini-thumbs-size);
        grid-template-columns: auto auto;

        &>img {
            height: unset;
            width: unset;
            object-fit: unset;
            max-height: var(--thumb-size);

        }

        &:has(.mini-thumbs) img {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    .mini-thumbs {
        position: static;
        inset: unset;
    }

    &:hover,
    &:focus-visible {
        & .mini-thumbs {
            inset: unset;
            opacity: 1;
        }
    }
}

/* body:has([id="sketch"]:checked) :is(.default-thumbnail:not(.sketch)),
body:has([id="polished"]:checked) :is(.default-thumbnail:not(.polished)) {
    visibility: hidden;
    display: none !important;
} */

/* body:has([id="all"]:checked) .default-thumbnail {
    visibility: visible;
} */

body {

    /* thumbnail sizes */
    &:has(#s15:checked) .default-thumbnail {
        --thumb-size: 15rem;
    }

    &:has(#s13:checked) .default-thumbnail {
        --thumb-size: 13rem;
    }

    &:has(#s10:checked) .default-thumbnail {
        --thumb-size: 10rem;
    }

    &:has(#s7:checked) .default-thumbnail {
        --thumb-size: 7rem;
    }

    /* tags */
    /* &:has(#tag-fanart:checked) .default-thumbnail:not(.fanart),
    &:has(#tag-gift:checked) .default-thumbnail:not(.gift),
    &:has(#tag-trade:checked) .default-thumbnail:not(.trade),
    &:has(#tag-comm:checked) .default-thumbnail:not(.comm),
    &:has(#tag-misc:checked) .default-thumbnail:not(.misc),
    &:has(#tag-gore:checked) .default-thumbnail:not(:has([href="#icon-gore"])),
    &:has(#tag-sensitive-content:checked) .default-thumbnail:not(:has([href="#icon-sensitive-content"])) {
        display: none !important;
    } */





    /* &:not(:has(.toggles *:checked)) .default-thumbnail, */
    /* &:has(#tag-gift:checked) .default-thumbnail.gift,
    &:has(#tag-trade:checked) .default-thumbnail.trade,
    &:has(#tag-gore:checked) .default-thumbnail:has([href="#icon-gore"]),
    &:has(#tag-sensitive-content:checked) .default-thumbnail:has([href="#icon-sensitive-content"]) {
        display: block !important;
    } */




    /* sort thumbnails by character */
    /* &:has(#ch-axel:checked) .default-thumbnail:not(.axel),
    &:has(#ch-daron:checked) .default-thumbnail:not(.daron),
    &:has(#ch-damien:checked) .default-thumbnail:not(.damien),
    &:has(#ch-eos:checked) .default-thumbnail:not(.eos),
    &:has(#ch-khyryte:checked) .default-thumbnail:not(.khyryte),
    &:has(#ch-kip:checked) .default-thumbnail:not(.kip),
    &:has(#ch-lucius:checked) .default-thumbnail:not(.lucius),
    &:has(#ch-naji:checked) .default-thumbnail:not(.naji),
    &:has(#ch-nyx:checked) .default-thumbnail:not(.nyx),
    &:has(#ch-rin:checked) .default-thumbnail:not(.rin),
    &:has(#ch-soot:checked) .default-thumbnail:not(.soot),
    &:has(#ch-xor:checked) .default-thumbnail:not(.xor),
    &:has(#ch-xyz:checked) .default-thumbnail:not(.xyz),
    &:has(#ch-unnamed:checked) .default-thumbnail:not(.unnamed) {
        display: none !important;

    } */
    /* .default-thumbnail:not(.upd .default-thumbnail) {
        display: none;
    }

    &:not(:has(.chars + .menu-options *:checked)) .default-thumbnail,
    &:has(#ch-not-mine:checked) .default-thumbnail.not-mine,
    &:has(#ch-axel:checked) .default-thumbnail.axel,
    &:has(#ch-daron:checked) .default-thumbnail.daron,
    &:has(#ch-damien:checked) .default-thumbnail.damien,
    &:has(#ch-elu:checked) .default-thumbnail.elu,
    &:has(#ch-eos:checked) .default-thumbnail.eos,
    &:has(#ch-khyryte:checked) .default-thumbnail.khyryte,
    &:has(#ch-kip:checked) .default-thumbnail.kip,
    &:has(#ch-lucius:checked) .default-thumbnail.lucius,
    &:has(#ch-naji:checked) .default-thumbnail.naji,
    &:has(#ch-nyx:checked) .default-thumbnail.nyx,
    &:has(#ch-rin:checked) .default-thumbnail.rin,
    &:has(#ch-soot:checked) .default-thumbnail.soot,
    &:has(#ch-xor:checked) .default-thumbnail.xor,
    &:has(#ch-xyz:checked) .default-thumbnail.xyz,
    &:has(#ch-unnamed:checked) .default-thumbnail.unnamed {
        display: block;

    } */

    /* only show the sortable characters if they
     are present in the current page */
    /* &:not(:has(.default-thumbnail.axel)) label:has(#ch-axel),
    &:not(:has(.default-thumbnail.daron)) label:has(#ch-daron),
    &:not(:has(.default-thumbnail.damien)) label:has(#ch-damien),
    &:not(:has(.default-thumbnail.elu)) label:has(#ch-elu),
    &:not(:has(.default-thumbnail.eos)) label:has(#ch-eos),
    &:not(:has(.default-thumbnail.khyryte)) label:has(#ch-khyryte),
    &:not(:has(.default-thumbnail.kip)) label:has(#ch-kip),
    &:not(:has(.default-thumbnail.lucius)) label:has(#ch-lucius),
    &:not(:has(.default-thumbnail.naji)) label:has(#ch-naji),
    &:not(:has(.default-thumbnail.nyx)) label:has(#ch-nyx),
    &:not(:has(.default-thumbnail.rin)) label:has(#ch-rin),
    &:not(:has(.default-thumbnail.soot)) label:has(#ch-soot),
    &:not(:has(.default-thumbnail.xor)) label:has(#ch-xor),
    &:not(:has(.default-thumbnail.xyz)) label:has(#ch-xyz),
    &:not(:has(.default-thumbnail.not-mine)) label:has(#ch-not-mine),
    &:not(:has(.default-thumbnail.unnamed)) label:has(#ch-unnamed) {
        display: none !important;

    } */

    /* months */
    /* &:has([href|="dec"]:target) .default-thumbnail:not(.dec),
    &:has([href|="nov"]:target) .default-thumbnail:not(.nov),
    &:has([href|="oct"]:target) .default-thumbnail:not(.oct),
    &:has([href|="sep"]:target) .default-thumbnail:not(.sep),
    &:has([href|="aug"]:target) .default-thumbnail:not(.aug),
    &:has([href|="jul"]:target) .default-thumbnail:not(.jul),
    &:has([href|="jun"]:target) .default-thumbnail:not(.jun),
    &:has([href|="may"]:target) .default-thumbnail:not(.may),
    &:has([href|="apr"]:target) .default-thumbnail:not(.apr),
    &:has([href|="mar"]:target) .default-thumbnail:not(.mar),
    &:has([href|="feb"]:target) .default-thumbnail:not(.feb),
    &:has([href|="jan"]:target) .default-thumbnail:not(.jan) {
        display: none !important;
    } */
    /* &:has(#dec:target) .default-thumbnail:not(.dec),
    &:has(#nov:target) .default-thumbnail:not(.nov),
    &:has(#oct:target) .default-thumbnail:not(.oct),
    &:has(#sep:target) .default-thumbnail:not(.sep),
    &:has(#aug:target) .default-thumbnail:not(.aug),
    &:has(#jul:target) .default-thumbnail:not(.jul),
    &:has(#jun:target) .default-thumbnail:not(.jun),
    &:has(#may:target) .default-thumbnail:not(.may),
    &:has(#apr:target) .default-thumbnail:not(.apr),
    &:has(#mar:target) .default-thumbnail:not(.mar),
    &:has(#feb:target) .default-thumbnail:not(.feb),
    &:has(#jan:target) .default-thumbnail:not(.jan) {
        &:not(.upd .default-thumbnail) {
            display: none !important;
        }
    } */

    /* &:has(#dec:target) .dec::after,
    &:has(#nov:target) .nov::after,
    &:has(#oct:target) .oct::after,
    &:has(#sep:target) .sep::after,
    &:has(#aug:target) .aug::after,
    &:has(#jul:target) .jul::after,
    &:has(#jun:target) .jun::after,
    &:has(#may:target) .may::after,
    &:has(#apr:target) .apr::after,
    &:has(#mar:target) .mar::after,
    &:has(#feb:target) .feb::after,
    &:has(#jan:target) .jan::after {
        opacity: 1;
    } */

}

.year-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    inline-size: 100%;
    margin: 1rem;
    text-align: center;
    font-family: var(--font-d2);
    font-weight: bold;
    align-items: center;

    .middle {
        border: solid 2px var(--ca-a1);
        padding: 0.5rem;
        background: hsl(from var(--ca-100) h s l / 0.5);
        position: relative;
        transition: box-shadow 0.4s, background 0.3s;

        input {
            cursor: pointer;
            position: absolute;
            inset: 0;
            opacity: 0;
            /* opacity: 0.5; */
        }

        &:has(input:hover, input:focus-visible) {
            box-shadow: inset 0 0 0.5rem var(--ca-a1), 0 0 1rem var(--ca-a1);
            text-shadow: 0 0 1em currentColor;
        }

        &:has(input:checked) {
            background: hsl(from var(--ca-a1-dark) h s l / 0.5);
        }
    }

    .sides {
        height: 0;
        inline-size: 100%;
        border-top: 1px solid var(--ca-a2);
        border-bottom: 1px solid var(--ca-a2);
        opacity: 0.3;
    }
}

.year-content {
    position: unset;
    margin: 1rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    inline-size: 100%;
    border-radius: 5px;
    overflow: hidden;
    /* transition: opacity 0.3s, height 0.5s; */
    transition-property: opacity, height, display;
    transition-property: all;
    transition-duration: 0.3s;
    transition-behavior: allow-discrete;
    /* visibility: hidden; */

    /* opacity: 0;
    pointer-events: none; */
    /* background-color: blueviolet; */
    display: none;
    /* transition: all 0.7s ease-in-out; */
    transition-behavior: allow-discrete;

    /* @starting-style {

        visibility: hidden; */
    block-size: 0;
    /* } */


    &.default-thumbnail {
        visibility: hidden;
        display: none;



    }
}

@starting-style {

    .year-content,
    .default-thumbnail {
        transform: translateX(-150%);
        /* opacity: 0; */
        visibility: hidden;
        /* block-size: 0; */
    }
}

.year-header:has(.middle input:checked)+.year-content {
    opacity: 1;
    block-size: auto;
    pointer-events: initial;
    visibility: visible;

    display: flex;

    .default-thumbnail {
        visibility: visible;
        display: unset;


    }

    /* border: 2px solid hsl(from var(--ca-10) h s l / 0.3); */
}

/* content:has([for|=".yearHeaderInput-"]:has(input:checked)) :not(([for|=".yearHeaderInput-"]:has(input:checked)) .year-content{
    display: none;
} */

.filter-div {
    /* copy paste the blur and other stuff from the other filters */
    --state: blur(10px);
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    backdrop-filter: var(--state);
}

.hidden {
    display: none;
}

.visible {
    display: initial;
}

/* .gallery-container:has(.visible) .thumb:not(.visible),
.year-content:has(.visible) .default-thumbnail:not(.visible) { */
.gallery-container:has(.visible) :is(.default-thumbnail:not(.visible)) {
    display: none !important;

}

.sortable {
    --marker-color:var(--ca-a2);
    
    * {
        transition-property: color, text-shadow, fill, stroke;
        transition-duration: 0.3s;
    }


    label {
        display: flex;
        place-items: center;
        position: relative;
        --icon-size: 1.5em;
        gap: 1rem;

        

        &:has(input:hover),
        &:has(input:focus-visible) {
            filter: drop-shadow(0 0 10px var(--ca-a2));
            --icon-color: var(--ca-a2);
            color: var(--ca-a2);

        }
    }

    :is(label, ul li) {
        ::marker{
            color: var(--marker-color);
        }
        input {
            display: block;
            position: absolute;
            inset: 0;
            opacity: 0.3;
            opacity: 0;
            cursor: pointer;

        }

        &:has(input:active) {
            --icon-color: var(--ca-a2-dark);
            color: var(--ca-a2-dark);
            text-shadow: 0 0 1rem var(--ca-a2-dark);
            --marker-color:var(--ca-a2-dark);


            /* background: rgba(0, 17, 255, 0.179); */
            &::marker {
                color: var(--ca-a2);
            }
        }

        &:has(input:checked) {
            --icon-color: var(--ca-a1);
            color: var(--ca-a1);
            text-shadow: 0 0 1rem var(--ca-a1);
            font-weight: bold;
            --marker-color:var(--ca-a1);

            /* background: rgba(0, 17, 255, 0.179); */
           

        }

        &:has(input:hover, input:focus-visible) {
            --icon-color: var(--ca-a2);
            color: var(--ca-a2);
            text-shadow: 0 0 1rem var(--ca-a2);
            font-style: italic;
            --marker-color:var(--ca-a2);

            /* background: rgba(0, 17, 255, 0.179); */
            &::marker {
                color: var(--ca-a2);
            }
        }
    }

}


/* add rigght nedxt to popover bc when open it has overflow set to hidden */
.next-button, .previous-button{
    position: fixed;
    position-anchor: --lightbox;
    padding: 1rem;
    display: flex;
    align-content: center;
    background: var(--ca-a2);
    border:inherit;
    box-shadow:inherit;
    min-width: 1.5rem;
    min-height: 1.5rem;
    --icon-size:1rem;
    display: none;
    /* grid-column: 2; */
}
.next-button{
    left:anchor(right);
}
.previous-button{
    right:anchor(left);
}

.default-lightbox:popover-open + :is(.next-button, .previous-button){
    display: block;
}