#menu-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    align-self: flex-start;
    background: var(--sub-bg);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;

    width: 320px;
    transition: all 300ms;

    box-shadow: rgb(0 0 0 / 35%) -36px 0 36px -28px inset;
}

#menu-list summary {
    padding: 0.4em;
    padding-left: 0.6em;
    line-height: 2em;
    position: relative;
}

#menu-list summary>span,
#menu-list .command-group-description {
    color: var(--hl-text);
    word-break: break-all;
}

#menu-list .button-group-item {
    font-size: 0.8em;
    width: 2em;
    padding: 0;
    position: absolute;
    display: inline-block;
    right: 0.6em;
}

#menu-list details {
    margin: .5em .5em;

    border-radius: 4px;
    background-color: var(--bg-focus);
}

#menu-list details>div {
    padding: .5em 1em;
    border-top: 2px dotted var(--bg);
}

#app.hide #menu-list {
    transform: translateX(-320px);
}

#menu-hide {
    height: 2.4em;
    width: 2.4em;

    position: absolute;
    top: 17em;
    right: -1.2em;

    font-size: 1.2rem;
    line-height: 2.4em;
    border-radius: 50%;
    cursor: pointer;
    background: var(--hl-text);
}

.menu-icon-show {
    text-align: left;
    clip: rect(0 1.2em 2.4em 0);
}

.menu-icon-hide {
    text-align: right;
    clip: rect(0 2.4em 2.4em 1.2em);
}

#saved-command-group {
    height: 100%;
    overflow-y: scroll;
}

#saved-command-group>details>div>* {
    margin: .2em .5em;
}

.none {
    display: none;
}

@media screen and (min-width: 650px) {
    #menu-icon {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    #menu-hide {
        display: none;
    }
}