@import 'def';

#crumbs {
    padding-top:10px;
    padding-bottom:10px;

    ul {
        margin:10px 0 0 0;
        padding:0;
        font-size:18px;

        li, a {
            @include themify($themes) {
            color: themed('txtcolor2');
            }
            transition:all 0.2s;
            &:hover {
                @include themify($themes) {
                    color:themed('txtcolor100'); 
                }   
            }
        } 
    
        li {
            list-style-type: none;
            display: inline;
            &::before {
                @include themify($themes) {
                    color:themed('txtcolor2');
                }
                content:"/";
                padding:0px 5px;
            }

            &:first-child::before,  &:nth-child(2)::before{
                content:"";
            }
        }
    }

    .dropdown-menu {
        @include themify($themes) {
            background-color: themed('bodybg');
        }
        padding:10px 0;
        border:none;
        margin-left:calc(-50%);
        min-width: 20px;
        box-shadow:  0px 0px 10px rgba(0,0,0,0.2);

        a {
            display: block;
            padding: 5px 20px;
            transition: all 0.4s;
            @include themify($themes) {
                color:themed('txtcolor100');
            }

            &.active, &:hover  {
                @include themify($themes) {
                background-color: themed('crumbdropitemhover');
                }
            }
        }
    }



    .dropdown-toggle {
        
        &::after {
        display: inline-block;
        background-color: #fff;
        background-image: url('/app/core/images/drop.svg');
        background-repeat: no-repeat;
        background-position:center;
        background-size: 55%;
        padding:0px;
        border-radius: 2px;
        transform:translate(0px,9px);
        width: 22px;
        height: 22px;
        margin-left: 6px;
        border:none;
        transition: all 0.2s;
        }

        &:hover::after {
            @include themify($themes) {
                background-color:themed('crumbdrophover');
            }
            transform: translate(0px,12px);
        }

 
    }
}