@import "variables.css";
@import "reset.css";
@import "animations.css";
@import "modal.css";
@import "form.css";
@font-face{
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
}
body{
    width: 100%;
    height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--color);
    font-family: "JetBrains Mono", monospace;
    overflow: hidden;
}
dialog{
color: var(--color);
}
dialog[is=request-component]::backdrop{
    background-color: var(--background-color);
}
dialog[is=messaging-component]{
    >form{
        >menu{
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
            border-radius: .75em;
            border: .15em solid #7f7f7f;
            overflow: hidden;
            >li{
                display: block;
                margin: 0;
                padding: 1em;
                background: #3b3b3b;
                &:not(:last-child){
                    border-bottom: .15em solid #7f7f7f;
                }
            }
        }
        >dialog{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--background-color);
            border: none;
            >ul{
                display: block;
                list-style: none;
                margin: 0;
                padding: 0;
                overflow: visible;
                >li{
                    display: block;
                    float: left;
                    &:last-child{
                        width: 100%;
                        height: 100%;
                    }
                    >input{
                        display: none;
                    }
                    >header{
                        display: block;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 4em;
                        padding: 1em;
                        border-bottom: var(--dialog-border);
                    }
                    >ol{
                        list-style: none;
                    }
                    >fieldset{
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 10em;
                        margin: 0;
                        padding: 1em;
                        border: none;
                        >textarea{
                            display: block;
                            width: calc(100% - 2em - 5px);
                            min-height: 2em;
                            height: auto;
                            max-height: 6em;
                            font-size: 1em;
                            margin: 0;
                            padding: 1em;
                            border: none;
                            overflow: hidden;
                            resize: none;
                            outline: none;
                        }
                        >menu{
                            display: block;
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 3em;
                            >li{
                                display: block;
                                width: 3em;
                                height: 3em;
                                padding: 0;
                                margin: 0;
                                >button{
                                    display: block;
                                    width: 3em;
                                    height: 3em;
                                    padding: 0;
                                    margin: 0;
                                    background: yellow;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
button[name=send]{
    background: url("/assets/images/icon-message.svg") no-repeat 50%;
    background-size: 70%;
}
dialog[is=calls-component]{
    >dialog{
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        >form{
            display: block;
            width: 100%;
            height: 100%;
            >video{
                display: block;
                position: fixed;
                z-index: 1;
                top: 1em;
                left: 1em;
                width: 20vw;
                height: 27vw;
            }
            >ul{
                display: block;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
                >li{
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    >video{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    >menu{
                        display: block;
                        position: absolute;
                        z-index: 2;
                        bottom: 5%;
                        left: 30%;
                        width: 40%;
                        height: 3em;
                        background: #999;

                        >li{
                            display: block;
                            float: left;
                            width: 3em;
                            height: 3em;
                            >label{
                                display: block;
                                width: 3em;
                                height: 3em;
                                &:has(input[name=send_audio]){
                                    background: url("/assets/images/icon-audio.svg") no-repeat 50%;
                                    background-size: 60%;
                                }
                                &:has(input[name=send_video]){
                                    background: url("/assets/images/icon-video.svg") no-repeat 50%;
                                    background-size: 60%;
                                }
                                >input{
                                    display: none;
                                }
                            }
                            >button{
                                display: block;
                                width: 3em;
                                height: 3em;
                                background: url("/assets/images/icon-end-call.svg") no-repeat 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}


fieldset{
    >details{
        display: block;
        margin: 0 0 1em;
        background: none;
        border: var(--dialog-border);
        border-radius: .75em;
        padding: 1em;
        clear: both;
        &[open]{
            >summary{
                margin: 0 0 1em;
            }
        }
        >summary{
            &:after{
                content: "(optional)";
                margin: 0 0 0 .5em;
                font-style: italic;
                color: #fa60ff;
            }
        }
    }
}
dialog {
    overflow-y: auto;
    &[open] {
        animation: popIn .5s ease-in-out forwards;
    }
    &[is=application-component]{
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: var(--background-color);
        color: var(--color);
        overflow: hidden;
        >ol{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            list-style: none;
            &:has(li){
                display: block;
            }
            >li{
                display: block;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        }
    }
    >form{
        >header{
            margin: 0 0 1em;
            padding: 0 0 .5em;
            border-bottom: .125em solid var(--header-border-bottom-color);

            >span{
                font-size: 1.25em;
                font-weight: 600;
            }
        }
    }
    >header{
        display: block;
        position: absolute;
        width: 100%;
        height: var(--header-height);
        background: var(--header-background-color);
        border-bottom: .1em solid var(--header-border-bottom-color);
        >form{
            >img{
                display: block;
                float: left;
                width: 2em;
                height: 2em;
                margin: .5em 0 0 .5em;
            }
            >ul{
                display: block;
                list-style: none;
                margin: 0;
                padding: 0;
                float: right;
                >li{
                    display: block;
                    float: left;
                    >label{
                        display: block;
                        width: 3em;
                        height: 3em;
                        /*border-left: .1em solid var(--dialog-border-color);*/
                        &:has(input:checked){
                            background-color: var(--background-color);
                            border-left: .1em solid var(--header-border-bottom-color);
                            border-right: .1em solid var(--header-border-bottom-color);
                        }
                        >input[type=radio]{
                            display: none;
                        }
                    }
                    &:last-of-type{
                        >label:has(input:checked){
                            border-right: none;
                        }
                    }
                }
            }
        }
    }
    >header:has(input[value=calls]:checked)~dialog[is=calls-component]{
        display: block;
    }
    >header:has(input[value=messages]:checked)~dialog[is=messaging-component]{
        display: block;
    }
    >header:has(input[value=contacts]:checked)~dialog[is=contacts-component]{
        display: block;
    }
    >header:has(input[value=network]:checked)~dialog[is=network-component]{
        display: block;
    }
    >header:has(input[value=settings]:checked)~dialog[is=settings-component]{
        display: block;
    }
    >header~dialog{
        display: none;
        position: absolute;
        top: 3em;
        left: 0;
        width: 100%;
        height: calc(100% - 3em);
        background: var(--background-color);
        color: var(--color);
        border: none;
    }
}

label:has(input[value=calls]){
    background: url("/assets/images/icon-call.svg") no-repeat 50% 50%;
    background-size: 70%;
}
label:has(input[value=messages]){
    background: url("/assets/images/icon-message.svg") no-repeat 50% 50%;
    background-size: 70%;
}
label:has(input[value=contacts]){
    background: url("/assets/images/icon-contacts.svg") no-repeat 50% 50%;
    background-size: 70%;
}
label:has(input[value=network]){
    background: url("/assets/images/icon-network.svg") no-repeat 50% 50%;
    background-size: 70%;
}
label:has(input[value=settings]){
    background: url("/assets/images/icon-settings.svg") no-repeat 50% 50%;
    background-size: 70%;
}

label:has(input[name=persist])+label{
    display: none;
}
label:has(input[name=persist]:checked)+label{
    display: block;
}
label:has(input[name=encrypt])+fieldset{
    display: none;
}
label:has(input[name=encrypt]:checked)+fieldset{
    display: block;
}
dialog[is=registration-component]{
    >form{
        >fieldset{
            &:has(output:not(:empty)){
                >details,>label,>fieldset,>button{
                    display: none;
                }
            }
        }
    }
}