@import "variables.css";
@import "authenticate.css";
@import "application.css";
@font-face {
    font-family: "Koda Mono";
    src: url("../fonts/KodeMono-VariableFont_wght.ttf") format("truetype")
}
@font-face {
    font-family: "Reddit Mono";
    src: url("../fonts/RedditMono-VariableFont_wght.ttf") format("truetype")
}
@font-face {
    font-family: "Roboto Mono";
    src: url("../fonts/RobotoMono-VariableFont_wght.ttf") format("truetype")
}


*{
    box-sizing: border-box;
}
header>button[name^=add],
header>button[name^=new]{
    display: block;
    position: fixed;
    top: 4em;
    right: 0;
    width: 3em;
    height: 3em;
    background: url("../images/icon-add.svg") no-repeat 50%;
    background-size: 70%;
    margin:  0 0;
    padding: 0;
    font-size: 1em;
    border: none;
}

body{
    font-family: "Roboto Mono";
    margin: 0;
    background: var(--bg);
    color: var(--color);
    >main{
        display: block;
        overflow-y: auto;
        position: fixed;
        top: 3em;
        left: 0;
        width: 100%;
        height: calc(100% - 3em);
        >dialog{
            overflow-y: auto;
            position: fixed;
            top: 3em;
            left: 0;
            width: 100%;
            height: calc(100% - 3em);
            margin: 0;
            padding: 0;
            background: var(--bg);
            color: var(--color);
            border: none;
            >dialog{
                overflow-y: auto;
                position: fixed;
                top: 3em;
                left: 0;
                width: 100%;
                height: calc(100% - 3em);
                margin: 0;
                padding: 0;
                background: var(--bg);
                color: var(--color);
                border: none;
                >form {
                    display: block;
                    width: 100%;
                    height: 100%;
                    overflow-x: hidden;
                    >header {
                        margin: 0;
                        padding: 1.5em 1em;
                        border-bottom: 0.12em solid var(--border-bottom);
                        font-weight: 600;
                        color: var(--green);
                        height: 5.12em;

                        >span{
                            font-size: 1.5em;
                            &:before{
                                content: "";
                                display: inline-block;
                                background: url("../images/icon-media.svg") no-repeat 50%;
                                background-size: cover;
                                width: 1em;
                                height: 1em;
                                vertical-align: middle;
                                margin: 0 .5em 0 0;
                            }
                        }
                    }
                }
                &[is=feed-dialog]>form>header>span:before{
                    background: url("../images/icon-media.svg") no-repeat 50%;
                }
                &[is=profile-dialog]>form>header>span:before{
                    background: url("../images/icon-profile.svg") no-repeat 50%;
                }
                &[is=sources-dialog]>form>header>span:before{
                    background: url("../images/icon-connections.svg") no-repeat 50%;
                }
                &[is=network-dialog]>form>header>span:before{
                    background: url("../images/icon-network.svg") no-repeat 50%;
                }
                &[is=settings-dialog]>form>header>span:before{
                    background: url("../images/icon-settings.svg") no-repeat 50%;
                }
            }
        }
    }
}



[name=media]>ul>li>img{
    display: block;
    width: 20%;
}

[name=mode]{
    opacity: .5;
    position: absolute;
    pointer-events: none;
    display: none;
}

[name=media] {
    >menu {
        display: block;
        overflow: auto;
        width: 100%;
        line-height: 3em;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #686868;
        >li {
            display: block;
            float: left;
            padding: 0 1em;

            >label {
                >input {
                    /*display: none;*/
                }
            }
        }
    }

    >details{
        >summary{
        }

        >ul {
            overflow: auto;
            margin: 0;
            padding: 1em;
            list-style: none;
            background: #686868;

            &:has(>li):before {
                content: "Shared Media";
                display: block;
                font-size: 1em;
                margin: 0 0 1em;
            }
            >li{
                display: block;
                float: left;
                width: 20%;
                padding: 1em;
                >img{
                    display: block;
                    width: 100%;
                }
            }
        }
    }
    >details:not(:has(li)){
        display: none;
    }
}