@import '../../style/variables.scss';

.user-bread-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    li {
        font-size: 16px;
        font-family: 'Avenir Next';
        font-weight: 400;
        line-height: 1;
        margin-right: 3px;
        padding-right: 17px;
       
        position: relative;
        text-transform: capitalize;
        letter-spacing: 0.04em;
        color: $primary;
        opacity: 0.7;
        transition: 0.3s ease-in-out;

        &::before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0;
            bottom: 0;
            margin: auto;
            font-weight: 600;
            color: $primary;
            width: 16px;
            height: 16px;
            mask: url('../../../../public/assets/ns-icons/icon-arrow-down.svg') no-repeat center;
            -webkit-mask: url('../../../../public/assets/ns-icons/icon-arrow-down.svg') no-repeat center;
            color: $primary;
            background-color: $primary;
            transform: rotate(-90deg);
            mask-size: cover;
        }

        &:last-child {
            margin: 0;
            padding: 0;
            pointer-events: none;

            &::before {
                display: none;
            }
        }

        &.active {
            color: $primary;
            font-weight: 400;
            opacity: 1;
            cursor: pointer;
        }

        &:hover {
            color: #000;
            opacity: 1;
        }
    }
}