$step-line-left: -14px !default;
$step-line-width:1px !default;
$step-line-color: #E5E5E8 !default;
$step-title-font-size:14px !default;
$step-icon-size: 6px !default;
$step-icon-shadow-radius: 4px !default;


// scss-docs-start btn-themes
$step-colors: (
  'brand': $brand
) !default;

$step-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $step-colors
) !default;
// scss-docs-end btn-themes

.mx{
    &-step{
        position: relative;
        padding-bottom: 28px;

        &:last-child{
            .mx-step-line{
                display: none;
            }
        }

        &-content{
            color: $gray;

            .mx-step-title{
                font-size: 14px;
                line-height: 14px;

                transition: all $duration $time-function;

                @each $name,$color in $step-theme-colors {
                    &--#{$name}{
                        color: $color;
                    }
                }
            }

            .mx-step-desc{
                margin-top: 8px;
                font-size:12px;
                line-height: 12px;
            }

            .mx-step-timestamp{
                margin-top: 8px;
                font-size: 12px;
                line-height: 12px;
            }
        }

        &-icon-container{
            position: absolute;
            z-index: 1;
            left: $step-line-left;
            top: $step-title-font-size / 2;
            transform: translate3d(-50%,-50%,0);

            .mx-step-icon{
                width: $step-icon-size;
                height: $step-icon-size;
                border-radius: $step-icon-size / 2;
                background: $light-gray;
                transition: all $duration $time-function;

                @each $name,$color in $step-theme-colors {
                    &--#{$name}{
                        background: $color;
                        box-shadow: 0px 0px 0px $step-icon-shadow-radius rgba($color,0.12);
                    }
                }
            }

            .mx-icon{
                vertical-align: top;
            }
        }

        &-line{
            position: absolute;
            left:$step-line-left - 0.5px;
            top: $step-title-font-size / 2;
            width: $step-line-width;
            height: 100%;
            background: $step-line-color;
        }
    }
}