/* https://codepen.io/hedula/pen/wvwdajR */

// Variables
@use "sass:math";

$base-margin: 2em;
$base-padding: 1em;
$base-border-radius: .2em;
$screen-xs-max: 786px;

$text-color: #263238;
$text-color-inverted: #fff;
$clickable-hover: #d8f1ff;

$brand-primary: #4285f4;
$brand-success: #54b948;
$brand-danger: #d50000;

$gray-dark: #333;
$gray-light: #999;
$gray-lighter: #eee;

$icon-danger: '!';
$icon-success: '✓';

$animation-time: 0.5s;


// Multi-step code

.multi-step {
    margin: ($base-margin * 0.5) 0;
}

// Setting up flexbox for list
.multi-step-list {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    .multi-step-item:first-child { margin-left: 0; }
    .multi-step-item:last-child { margin-right: 0; }
}

// Defaults for each 'step'
.multi-step-item {
    position: relative;
    width: 100%;
    margin: 0 math.div($base-margin, 6);
    @media only screen and (max-width: $screen-xs-max) {
        margin: 0 math.div($base-margin, 6);
    }
    z-index: 2;
    border-radius: $base-border-radius;

    // Step title and subtitle defaults
    .item-title,
    .item-subtitle {
        position: relative;
        margin: 0;
        z-index: 2;
    }
    @media only screen and (max-width: $screen-xs-max) {
        .item-subtitle { display: none; }
    }
    .item-title {
        color: $brand-primary;
        font-weight: 600;
        margin: 0;
    }

    // Different step states [ active, current, completed, error]
    &.active:hover { cursor: pointer; }
    &.current .item-title,
    &.current .item-subtitle {
        color: $text-color-inverted;
    }
    &.active.current:hover .item-title,
    &.active.current:hover .item-subtitle {
        color: $brand-primary;
    }
    &.error:after {
        position: absolute;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        right: .5em;

        content: $icon-danger;
        color: $brand-danger;
    }
}

// Creates the 'arrow' effect / background colors
.item-wrap {
    display: block;
    padding: $base-padding;
    position: relative;
    height: 100%;
    &:before, &:after {
        position: absolute;
        left: 0;
        content: ' ';
        width: 100%;
        height: 50.5%;
        z-index: 1;
        background-color: $gray-lighter;
    }

    // Top of the arrow
    &:before {
        top: 0;
        transform: skew(20deg);
        border-radius: .2em .2em 0 0;
    }
    // Bottom of the arrow
    &:after {
        bottom: 0;
        transform: skew(-20deg);
        border-radius: 0 0 .2em .2em;
    }
}

// Changing arrow colors based on state
.current .item-wrap:before,
.current .item-wrap:after {
    background-color: $brand-primary;
}

.active:hover .item-wrap:before,
.active:hover .item-wrap:after {
    background-color: $clickable-hover;
}

.multi-step-item.error {
    .item-title,
    .item-subtitle {
        padding-right: ($base-padding * 2);
    }
}

// Changing step styles based on :first/:last step
.multi-step-item:first-child .item-wrap,
.multi-step-item:last-child .item-wrap {
    width: 100%;
    border-radius: $base-border-radius;
    &:before, &:after { width: 50%; }
}

// If first step, only point on the right
.multi-step-item:first-child .item-wrap {
    background: linear-gradient(to right, $gray-lighter 95%, transparent 5%);
    &:before, &:after { left: 50%; }
}
.active.multi-step-item:first-child:hover .item-wrap {
    background: linear-gradient(to right, $clickable-hover 95%, transparent 5%);
}
.current.multi-step-item:first-child .item-wrap {
    background: linear-gradient(to right, $brand-primary 95%, transparent 5%);
}

// If last step, only indent on the left
.multi-step-item:last-child .item-wrap {
    background: linear-gradient(to left, $gray-lighter 95%, transparent 5%);
    &:before, &:after { right: 50%; }
}
.active.multi-step-item:last-child:hover .item-wrap {
    background: linear-gradient(to left, $clickable-hover 95%, transparent 5%);
}
.current.multi-step-item:last-child .item-wrap {
    background: linear-gradient(to left, $brand-primary 95%, transparent 5%);
}

// MSI Checked & Complete
.checked .multi-step-item.completed:after {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    right: .5em;
    content: $icon-success;
    color: $brand-success;
}

// MSI Numbered
.numbered .multi-step-item {
    counter-increment: step-counter;
    .item-wrap { padding-left: ($base-padding * 5); }

    // Adds number to step
    &:before {
        content: counter(step-counter);
        position: absolute;
        top: 50%;
        left: .75em;
        transform: translateY(-50%);
        min-width: 1.65em;
        padding: ($base-padding * 0.5) $base-padding;
        z-index: 2;
        font-size: .85em;
        background-color: $gray-light;
        color: $text-color-inverted;
        font-weight: 600;
        text-align: center;
        border-radius: $base-border-radius;
    }
}

// MSI w/ badge counts
.item-wrap .badge {
    position: absolute;
    right: .5em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.error .item-wrap .badge {
    right: 2em;
    ~ .item-title,
    ~ .item-subtitle {
        padding-right: 3em;
    }
}

// MSI CSS Loader
.multi-step-loading { opacity: .75; }

.current.multi-step-loading:before {
    border-color: $text-color-inverted;
    border-top-color: transparent;
    opacity: 1;
}

.busy-css {
    z-index: 3;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.5em;
    margin-left: -.5em;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    border: .25em solid $gray-dark;
    border-top-color: transparent;
    animation: spin ($animation-time * 2) infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
