@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');

@media not print {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-height: 100vh;
        overflow: auto;
        overflow-x: hidden;
        background-color: var(--background-highlight);
    }

    main {
        width: 100%;
    }

    .settings-container.global {
        position: fixed;
        z-index: 50;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1rem;
        bottom: 1rem;
        left: 0;
    }

    #plantcards-container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    @keyframes bury-card {
        0% {
            bottom: 6cm;
        }
        100% {
            bottom: 5cm;
        }
    }

    @keyframes bury-holder {
        0% {
            bottom: 5.9cm;
        }
        100% {
            bottom: 4.9cm;
        }
    }

    @keyframes bury-stem {
        0% {
            top: 1cm;
        }
        100% {
            top: 0cm;
        }
    }

    #plantcards-container>* {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;

        height: 20cm;
        
        
        .plantcard-container {
            width: var(--plantcard-width);
            position: relative;

            transform: skew(0deg, 15deg);
            width: 15cm;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .plantcard {
            z-index: 5;
            background-color: white;
            position: absolute;
            bottom: 5cm;
            left: calc((15cm - var(--plantcard-width)) / 2);
            border-radius: .5mm;
            box-shadow: .5mm -.5mm var(--background-accent-hover);
            animation: .25s bury-card ease-out;
        }

        .holder-display-container {
            position: absolute;
            z-index: 10;
            bottom: 4.9cm;
            display: flex;
            width: var(--plantcard-width);
            justify-content: center;
            animation: .25s bury-holder ease-out;


            height: 3cm;

            .holder-display {
                border-radius: .5cm;
                height: 100%;
                position: absolute;
                background-color: var(--background-accent-hover);
                box-shadow: .6mm -1.5mm var(--background-accent);
                width: var(--plantcard-width);

                display: flex;
                justify-content: center;
                align-items: center;
            }

            .stem {
                position: absolute;
                z-index: 0;
                top: 0;
                width: var(--plantcard-stem-width);
                height: 5cm;
                background: linear-gradient(var(--background-accent-hover) 90%, transparent 100%);
                animation: .25s bury-stem ease-out;
            }
        }

        img.holder-display {
            position: absolute;
            width: 30cm;
            opacity: .5;

            right: calc(-12cm);
            bottom: -1.3cm;
        }
    }

    .settings-container.individual {
        width: 50%;
        position: relative;
        z-index: 100;

        display: flex;
        flex-direction: column;
        gap: .5cm;

        align-items: center;
        justify-content: center;
    }

    .settings.individual {
        background-color: white;
        height: max-content !important;
        border-radius: 2mm;
        overflow: hidden;

        .text-input-container, .image-container input {
            padding: 1mm;
            border-radius: 1mm;
            background-color: var(--background-accent);
            transition: 250ms background-color;

            &:hover, &:has(input:focus) {
                background-color: var(--background-accent-hover);

                >input {
                    background-color: var(--background-accent-hover);
                }
            }
        }

        .text-input-container:has(.subtitle, .paragraph) {
            margin-top: 2.5mm;
        }

        .paragraph {
            height: fit-content;
        }

        .details-container>* .text-input-container {
            width: 1.5cm;
        }

        .image-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            input {
                position: absolute;
                width: max-content;
                opacity: .75;
            }

            &:hover {
                cursor: pointer;
            }
        }

        /* .details-container>*:not(.image-container):not(:has(.h3)) {
            margin-top: 1mm;
        } */

        input,textarea {
            display: block;
            width: 100%;
            resize: none;

            border: none;
            background-color: var(--background-accent);
            transition: 250ms background-color;
        }

        textarea.paragraph {
            height: 1.6cm;
            font-family: inherit;
        }
    }
}

h3,.h3 {
    font-size: 1.15rem;
    font-weight: bold;
}

#plantcards-container>* {
    --plantcard-stem-width: .75cm;

    &:has(.plantcard.small) {
        --plantcard-width: 6cm;
        --plantcard-height: 10cm;
    }

    &:has(.plantcard.big) {
        --plantcard-width: 8.5cm;
        --plantcard-height: 12.75cm;
    }
}

.plantcard, .settings.individual {
    position: relative;
    width: var(--plantcard-width);
    height: var(--plantcard-height);

    img {
        width: 100%;
        height: calc((var(--plantcard-height) * .6) - 3cm);

        object-fit: cover;
        object-position: center;

        mask:
            radial-gradient(7.62mm at 50% calc(100% - 10.75mm),#000 99%,#0000 101%) calc(50% - 10mm) 0/20mm 100%,
            radial-gradient(7.62mm at 50% calc(100% + 5.75mm),#0000 99%,#000 101%) 50% calc(100% - 5mm)/20mm 100% repeat-x;
    }

    .details-container {
        padding: 0 5mm 5mm 5mm;
        word-wrap: break-word;

        >.row {
            margin-top: 5mm;

            >*:has(.editable:empty) {
                display: none;
            }
        }

        >.paragraph {
            margin-top: 2.5mm;
            max-width: var(--plantcard-width);
            hyphens: auto;
        }

        .material-symbols-rounded {
            color: hsl(0, 0%, 25%);
        }
    }

    &.small {
        .details-container {
            padding: 0 2.5mm 2.5mm 2.5mm;

            >.row {
                margin-top: 2.5mm;
            }

            .material-symbols-rounded {
                color: hsl(0, 0%, 25%);
            }
        }
    }
}






@media only print {
    @page {
        page: A4 portrait;
        margin: .20cm;
    }

    .noprint {
        display: none;
    }

    .plantcard {
        break-inside: avoid !important;
        break-after: auto;
        break-before: auto;
    }

    #plantcards-container {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: .2cm;
        width: 100%;

        >* {
            box-sizing: content-box !important;
            border: 1mm solid lightgray;

            --s: 3mm;
            mask:
                conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
                0 0/calc(100% - var(--s)) calc(100% - var(--s)),
                linear-gradient(#000 0 0) content-box;
        }

        >*:has(.plantcard.big) {
            order: 2;
            break-inside: avoid;

            .plantcard-container {
                break-inside: avoid;
            }
        }

        >*:has(.plantcard.small) {
            order: 1;
            break-inside: avoid;

            width: var(--plantcard-height) !important;
            height: var(--plantcard-width) !important;
            
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .plantcard-container {
                break-inside: avoid;
                transform: rotate(-90deg);
            }
        }
    }
}