/**
 * Sidebar menu
 */
.dm-pro--menu {
    padding: 48px 12px;
    min-height: 100vh;
    margin-top: 0;
    position: fixed;
    width: 216px; /** 240px - 12px * 2 (padding left-right) */
}

.dm-pro--menu .menu-item a, .dm-pro--menu .menu-item a.has-child.active {
    text-decoration: none;
    font-size: var(--body-font-size);
    font-weight: 700;
    background: none;
    color: var(--menu-color);
    border-radius: 8px;
    padding: 8px 8px 8px 4px;
    display: block;
    margin-bottom: 6px;
    position: relative;
}
.dm-pro--menu .menu-item a:hover, .dm-pro--menu .menu-item a.active:not(.has-child), .dm-pro--menu button:hover, .dm-pro--menu button.active:not(.has-child) {
    color: var(--active-menu-color);
    background: var(--active-surface-color);
}
.dm-pro--menu {
    .menu-item {
        button:hover svg, button.active:not(.has-child) svg, a:hover svg {
            color: var(--active-menu-color);
        }
    }
}
.dm-pro--menu .menu-item button.active + ul, .dm-pro--menu .menu-item:focus-within > ul {
    display: block;
}
.dm-pro--menu .menu-item > ul {
    display: none;
}
.dm-pro--menu .menu-item ul li a {
    padding-left: 44px;
}
.dm-pro--menu .btn {
    --button-surface-color: none;
    --button-width: 100%;
    --button-padding: 8px 8px 8px 4px;
    border-radius: 8px;
    font-size: var(--body-font-size);
    color: var(--menu-color);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    position: relative;
    text-align: left;
    border: none;
    font-weight: 700;
    line-height: 20px;
}
.dm-pro--menu .menu-item a svg, .dm-pro--menu button svg {
    color: var(--menu-color);
    margin-right: 12px;
    vertical-align: bottom;
}
.dm-pro--menu .menu-item a.has-child:after, .dm-pro--menu button.has-child:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    right: 5px;
    top: 14px;
    background-image: url("../Assets/ChevronDown.svg");
    background-repeat: no-repeat;
}
.dm-pro--menu .menu-item a.has-child.active:after, .dm-pro--menu button.has-child.active:after {
    background-image: url("../Assets/ChevronUp.svg");
}