dialog.drawer {
    /* Space */
    padding: 0;
    margin:  0;

    /* Size */
    height:     100%;
    max-width:  80%;
    max-height: none;

    /* Position */
    position: fixed;
    top:  0;
    left: 0;
}

dialog.drawer img {
    width:     100%;
    max-width: 15rem;
}

dialog.drawer a {
    /* Space */
    padding: 0.5rem 1rem;

    /* Layout */
    display: block;
}

/* Arbitrary but commonly used. May override. */

dialog.drawer > div {
    /* Size */
    height: inherit;

    /* Layout */
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

dialog.drawer > div > :last-child {
    margin-top: auto;
}

/* Font */

dialog.drawer {
    font-weight: bold;
}

/* Theme */

dialog.drawer {
    /* Color */
    background: white;

    /* Border */
    border: none;
}

dialog.drawer a {
    /* Color */
    color: #222;

    /* Misc. */
    text-decoration: none;
}

dialog.drawer a:hover {
    background: #0001;
}

dialog.drawer a:active {
    background: #0002;
}

dialog.drawer a.selected {
    background: #0002;
}

/* Animation */

dialog.drawer[open] {
    animation: drawer_appear 0.5s;
}

@keyframes drawer_appear {
    from {
        translate: -100% 0;
    }
}