@import url('https://fonts.cdnfonts.com/css/meinily');
@import url(./sites/chaturbate.css);
@import url(./sites/twitch.css);

:root {
    --spacing: 16px;
    --button-width: 100px;
    --font-size: 24px;
    --columns: 2;
    --main-symbol: "\21F1";
    --up-symbol: "\2191";
    --down-symbol: "\2193";
    --close-symbol: "\2715";
    --reload-symbol: "\27F3";
}

* {
    font-family: 'Meinily', sans-serif; 
    font-size: inherit;
}

body {
    margin: 0;
    padding: 0;
    background: black;
    font-size: var(--font-size);
    overflow-x: hidden;
}

.live > * {
    border-radius: calc(var(--spacing) / 2);
    box-sizing: border-box;
}

#lives {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--spacing);
    padding: var(--spacing);
}

body {
    .live {
        position: relative;
        box-sizing: border-box;
    
        & > * {
            width: 100%;
            aspect-ratio: 16 / 9;
        }

        &, & > .live-container {
            overflow: hidden;
        }
    
        iframe, input {
            border: none;
            overflow: hidden;
            width: 100%;
            aspect-ratio: inherit;
            box-sizing: border-box;
        }

        &:hover .live-overlay {
            display: inline-block;
        }

        .live-overlay {
            position: absolute;
            top: calc(var(--spacing) / 2);
            left: calc(var(--spacing) / 2);
            right: calc(var(--spacing) / 2);
            padding-left: var(--spacing);
            display: none;

            &, * {
                border: 0;
                margin: 0;
                background: none;
                color: white;
            }

            * {
                display: inline-block;
                padding: 0;
            }

            div.button {
                position: relative;
                
                button {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    font-size: 0;
                    opacity: 0;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            .main:before {
                content:var(--main-symbol);
                font-size: 1.25em;
            }

            .up:before {
                content: var(--up-symbol);
            }

            .down:before {
                content: var(--down-symbol);
            }

            .fullscreen {
                position: relative;
                top: .05em;
            }

            .close:before {
                content: var(--close-symbol);
            }

            .reload:before {
                content: var(--reload-symbol);
                zoom: 1.5;
                position: relative;
                top: .05em;
            }
        }
    
        &[data-main='true'] {
            .live-overlay {
                .main:before {
                    content: "\21F2";
                }
            }
        }

        &[data-order='0'] {
            .live-overlay .up {
                display: none;
            }
        }

        &[data-last='true'] {
            .live-overlay .down {
                display: none;
            }
        }

        &.fake {
            order: 9999;

            .live-container {
                border: 1px solid rgba(64, 64, 64, 1);

                input {
                    background: transparent;
                    color: white;
                    font-size: .666em;
                    padding: .5em;
                    white-space: break-spaces;
                    
                    &:focus {
                        outline: none;
                    }
                    
                    &#reset-button {
                        color: red;
                    }
                }
            }
        }

        &[data-order="0"] { order: 0; }
        &[data-order="1"] { order: 1; }
        &[data-order="2"] { order: 2; }
        &[data-order="3"] { order: 3; }
        &[data-order="4"] { order: 4; }
        &[data-order="5"] { order: 5; }
        &[data-order="6"] { order: 6; }
        &[data-order="7"] { order: 7; }
        &[data-order="8"] { order: 8; }
        &[data-order="9"] { order: 9; }
        &[data-order="10"] { order: 10; }
        &[data-order="11"] { order: 11; }
        &[data-order="12"] { order: 12; }
        &[data-order="13"] { order: 13; }
        &[data-order="14"] { order: 14; }
        &[data-order="15"] { order: 15; }
    }

    #lives:has(:nth-child(1).live:not(.fake)) {
        --columns: 2;
    }
    
    #lives:has(:not(.fake):nth-child(5).live),
    #lives:has(.live[data-main='true']) {
        --columns: 3;
    }

    #lives:has(.live[data-main='true']) {
        .live[data-main='true'] {
            grid-column: span calc(var(--columns) - 1);
            grid-row: span calc(var(--columns) - 1);
            order: -1 !important;
        }
    
        .live:not([data-main='true']) {
            .live-container {
                aspect-ratio: calc(16 / 8.9); /* TODO ça doit pouvoir se calculer */
            }
        }
    }
}

body.AppleWebKit {
    .live {
        iframe {
            /* l'aspect-ratio n'est pas respecté */
            height: 110vh;
        }
        input {
            /* l'aspect-ratio n'est pas respecté */
            height: 100%;
        }
    }
}

/* Smartphone */
@media (orientation: portrait) {
    #lives {
        /* Forcer 1 seule colonne */
        --columns: 1 !important;
        /* Maximiser la taille en supprimant les marges */
        padding: 0;
    }
    .live {
        .live-overlay {
            .main {
                display: none !important;
            }
        }
    }
}