@use '../../colors';
@use '../../breakpoints';

.bz-breadcrumb {
    display: flex;
    li {
        padding-right: 22px;
        position: relative;
        display: inline-block;
        margin-right: 35px;
        a {
            color: colors.$pink-100;
            text-decoration: underline;
            span {
            color: colors.$white !important;
            text-decoration: underline;
            }
            &::before {
                position: absolute;
                content: "";
                border: solid colors.$neutral-10;
                border-width:  2px 2px 0 0;
                display: inline-block;
                padding: 5px;
                right: -4px;
                top: 4px;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            } 
            &:hover {
                color: colors.$pink-darker;
            }
        }
        > span {
            color: colors.$neutral-10;
        }
    }
    
}

@media (max-width: breakpoints.$desktop) {
    .bz-breadcrumb {
        li {
            padding-left: 22px;
            padding-right: 0;

            a::before {
            left: 0;
            right: auto;
            border-width: 0 0 2px 2px;
            }
        }
    }
}