@import '../../base/components/roadmap.styl';

.roadmap {
    .roadmap__step {
        margin-right: 2rem;
    }
    .roadmap__step__circle {
        background: color--blue--4;
        color: white;
        border: 1px solid color--blue--4;
        border-radius: 100rem;
        width: 1.75rem;
        height: 1.75rem;
    }
    .roadmap__step__label {
        color: color--grey--7;
        margin-left: 0.5rem;
    }
    .roadmap__step--enabled {
        .roadmap__step__circle,
        .roadmap__step__circle:hover {
            background: white;
            border: 1px solid color--blue--4;
            color: color--blue--4;
        }
        .roadmap__step__label {
            color: black;
            margin-left: 0.5rem;
        }
    }

    .roadmap__step--disabled {
        cursor: not-allowed;
        .roadmap__step__circle,
        .roadmap__step__circle:hover {
            background: white;
            border-color: color--grey--3;
            color: color--grey--3;
        }
        .roadmap__step__label {
            margin-left: 0.5rem;
        }
    }
}
.roadmap__step--active .roadmap__step__circle,
.roadmap__steps .roadmap__step__circle:hover { background: color--blue--4; }