Woocommerce category navigation

				
					.woocatnav {
    border-radius: var(--border-radius-m);
    background: #E4EAFF;
    padding: var(--spacing-m);
    
    &__title {
        color: var(--color-primary);
        margin-bottom: var(--spacing-s);
    }
    
    &__scroller {
        overflow: auto;
        max-height: 600px;
    }
    
}

#woocatnav {
    list-style: none;
    padding: 0;
    margin: 0;
    
    ul,
    ul li {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        cursor: pointer;
    }
    
    li ul {
        border-left: 4px solid #CBD6FF;
        padding-left: 1rem;
        margin-bottom: 1rem;
    }
    
    li a {
        padding: 8px 0;
    }
    
    .expanded a {
        color: var(--color-primary);
    }

    > li {
        border-top: 1px solid #CBD6FF;
    }

    > li.has-children {
        cursor: pointer;
        position: relative;

        &:after {
            content: "";
            background: transparent url('data:image/svg+xml,<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="homepagenieuw" transform="translate(-364.000000, -633.000000)" fill="%234498C7" fill-rule="nonzero"><path d="M371.837091,635.6098 L367.292214,631.159755 C367.187097,631.056748 367.046774,631 366.897152,631 C366.74753,631 366.607207,631.056748 366.502089,631.159755 L366.167391,631.487394 C365.9496,631.700889 365.9496,632.047878 366.167391,632.261047 L369.983836,635.997927 L366.163156,639.738953 C366.058039,639.841961 366,639.979277 366,640.125698 C366,640.272282 366.058039,640.409598 366.163156,640.512687 L366.497855,640.840245 C366.603055,640.943252 366.743295,641 366.892917,641 C367.042539,641 367.182862,640.943252 367.28798,640.840245 L371.837091,636.386135 C371.942458,636.282803 372.000331,636.144836 372,635.998171 C372.000331,635.850936 371.942458,635.713051 371.837091,635.6098 Z" id="Path" transform="translate(369.000000, 636.000000) rotate(-270.000000) translate(-369.000000, -636.000000) "></path></g></g></svg>') no-repeat center center;
            background-size: 12px 12px;
            position: absolute;
            right: 0;
            top: 13px;
            width: 18px;
            height: 18px;
            display: block;
        }
        
        &.expanded:after {
            transform: rotate(180deg);
        }
    }

    a {
        display: block;
        margin-right: 24px;
    }

}