// Progress
// ========
//
// Helps show users where they exist within a multiple-page workflow, such as a
// checkout flow.

$progress__current-bg-color: hsl(0, 0%, 90%) !default;
$progress__completed-bg-color: hsl(0, 0%, 85%) !default;

.c-progress {
}


// Progress: Step
// --------------

.c-progress__step {

    display: flex;
    justify-content: space-between;

    overflow: hidden;
}

.c-progress-step__item {
    flex: 1;
    display: block;
}

.c-progress-step__item.c--current {
    background-color: $progress__current-bg-color;
}

.c-progress-step__item.c--completed {
    background-color: $progress__completed-bg-color;
}


// Progress: Index
// ---------------

.c-progress__index {
}


// Progress: Label
// ---------------

.c-progress__label {
}


// Progress: Inbetween
// -------------------

.c-progress__inbetween,
%c-progress__inbetween {
}

// Progress
// ========
//
// Helps show users where they exist within a multiple-page workflow, such as a
// checkout flow.

$progress__current-bg-color: hsl(0, 0%, 90%) !default;
$progress__completed-bg-color: hsl(0, 0%, 85%) !default;

.c-progress {
}


// Progress: Step
// --------------

.c-progress__step {
    display: flex;
    justify-content: space-between;

    overflow: hidden;
}

.c-progress-step__item {
    display: block;
}

.c-progress-step__item.c--current {
    background-color: $progress__current-bg-color;
}

.c-progress-step__item.c--completed {
    background-color: $progress__completed-bg-color;
}


// Progress: Index
// ---------------

.c-progress__index {
}


// Progress: Label
// ---------------

.c-progress__label {
}


// Progress: Inbetween
// -------------------

.c-progress__inbetween,
%c-progress__inbetween {
}

Remove flex grow from step items
Remove flex grow from step items
