/* @docs */
$steps-details-background-color: hsl(0, 0%, 100%) !default;
$steps-details-padding: .2em !default;
$steps-marker-background: $grey-light !default;
$steps-marker-color: $primary-invert !default;
$steps-marker-border: .2em solid #fff !default;
$steps-marker-font-weight: 700 !default;
$steps-marker-rounded-border-radius: $base-rounded-border-radius !default;
$steps-color: $grey-lighter !default;
$steps-previous-color: $primary !default;
$steps-active-color: $primary !default;
$steps-divider-height: .2em !default;
$steps-vertical-padding: 1em 0 !default;
$steps-item-line-height: $base-line-height !default;
$steps-link-color: hsl(0, 0%, 29%) !default;
$steps-content-padding: 1rem !default;
$steps-font-size: $base-font-size !default;
$steps-details-title-font-weight: 600 !default;
/* @docs */

$LR_CALC_EXPRESSION: "calc(($size - $divider-height) * 0.5)";
$GRADIENT_EXPRESSION: "linear-gradient(to left, $param1 50%, $param2 50%)";

@mixin steps-size($size, $name: null) {

    @include avariable('font-size', if($name != null, ('size-' + #{$name}), 'steps-size'), $size);
    @include evariable(
        'min-height', $MULTIPLY_EXPRESSION,
        eparam('$param', variable(if($name != null, ('size-' + #{$name}), 'steps-size'), $size)),
        eparam('$factor', 2)
    );

    .o-steps__divider {
        @include avariable('height', 'steps-divider-height', $steps-divider-height);
        @include avariable('top', if($name != null, ('size-' + #{$name}), 'steps-size'), $size);
    }

    .o-steps__marker {
        @include evariable(
            'height', $MULTIPLY_EXPRESSION,
            eparam('$param', variable(if($name != null, ('size-' + #{$name}), 'steps-size'), $size)),
            eparam('$factor', 2)
        );
        @include evariable(
            'width', $MULTIPLY_EXPRESSION,
            eparam('$param', variable(if($name != null, ('size-' + #{$name}), 'steps-size'), $size)),
            eparam('$factor', 2)
        );
    }

    .o-steps__title {
        @include avariable('background-color', 'steps-details-background-color', $steps-details-background-color);
        text-align: center;
        z-index: 1;
        @include avariable('padding', 'steps-details-padding', $steps-details-padding);
        @include evariable(
            'font-size', $MULTIPLY_EXPRESSION,
            eparam('$param', variable(if($name != null, ('size-' + #{$name}), 'steps-size'), $size)),
            eparam('$factor', 1.2)
        );
        @include avariable('height', 'steps-details-title-font-weight', $steps-details-title-font-weight);
        @include avariable('line-height', if($name != null, ('size-' + #{$name}), 'steps-size'), $size);
    }

    .o-steps__wrapper-vertical {
        .o-steps--label-right {
            .o-steps__divider {
                @include evariable(
                    'left', $LR_CALC_EXPRESSION,
                    eparam('$size', variable(if($name != null, ('size-' + #{$name}), 'steps-size'),  $size)),
                    eparam('$divider-height', variable('steps-divider-height', $steps-divider-height))
                );
            }
        }
        .o-steps--label-left {
            .o-steps__divider {
                left: auto;
                @include evariable(
                    'right', $LR_CALC_EXPRESSION,
                    eparam('$size', variable(if($name != null, ('size-' + #{$name}), 'steps-size'),  $size)),
                    eparam('$divider-height', variable('steps-divider-height', $steps-divider-height))
                );
            }
        }

        &.o-steps__wrapper-position-right {
            .o-steps--label-right {
                .o-steps__divider {
                    @include evariable(
                        'left', $LR_CALC_EXPRESSION,
                        eparam('$size', variable(if($name != null, ('size-' + #{$name}), 'steps-size'),  $size)),
                        eparam('$divider-height', variable('steps-divider-height', $steps-divider-height))
                    );
                }
            }
            .o-steps--label-left {
                .o-steps__divider {
                    left: auto;
                    @include evariable(
                        'right', $LR_CALC_EXPRESSION,
                        eparam('$size', variable(if($name != null, ('size-' + #{$name}), 'steps-size'),  $size)),
                        eparam('$divider-height', variable('steps-divider-height', $steps-divider-height))
                    );
                }
            }
        }
    }
}

.o-steps {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    @include steps-size($steps-font-size);
    @each $name, $value in $sizes {
        &--#{$name} {
            @include steps-size($value, $name);
        }
    }
    &__nav-item {
        margin: 0;
        padding: 0;
        @include avariable('line-height', 'steps-item-line-height', $steps-item-line-height);
        margin-top: 0;
        position: relative;
        flex-grow: 1;
        flex-basis: 1em;
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &--#{$name} {
                &.o-steps__nav-item-active {
                    .o-steps__marker {
                        @include avariable('background-color', ('variant-invert-' + #{$name}), $color-invert);
                        @include avariable('border-color', ('variant-' + #{$name}), $color);
                        @include avariable('color', ('variant-' + #{$name}), $color);
                    }
                    .o-steps__divider {
                        @include evariable(
                            'background', $GRADIENT_EXPRESSION,
                            eparam('$param1', variable(if($name != null, ('steps-divider-color-bg-' + #{$name}), 'steps-divider-color-bg'), $steps-color)),
                            eparam('$param2', variable(if($name != null, ('steps-divider-color-' + #{$name}), 'steps-divider-color'), $color)),
                        );
                        background-size: 200% 100%;
                    }
                }
                &.o-steps__nav-item-previous {
                    .o-steps__marker {
                        @include avariable('color', ('variant-invert-' + #{$name}), $color-invert);
                        @include avariable('background-color', ('variant-' + #{$name}), $color);
                    }
                    .o-steps__divider {
                        @include evariable(
                            'background', $GRADIENT_EXPRESSION,
                            eparam('$param1', variable(if($name != null, ('steps-divider-color-bg-' + #{$name}), 'steps-divider-color-bg'), $steps-color)),
                            eparam('$param2', variable(if($name != null, ('steps-divider-color-' + #{$name}), 'steps-divider-color'), $color)),
                        );
                        background-size: 200% 100%;
                    }
                }
            }
        }
    }

    &__divider {
        background: linear-gradient(to left, variable('steps-divider-color-bg', $steps-color) 50%, variable('steps-divider-color', $primary) 50%);
        background-size: 200% 100%;
        background-position: right bottom;
        // This will contain the divider
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;
        left: -50%;
        width: 100%;
    }

    &__content {
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        @include avariable('padding', 'steps-content-padding', $steps-content-padding);
        &-transitioning {
            overflow: hidden;
        }
    }

    &--animated {
        .o-steps__divider {
            transition-property: background;
            @include avariable('transition-duration', 'transition-duration', $speed-slow);
            @include avariable('transition-timing-function', 'transition-timing', $easing);
        }
    }

    &__link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        @include avariable('color', 'steps-link-color', $steps-link-color);
        cursor: pointer;
        text-decoration: none;

        &-label-right {
            flex-direction: row;
        }

        &-label-left {
            flex-direction: row-reverse;
        }

        &:hover {
            text-decoration: none;
        }
        &:not(&-clickable) {
            cursor: not-allowed;
        }
    }

    &__marker {
        align-items: center;
        display: flex;
        justify-content: center;
        @include avariable('font-weight', 'steps-marker-font-weight', $steps-marker-font-weight);
        @include avariable('background', 'steps-marker-background', $steps-marker-background);
        @include avariable('color', 'steps-marker-color', $steps-marker-color);
        @include avariable('border', 'steps-marker-border', $steps-marker-border);
        z-index: 1;
        overflow: hidden;

        &--rounded {
            @include avariable('border-radius', 'steps-marker-rounded-border-radius', $steps-marker-rounded-border-radius);
        }
    }

    &__details {
        @include avariable('background-color', 'steps-details-background-color', $steps-details-background-color);
        text-align: center;
        z-index: 1;
        @include avariable('padding', 'steps-details-padding', $steps-details-padding);
    }

    &__nav-item-active {
        .o-steps__link {
            cursor: default;
        }

        .o-steps__marker {
            @include avariable('background-color', 'steps-marker-color', $steps-marker-color);
            @include avariable('border-color', 'steps-active-color', $steps-active-color);
            @include avariable('color', 'steps-active-color', $steps-active-color);
        }

        .o-steps__divider {
            background-position: left bottom;
        }
    }

    &__nav-item-previous {
        .o-steps__marker {
            @include avariable('color', 'steps-marker-color', $steps-marker-color);
            @include avariable('background-color', 'steps-previous-color', $steps-previous-color);
        }

        .o-steps__divider {
            background-position: left bottom;
        }
    }

    &__item {
        flex-shrink: 0;
        flex-basis: auto;
    }

    &__wrapper-vertical {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .o-steps {
            height: 100%;
            flex-direction: column;
        }

        .o-steps__divider {
            height: 100%;
            @include avariable('width', 'steps-divider-height', $steps-divider-height);
            top: -50%;
            left: calc(50% - #{$steps-divider-height * 0.5});
        }

        .o-steps__item-active, .o-steps__item-previous {
            .o-steps__divider {
                background-position: right top;
            }
        }

        .o-steps__nav-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            @include avariable('padding', 'steps-vertical-padding', $steps-vertical-padding);
            // Override marker connector color per step
            @each $name, $pair in $colors {
                $color: nth($pair, 1);
                &--#{$name} {
                    .o-steps__divider {
                        @include evariable(
                            'background', $GRADIENT_EXPRESSION,
                            eparam('$param1', variable(if($name != null, ('steps-divider-color-bg-' + #{$name}), 'steps-divider-color-bg'), $steps-color)),
                            eparam('$param2', variable(if($name != null, ('steps-divider-color-' + #{$name}), 'steps-divider-color'), $color)),
                        );
                        background-size: 100% 200%;
                        background-position: left bottom;
                    }
                }
            }
        }

        .o-steps__content {
            flex-grow: 1;
            flex-basis: 70%;
        }

        .o-steps__navigation {
            flex-basis: 100%;
        }

        &.o-steps__wrapper-position-right {
            flex-direction: row-reverse;
        }
    }

    &--mobile {
        .o-steps__title {
            display: none;
            padding: 0;
        }
        .o-steps__divider {
            @include avariable('height', 'steps-divider-height', $steps-divider-height);
            @include avariable('top', 'steps-divider-top', $steps-font-size);
            @each $name, $value in $sizes {
                .o-steps--#{$name} {
                    @include avariable('top', 'size-' + #{$name}, $value);
                }
            }
        }
    }
}