/* Custom styles goes here */
//Variables
$gray: #9F9FA3;
$blue: #00637C;
$white: #DBF1FF;

.limited-text {
    width: 10ch; /* Limits to 10 characters */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.ProgressBar {
    margin: 0 auto;
    padding: 2em 0 3em;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.ProgressBar-step {
    text-align: center;
    position: relative;
    width: 100%;
    &:before, &:after

{
    content: "";
    height: 0.5em;
    background-color: $gray;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: -50%;
    top: 50%;
    transform: translateY(-50%);
    transition: all .25s ease-out;
}

&:first-child:before,
&:first-child:after {
    display: none;
}

&:after {
    background-color: $blue;
    width: 0%;
}

&.is-complete + &.is-current:after,
&.is-complete + &.is-complete:after {
    width: 100%;
}

}

.ProgressBar-icon {
    width: 1.5em;
    height: 1.5em;
    background-color: $gray;
    fill: $gray;
    border-radius: 50%;
    padding: 0.5em;
    max-width: 100%;
    z-index: 10;
    position: relative;
    transition: all .25s ease-out;
    .is-current &

{
    fill: $blue;
    background-color: $blue;
}

.is-complete & {
    fill: $white;
    background-color: $blue;
}

}

.ProgressBar-stepLabel {
    display: block;
    text-transform: uppercase;
    color: $gray;
    position: absolute;
    padding-top: 0.5em;
    width: 100%;
    transition: all .25s ease-out;
    //Add your breakpoint to turn off //the labels when you need it. .is-current > &, .is-complete > &

{
    color: $blue;
}

}

//FOR CODEPEN FORMATTING
.wrapper {
    max-width: 1000px;
    margin: 4em auto;
    font-size: 16px;
}

//END CODEPEN FORMATTING