.mm,
.mm a,
.mm li,
.mm span,
.mm ul {
display: block;
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.mm a,
.mm li,
.mm span,
.mm ul {
border-width: 0;
border-style: inherit;
border-color: inherit;
background: inherit
}
:root {
--mm-color: rgba(0, 0, 0, 0.8);
--mm-item-height: 50px;
--mm-item-indent: 20px;
--mm-line-height: 24px;
--mm-navbar-height: var(--mm-item-height);
--mm-arrow-color: rgba(0, 0, 0, 0.3);
--mm-arrow-size: 10px;
--mm-arrow-weight: 2px
}
body.mm--open {
overflow-y: hidden
}
.mm {
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 80%;
min-width: 200px;
max-width: 440px;
overflow: hidden;
color: var(--mm-arrow-color);
background: #f3f3f3;
border: 0 solid rgba(0, 0, 0, .1);
line-height: var(--mm-line-height);
-webkit-box-shadow: 300px 0 0 100vw transparent, 0 0 20px transparent;
box-shadow: 300px 0 0 100vw transparent, 0 0 20px transparent;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
-o-transition: transform .3s ease, box-shadow .3s ease;
transition: transform .3s ease, box-shadow .3s ease;
transition: transform .3s ease, box-shadow .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease
}
.mm.mm--open {
-webkit-box-shadow: 300px 0 0 100vw rgba(0, 0, 0, .2), 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 300px 0 0 100vw rgba(0, 0, 0, .2), 0 0 20px rgba(0, 0, 0, .2);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
.mm {
cursor: pointer
}
.mm:before {
content: '';
display: block;
position: absolute;
top: calc(var(--mm-navbar-height)/ 2);
left: var(--mm-item-indent);
width: var(--mm-arrow-size);
height: var(--mm-arrow-size);
margin-top: 2px;
border: 0 solid var(--mm-arrow-color);
border-top-width: var(--mm-arrow-weight);
border-left-width: var(--mm-arrow-weight);
-webkit-transform: rotate(-45deg) translate(50%, -50%);
-ms-transform: rotate(-45deg) translate(50%, -50%);
transform: rotate(-45deg) translate(50%, -50%)
}
.mm.mm--home {
cursor: default
}
.mm.mm--home:before {
content: none;
display: none
}
.mm:after {
content: attr(data-mm-title);
display: block;
position: absolute;
top: 0;
left: calc(var(--mm-item-indent) + (var(--mm-arrow-size) * 2));
right: var(--mm-item-indent);
line-height: var(--mm-navbar-height);
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
.mm--home:after {
left: var(--mm-item-indent)
}
.mm ul {
-webkit-overflow-scrolling: touch;
position: fixed;
top: var(--mm-navbar-height);
bottom: 0;
left: 100%;
width: 0%;
overflow: hidden;
overflow-y: auto;
border-top-width: 1px;
color: var(--mm-color);
cursor: default;
-webkit-transition: left .3s ease, width 0s ease .3s;
-o-transition: left .3s ease, width 0s ease .3s;
transition: left .3s ease, width 0s ease .3s
}
.mm ul.mm--open {
left: 0;
width: 100%;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s
}
.mm ul.mm--parent {
left: -100%
}
.mm>ul {
left: 0;
width: 100%
}
.mm li {
position: relative;
cursor: pointer
}
.mm li:before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: var(--mm-item-indent);
right: 0;
z-index: 12;
border: inherit;
border-top-width: 1px
}
.mm li:after {
content: '';
display: block;
position: absolute;
top: calc(var(--mm-item-height)/ 2);
right: calc(var(--mm-item-height)/ 2);
z-index: 0;
width: var(--mm-arrow-size);
height: var(--mm-arrow-size);
border: 0 solid var(--mm-arrow-color);
border-top-width: var(--mm-arrow-weight);
border-right-width: var(--mm-arrow-weight);
border-bottom-width: 0;
-webkit-transform: rotate(45deg) translate(0, -50%);
-ms-transform: rotate(45deg) translate(0, -50%);
transform: rotate(45deg) translate(0, -50%)
}
.mm a,
.mm span {
position: relative;
z-index: 1;
padding: calc((var(--mm-item-height) - var(--mm-line-height))/ 2) var(--mm-item-indent)
}
.mm a {
text-decoration: none;
color: inherit
}
.mm a:not(:last-child) {
width: calc(100% - 50px);
border-right-width: 1px
}
.mm span {
background: 0 0
}