<commit_before>///*------------------------------------*\
//    #STEPPER
//\*------------------------------------*/

// Stepper
.lx-stepper {
    &.lx-stepper--layout-vertical {
        padding: $base-spacing-unit * 3 0;
    }
}

    // Stepper: header (horizontal)
    .lx-stepper__header {
        position: relative;
        height: 72px;
        overflow: hidden;
        @include elevation(1);
    }

    // Stepper: nav (horizontal)
    .lx-stepper__nav {
        @include position(absolute, 0 0 0 0);
        z-index: 2;
        @include display(flex);
        @include justify-content(space-between);

        &:before {
            content: '';
            @include position(absolute, 50% 0 null 0);
            height: 1px;
            background-color: $black-4;
        }

        .lx-stepper--step-has-feedback & {
            @include transition-property(opacity);
            @include transition-duration(0.6s);
            @include transition-timing-function($ease-out-quint);
        }

        .lx-stepper--step-has-feedback.lx-stepper--step-is-loading & {
            opacity: 0;
        }
    }

    // Stepper: feedback (horizontal)
    .lx-stepper__feedback {
        @include position(absolute, 0 0 0 0);
        z-index: 1;
        @include display(flex);
        @include align-items(center);
        padding: 0 $base-spacing-unit * 3;
        opacity: 0;
        @include font-size(14px);
        @include transform(translateY(20px));
        @include transition-property(opacity, transform);
        @include transition-duration(0.6s);
        @include transition-timing-function($ease-out-quint);

        .lx-stepper--step-is-loading & {
            opacity: 1;
            @include transform(translateY(0));
        }
    }





// Step nav
.lx-step-nav {
    @include display(flex);
    cursor: pointer;

    .ripple {
        background-color: $black-2;
    }

    .lx-stepper--layout-horizontal & {
        @include align-items(center);
        position: relative;
        height: 72px;
        padding: 0 $base-spacing-unit;
        background-color: $white;

        &:first-child {
            padding-left: $base-spacing-unit * 3;
        }

        &:last-child {
            padding-right: $base-spacing-unit * 3;
        }
    }

    .lx-stepper--layout-vertical & {
        padding: $base-spacing-unit $base-spacing-unit * 3;
    }
}

    // Step nav: circle
    .lx-step-nav__indicator {
        @include display(flex);
        @include align-items(center);
        @include justify-content(center);
        @include size($size-xs);

        .lx-stepper--layout-horizontal & {
            margin-right: $base-spacing-unit;
        }

        .lx-stepper--layout-vertical & {
            margin-right: $base-spacing-unit * 1.5;
        }

        &.lx-step-nav__indicator--index,
        &.lx-step-nav__indicator--icon {
            border-radius: 50%;
            background-color: $black-3;
            color: $white-1;
        }

        .lx-step-nav--is-active &.lx-step-nav__indicator--index,
        .lx-step-nav--is-active &.lx-step-nav__indicator--icon,
        .lx-step-nav--is-valid &.lx-step-nav__indicator--index,
        .lx-step-nav--is-valid &.lx-step-nav__indicator--icon {
            background-color: $primary;
        }

        &.lx-step-nav__indicator--index {
            @include font-size(11px);
        }

        &.lx-step-nav__indicator--icon {
            @include font-size(14px);
        }

        &.lx-step-nav__indicator--error {
            @include font-size(24px);
            color: $red;
        }
    }

    // Step nav: label
    .lx-step-nav__label {
        @include font-size(14px);
        font-weight: 500;
        color: $black-2;
        line-height: $size-xs;

        .lx-step-nav--is-active &,
        .lx-step-nav--is-valid & {
            color: $black-1;
        }

        .lx-step-nav--has-error & {
            color: $red;
        }
    }

    // Step nav: state
    .lx-step-nav__state {
        @include font-size(12px);<commit_msg>feat stepper: small scss enhancements<commit_after>///*------------------------------------*\
//    #STEPPER
//\*------------------------------------*/

// Stepper
.lx-stepper {
    &.lx-stepper--layout-vertical {
        padding: $base-spacing-unit * 3 0;
    }
}

    // Stepper: header (horizontal)
    .lx-stepper__header {
        position: relative;
        height: 72px;
        overflow: hidden;
        @include elevation(1);
    }

    // Stepper: nav (horizontal)
    .lx-stepper__nav {
        @include position(absolute, 0 0 0 0);
        z-index: 2;
        @include display(flex);
        @include justify-content(space-between);

        &:before {
            content: '';
            @include position(absolute, 50% 0 null 0);
            height: 1px;
            background-color: $black-4;
        }

        .lx-stepper--step-has-feedback & {
            @include transition-property(opacity);
            @include transition-duration(0.6s);
            @include transition-timing-function($ease-out-quint);
        }

        .lx-stepper--step-has-feedback.lx-stepper--step-is-loading & {
            opacity: 0;
        }
    }

    // Stepper: feedback (horizontal)
    .lx-stepper__feedback {
        @include position(absolute, 0 0 0 0);
        z-index: 1;
        @include display(flex);
        @include align-items(center);
        padding: 0 $base-spacing-unit * 3;
        opacity: 0;
        @include font-size(14px);
        @include transform(translateY(20px));
        @include transition-property(opacity, transform);
        @include transition-duration(0.6s);
        @include transition-timing-function($ease-out-quint);

        .lx-stepper--step-is-loading & {
            opacity: 1;
            @include transform(translateY(0));
        }
    }





// Step nav
.lx-step-nav {
    @include display(flex);
    cursor: pointer;

    .ripple {
        background-color: $black-2;
    }

    .lx-stepper--layout-horizontal & {
        @include align-items(center);
        position: relative;
        height: 72px;
        padding: 0 $base-spacing-unit;
        background-color: $white;

        &:first-child {
            padding-left: $base-spacing-unit * 3;
        }

        &:last-child {
            padding-right: $base-spacing-unit * 3;
        }
    }

    .lx-stepper--layout-vertical & {
        padding: $base-spacing-unit $base-spacing-unit * 3;
    }
}

    // Step nav: circle
    .lx-step-nav__indicator {
        @include display(flex);
        @include align-items(center);
        @include justify-content(center);
        @include size(24px);

        .lx-stepper--layout-horizontal & {
            margin-right: $base-spacing-unit;
        }

        .lx-stepper--layout-vertical & {
            margin-right: $base-spacing-unit * 1.5;
        }

        &.lx-step-nav__indicator--index,
        &.lx-step-nav__indicator--icon {
            border-radius: 50%;
            background-color: $black-3;
            color: $white-1;
        }

        .lx-step-nav--is-active &.lx-step-nav__indicator--index,
        .lx-step-nav--is-active &.lx-step-nav__indicator--icon,
        .lx-step-nav--is-valid &.lx-step-nav__indicator--index,
        .lx-step-nav--is-valid &.lx-step-nav__indicator--icon {
            background-color: $primary;
        }

        &.lx-step-nav__indicator--index {
            @include font-size(11px);
        }

        &.lx-step-nav__indicator--icon {
            @include font-size(14px);
        }

        &.lx-step-nav__indicator--error {
            @include font-size(24px);
            color: $red;
        }
    }

    // Step nav: label
    .lx-step-nav__label {
        @include font-size(14px);
        font-weight: 500;
        color: $black-2;
        line-height: 24px;

        .lx-step-nav--is-active &,
        .lx-step-nav--is-valid & {
            color: $black-1;
        }

        .lx-step-nav--has-error & {
            color: $red;
        }
    }

    // Step nav: state
    .lx-step-nav__state {
        @include font-size(12px);
{'fraction_non_alphanumeric': 0.16023261568918584, 'fraction_numerical': 0.016085127443702055, 'mean_word_length': 1.5157173980703393, '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': '1346184', 'n_tokens_mistral': 2735, 'n_tokens_neox': 2494, 'n_words': 413}