.sidebar-left {
    ul {
        font-size: $FONT_SIZE_N;

        li {
            list-style-image: none;
            margin: 0;
            background: $fillColor;
            line-height: 150%;
            border-bottom: 1px solid $contentInverseColor;

            &:hover {
                background: $borderColor;
            }
            a {
                font-size: $FONT_SIZE_N;
                font-weight: normal;
                text-decoration: none;
                display: block;
                padding: 5px 5px 5px 10px;
                color: $primaryBrandColor;
            }
        }
        li.selected {
            background: $primaryBrandColor;

            a {
                color: $contentInverseColor;
                text-decoration: none;
            }
        }
    }
}

.sidebar-collapsible {
    ul {
        font-size: $FONT_SIZE_N;

        li {
            list-style-image: none;
            margin: 0;
            background: $fillColor;
            line-height: 38px;
            border-bottom: 1px solid $contentInverseColor;

            &:hover {
                background: $borderColor;
            }
            a {
                font-size: $FONT_SIZE_N;
                font-weight: normal;
                text-decoration: none;
                display: block;
                padding: 5px 5px 5px 10px;
                color: $primaryBrandColor;

                &.selected, &.selected:hover {
                    background: $primaryBrandColor;
                    color: $contentInverseColor;
                    text-decoration: none;
                }
            }

            // submenu
            ul {
                height: 0;
                margin: 0 0 0 -1px;
                padding: 0;
                overflow: hidden;
                background: $white;

                li {
                    background: $white;
                    border: 1px solid $fillColor;
                    border-top: none;
                    padding: 5px 0;

                    &:hover {
                        background: $white;
                    }
                    a {
                        padding-left: 20px;
                        font-size: 16px;

                        &:hover {
                            background: $white;
                            font-weight: bold;
                        }
                        &.selected, &.selected:hover {
                            border-left: 3px solid $primaryBrandColor;
                            background: $white;
                            color: $primaryBrandColor;
                            padding-left: 15px;
                            font-weight: bold;
                            transition: all 0.2s;
                        }
                    }
                }
            }
        }
        li.has-submenu > a {
            position: relative;

            &:before {
                position: absolute;
                content: svg-url('<svg viewBox="0 0 17 32" xmlns="http://www.w3.org/2000/svg"><path d="M13.632 16L.27 30.318l1.462 1.364L16.368 16 1.73.318.27 1.682z" fill="#{rgba($primaryBrandColor, 1)}"  fill-rule="evenodd"/></svg>');
                top: 8px;
                right: 10px;
                width: 10px;
                transition: 0.3s;
            }
            &.selected:before {
                content: svg-url('<svg viewBox="0 0 17 32" xmlns="http://www.w3.org/2000/svg"><path d="M13.632 16L.27 30.318l1.462 1.364L16.368 16 1.73.318.27 1.682z" fill="#{rgba($white, 1)}"  fill-rule="evenodd"/></svg>');
            }
        }
        li.has-submenu.active > a {
            &:before {
                content: svg-url('<svg viewBox="0 0 17 32" xmlns="http://www.w3.org/2000/svg"><path d="M13.632 16L.27 30.318l1.462 1.364L16.368 16 1.73.318.27 1.682z" fill="#{rgba($white, 1)}"  fill-rule="evenodd"/></svg>');
                transform: rotate(90deg);
                top: 5px;
                right: 15px;
            }
        }
    }
}