@import "../colors";
@import "../variables";
@import "../mixins";

.Steps {
    background: $color_control_background_auxilliary;
    border: $border_main;
    border-radius: $border_radius_main;
    display: inline-block;
    padding: $offset_main $offset_main * 2.5;
}

.Steps-item {
    display: inline-block;
    vertical-align: middle;

    & + & {
        margin-left: $offset_main * 2;
    }
}

.Steps-item-name,
.Steps-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
}

.Steps-icon-wrapper {
    @include inline-middle;
    color: $color_text_secondary;

    margin-left: $offset_main * 2;
}

.Steps-item-name {
    @include label(large);

    .Steps-item-active & {
        color: $color_dark_text_auxilliary;
    }

    .Steps-item-done & {
        color: $color_success;
    }

    .Steps-item-error & {
        color: $color_danger;
    }
}