<commit_before>@import 'abstracts/variables';
$m-step--icon--size: 44px;
$m-step--badge--size: 20px;

.m-step {
    display: block;
    position: relative;
    padding-bottom: $m-padding--l;

    &::before {
        position: absolute;
        height: calc(100% + 1px);
        z-index: 1;
        width: 1px;
        background-color: $m-color--grey--darker;
        content: "";
        left: calc((#{$m-step--icon--size} / 2) - 1px); //magic number
    }

    &.is-inProgress {
        .m-step__header .m-step__header__icon {
            border-color: $m-color--ul-yellow;
        }
    }

    &.is-last {
        &::before {
            position: relative;
            height: 0;
            z-index: 0;
            width: 0;
            background-color: transparent;
            content: "";
            left: auto;
        }
    }

    .m-step__header {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 2;

        .m-step__header__icon {
            border: 2px solid $m-color--grey--lighter;
            height: $m-step--icon--size;
            width: $m-step--icon--size;
            font-size: $m-step--badge--size;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $m-color--white;
            position: relative;

            .m-step__header__icon__badge {
                width: $m-step--badge--size;
                height: $m-step--badge--size;
                position: absolute;
                z-index: 3;
                bottom: calc(#{$m-step--badge--size} / -4);
                right: calc(#{$m-step--badge--size} / -4);
            }
        }

        .m-step__header__title {
            flex: 1;
            margin: 0;
            margin-left: $m-margin;
            font-size: $m-font-size--h3;
        }
    }
<commit_msg>change colors in step component <commit_after>@import 'abstracts/variables';
$m-step--icon--size: 44px;
$m-step--badge--size: 20px;

.m-step {
    display: block;
    position: relative;
    padding-bottom: $m-padding--l;

    &::before {
        position: absolute;
        height: calc(100% + 1px);
        z-index: 1;
        width: 1px;
        background-color: $m-color--grey--dark;
        content: "";
        left: calc((#{$m-step--icon--size} / 2) - 1px); //magic number
    }

    &.is-inProgress {
        .m-step__header .m-step__header__icon {
            border-color: $m-color--ul-yellow;
        }
    }

    &.is-last {
        &::before {
            position: relative;
            height: 0;
            z-index: 0;
            width: 0;
            background-color: transparent;
            content: "";
            left: auto;
        }
    }

    .m-step__header {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 2;

        .m-step__header__icon {
            border: 2px solid $m-color--grey;
            height: $m-step--icon--size;
            width: $m-step--icon--size;
            font-size: $m-step--badge--size;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $m-color--white;
            position: relative;

            .m-step__header__icon__badge {
                width: $m-step--badge--size;
                height: $m-step--badge--size;
                position: absolute;
                z-index: 3;
                bottom: calc(#{$m-step--badge--size} / -4);
                right: calc(#{$m-step--badge--size} / -4);
            }
        }

        .m-step__header__title {
            flex: 1;
            margin: 0;
            margin-left: $m-margin;
            font-size: $m-font-size--h3;
        }
    }

{'fraction_non_alphanumeric': 0.14748953974895398, 'fraction_numerical': 0.01307531380753138, 'mean_word_length': 1.2713776722090262, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '944797', 'n_tokens_mistral': 1261, 'n_tokens_neox': 1182, 'n_words': 221}