:root {
    --mm-spn-item-height: 48px;
    --mm-spn-item-indent: var(--theme--gap--normal);
    --mm-spn-line-height: 24px;
}

/* mm-spn */
.mm-spn.mm-spn--light {
    background: var(--theme--color--background);
    color: var(--theme--color--text);
}

.mm-spn.mm-spn--dark {
    background: var(--theme--color--text);
    color: var(--theme--color--background);
}

/* fix display:block in mmenu-light.css */
.mm-spn .menu__link--icon {
    display: flex;
}

/* fix for +1px in mmenu-light.css */
.mm-spn.mm-spn--navbar ul {
    top: var(--mm-spn-item-height);
}

/* hide title for main panel */
.mm-spn.mm-spn--navbar.mm-spn--main::after {
    content: none;
}

/* fix for position for main panel when title for main panel is hidden */
.mm-spn.mm-spn--navbar.mm-spn--main ul {
    top: 0;
}

/* hide/undo fix "Because padding-bottom doesn't work if it is scrollable" in mmenu-light.css */
.mm-spn ul::after {
    content: none;
}

/* hide navbar border for main panel */
.mm-spn.mm-spn--main ul::before {
    content: none;
}

/* let special menu items appear as non clickable */
.mm-spn:not(.mm-spn--main) li.menu-item-is-label,
.mm-spn:not(.mm-spn--main) li.menu-item-is-separator,
.mm-spn:not(.mm-spn--main) li.menu-item-is-spacer {
    cursor: auto;
}

/* submenu item border */
.mm-spn:not(.mm-spn--main) li::after {
}

/* hide item border for last item */
.mm-spn li:last-child::after {
    content: none;
}

/* hide submenu item border for special menu items */
.mm-spn:not(.mm-spn--main) li.menu-item-is-label::after,
.mm-spn:not(.mm-spn--main) li.menu-item-is-separator::after,
.mm-spn:not(.mm-spn--main) li.menu-item-is-spacer::after {
    content: none;
}

/* hide submenu arrow for items without submenu */
.mm-spn li::before {
    content: none;
}

/* show submenu arrow for items with submenu */
.mm-spn li.menu-item-has-children::before {
    content: '\f105';
    font-family: var(--theme--font-family--font-awesome);
    font-weight: 300;
    font-size: var(--theme--font-size--medium);
    opacity: 1;
    top: calc(var(--mm-spn-item-height) / 2);
    margin: 0;
    border: 0;
    width: auto;
    height: auto;
    transform: translate(0, -50%);
}

/* hide submenu arrow border */
.mm-spn a:not(:last-child)::after {
    content: none;
}

/* navbar title back button */
.mm-spn.mm-spn--navbar::before {
    content: '\f104';
    font-family: var(--theme--font-family--font-awesome);
    font-weight: 300;
    font-size: var(--theme--font-size--medium);
    opacity: 1;
    margin: 0;
    border: 0;
    width: 1.25rem;
    height: auto;
    transform: translate(0, -50%);
    z-index: 1;
    color: rgba(255, 255, 255, 1);
}

/* navbar title */
.mm-spn.mm-spn--navbar::after {
    background: var(--theme--color--primary);
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    font-size: var(--theme--font-size--normal);
    text-align: left;
    padding: 0 calc(var(--mm-spn-item-indent) + 1.25em);
}

/* fix for menu items have no border */
.mm-spn li::after {
    content: none;
    margin-left: 0;
}

/* fix for links to have margin to submenu arrow */
.mm-spn a, .mm-spn span {
    padding-right: calc(3 * var(--mm-spn-item-indent));
}

/* fix for for special menu items */
.mm-spn li.menu-item-is-label span {
    padding-bottom: 0;
}

.mm-spn li.menu-item-is-separator span {
    padding: 0;
    margin: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent);
}

/* mm-spn--vertical show submenu plus for items with submenu */
.mm-spn.mm-spn--vertical li.menu-item-has-children::before {
    content: '\f067';
}

/* mm-spn--vertical show submenu minus for active items with submenu */
.mm-spn.mm-spn--vertical li.menu-item-has-children.mm-spn--active::before {
    content: '\f068';
}

/* mm-spn--vertical submenu */
.mm-spn.mm-spn--vertical ul ul.mm-spn--open {
    position: relative;
    padding: var(--theme--gap--normal);
}

/* mm-spn--vertical submenu background */
.mm-spn.mm-spn--vertical ul ul.mm-spn--open::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--theme--color--primary);
    opacity: 0.12;
}

/* mm-spn--vertical fix z-index for items in submenu */
.mm-spn.mm-spn--vertical ul.mm-spn--open > li {
    position: relative;
    z-index: 2;
}