$transition-time: .4s !default; $mobile-width: 24em !default; $mobile-opacity: .7 !default;

.ml-drawer-inside {

padding: 3em 10px;
max-height: 75%;
overflow: auto;

}

.ml-drawer {

position: fixed;
left: 0;
top: 0;
height: 3rem;

&[open] {
        height: 100%;
}

&[open] .ml-menu-button {
        transform: rotate(-90deg);
}

.ml-menu-button {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 2rem;
        height: 2rem;
        text-align: center;     
        line-height: 2rem;
        font-size: 2rem;
        speak: none;
        list-style: none;
        z-index: 100;
}

a {
        text-decoration: none;
}

ul {
        list-style-type: none;
}

}

.ml-bookmark li {

font-size: 1.05em

}

@media screen and (max-width: 1300px) {

.ml-drawer[open] {
        width: 100%;
        z-index: 10;
}

.ml-drawer-inside {
        max-width: $mobile-width;
        margin: 56px auto 0;
}

}

@media screen and (min-width: 1301px) {

.ml-toc {
        font-size: .9em
}

.ml-drawer {
        width: calc(50% - 490px);
}

}

@media screen and (min-width: 1600px) {

.ml-drawer {
        width: 18%;
}

}

@media screen and (prefers-reduced-motion: no-preference) {

.ml-drawer {
        transition: height $transition-time;
        summary {
                transition: transform $transition-time;
        }
}
.ml-bookmark li {
        transition: background $transition-time;
}

}

.ml-toc li {

margin: .8em 0;
line-height: 1.1em

}

.ml-toc, .ml-toc-sub, .ml-bookmark {

margin: 0;
padding: 0;

}

.ml-toc, .ml-toc-sub {

padding-left: 1em;

}

.ml-toc-1 > .ml-toc-sub, .ml-toc-2 > .ml-toc-sub {

padding-left: 0;
margin: .5em 0 1em

}

.ml-bookmark {

margin-bottom: 1em;
text-align: center;
width: 80%;
padding: 1em;

a {
        display: block;
        width: 100%;
        line-height: 2.5em;
}

}