@import "../base.css";
@import "./heroicc-card.css";
@import "./heroicc-copyable.css";

@layer heroicc.core {
    heroicc-deck {
        position: relative;
        display: grid;
        grid-template-columns: auto;
        container-type: inline-size;
        width: 100%;
        max-width: min(350px, 100cqi);
        justify-self: center;
        --deck-rotate-y: 0deg;

        .overlay {
            position: absolute;
            top: 0;
            display: grid;
            grid-template-rows: auto 1fr auto;
            padding: 0.5em;
            width: 100%;
            height: calc(calc(min(430px, 100cqi)) / (430 / 600));
            overflow: hidden;
            z-index: 3;
            text-wrap: balance;
            text-wrap: pretty;
            transform: inherit;
            transform-origin: center center -10cqi;
            backface-visibility: hidden;
            transform: rotateY(var(--deck-rotate-y));
            transition:
                transform var(--card-transition-duration) var(--spring-easing),
                --card-rotate-percent-x var(--card-transition-duration)
                    var(--spring-easing),
                --card-rotate-percent-y var(--card-transition-duration)
                    var(--spring-easing),
                --card-pointer-x var(--card-transition-duration)
                    var(--spring-easing),
                --card-pointer-y var(--card-transition-duration)
                    var(--spring-easing),
                --card-glare-opacity var(--card-transition-duration)
                    var(--spring-easing);

            div:has(> div > label > progress) {
                display: grid;
                overflow-y: scroll;
                mask-image: linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0) calc(0% + 2px),
                    rgba(0, 0, 0, 1) calc(1em * 2),
                    rgba(0, 0, 0, 1) calc(100% - calc(1em * 2)),
                    rgba(0, 0, 0, 0) calc(100% - 2px)
                );
            }

            div:has(> label > progress) {
                height: calc(100% - 2em);
                align-content: center;
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 0.5em;
                margin: 1em;
                text-shadow: 1px 1px 1px #000;

                > strong {
                    justify-self: end;
                    align-self: end;
                    line-height: 1em;
                    font-weight: 400;
                    margin-inline-end: 1ch;
                    margin-block-end: -0.125em;
                    color: oklch(0.8 0 0);
                }

                > label {
                    font-size: var(--font-step--1);
                    color: oklch(1 0 0);

                    > span {
                        display: grid;
                        grid-template-columns: auto auto;
                        grid-template-rows: auto auto;
                        align-items: end;
                        justify-content: start;
                        gap: 0.125em;
                    }

                    small {
                        margin-inline-start: 0.5ch;
                        color: oklch(1 0 0 / 0.7);
                        display: inline-block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }

                progress {
                    &::-webkit-progress-value {
                        box-shadow: inset 0px 1px 1px 0px oklch(1 0 0 / 0.5);
                    }
                    &::-moz-progress-bar {
                        box-shadow: inset 0px 1px 1px 0px oklch(1 0 0 / 0.5);
                    }
                }
            }

            heroicc-copyable {
                margin: 0;
                align-self: end;

                pre {
                    padding-block: 1.2em;
                }
            }
        }

        header {
            display: flex;
            flex-direction: row;
            gap: 1em;
            align-items: start;
            justify-content: end;

            button[popovertarget] {
                white-space: nowrap;
                margin: 0;
            }
        }

        dl.deck-languages {
            flex-grow: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.125em;
            justify-content: end;
            margin-block-start: 0.5em;
            margin-inline-end: 0.5em;

            dd:not(:has(abbr)) {
                color: var(--text-color);
                padding: 0.25em 0.5em;
                border: 2px solid var(--text-color-soften);
                border-radius: 1em;
            }
        }

        heroicc-copyable {
            max-height: 4em;

            pre {
                max-height: inherit;

                span:has(> small) {
                    position: relative;

                    small {
                        position: absolute;
                        top: 0.1em;
                        vertical-align: bottom;
                        color: var(--text-color-soften);
                    }
                }
            }
        }

        heroicc-card {
            width: 100cqi;
            transform: rotateY(var(--deck-rotate-y));
            transition:
                transform var(--card-transition-duration) var(--spring-easing),
                --card-rotate-percent-x var(--card-transition-duration)
                    var(--spring-easing),
                --card-rotate-percent-y var(--card-transition-duration)
                    var(--spring-easing),
                --card-pointer-x var(--card-transition-duration)
                    var(--spring-easing),
                --card-pointer-y var(--card-transition-duration)
                    var(--spring-easing),
                --card-glare-opacity var(--card-transition-duration)
                    var(--spring-easing);
            box-shadow: var(--card-shadow);

            &:not(:has(picture))::before {
                content: "";
                display: block;
                width: inherit;
                height: inherit;
                max-width: inherit;
                max-height: inherit;
                position: absolute;
                inset-block: 0;
                border-radius: inherit;
                pointer-events: none;
                z-index: 2;
                scale: -1 1;
                backface-visibility: hidden;
                transform: rotateY(
                    calc(180deg + var(--deck-rotate-y))
                ) !important;
                animation: none !important;
            }

            &:has(picture)::before {
                scale: -1 1;
                z-index: 1;
                backface-visibility: hidden;
                box-shadow: none !important;
            }

            &::after {
                content: "";
                display: block;
                width: inherit;
                border-radius: inherit;
                background: oklch(0 0 0 / 0.85);
                box-shadow: 0 0 0 1px oklch(0 0 0 / 0.85) !important;
                animation: none !important;
                opacity: 1 !important;
                z-index: 2 !important;
            }
        }

        &:has(.credit) {
            margin-block-end: 2em;
        }

        .credit {
            display: flex;
            flex-direction: row;
            justify-content: end;
            position: absolute;
            width: 100%;
            top: 100%;
            height: fit-content;
            margin-block-start: 1em;
            padding-inline: 0.5em;
            font-size: var(--font-step--1);
            color: oklch(from var(--theme-color) calc(1.15 - l) c h / 0.3);
            max-width: inherit;
            z-index: 0;

            & > span,
            & > a {
                width: fit-content;
                white-space: pre;
            }

            a[href] {
                color: var(--text-color-soften);
                text-decoration: underline;
                text-underline-offset: 0.15em;
                text-decoration-color: oklch(from currentColor l c h / 0.5);

                &:hover {
                    text-decoration-color: revert;
                }

                &:first-child {
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &:last-child {
                    color: oklch(from var(--theme-color) calc(1.1 - l) c h);
                }
            }
        }
    }
}