@import 'commons';
$m-steppers-item--circle-size: 30px;
$m-steppers-item--line-width: 2px;

.m-steppers {
    position: relative;
    overflow: hidden;

    &__overflow-wrapper {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    &__wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &__selected-line {
        position: absolute;
        top: calc((#{$m-steppers-item--circle-size} / 2) - #{$m-steppers-item--line-width} / 2);
        left: 0;
        width: 0;
        content: '';
        height: $m-steppers-item--line-width;
        background: $m-color-interactive;
        z-index: 1;

        &.m--is-anim-active {
            transition: width $m-transition-duration-xl ease;
        }
    }

    &__default-line {
        position: absolute;
        top: calc((#{$m-steppers-item--circle-size} / 2) - #{$m-steppers-item--line-width} / 2);
        left: 0;
        right: 0;
        content: '';
        height: $m-steppers-item--line-width;
        background: $m-color-grey;
        z-index: 1;
    }

    // .m-steppers-item {
    //     margin-right: 60px;

    //     &:last-child {
    //         margin-right: 0;
    //     }
    // }
}