energylink/public/sass/components/_panel_gettingstarted.scss

// Colors
$progress-color-dark: $panel-bg !default;
$progress-color: $panel-bg !default;
$progress-color-light: $panel-bg !default;
$progress-color-grey-light: $body-bg !default;
$progress-color-shadow: $panel-border !default;
$progress-color-grey: $iconContainerBackground !default;
$progress-color-grey-dark: $iconContainerBackground !default;

// Sizing
$marker-size: 60px !default;
$marker-size-half: ($marker-size / 2);
$path-height: 2px !default;
$path-position: $marker-size-half - ($path-height / 2);

.progress-tracker-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.progress-tracker-close-btn {
  color: $text-color-weak;
  position: absolute;
  z-index: $panel-header-z-index;
  top: 8px;
  right: 8px;
  font-size: $font-size-lg;
  background-color: transparent;
  border: none;

  &:hover {
    color: $link-hover-color;
  }
}

// Container element
.progress-tracker {
  display: flex;
  width: 100%;
  padding: 0;
  align-items: center;
}

// Step container that creates lines between steps
.progress-step {
  text-align: center;
  position: relative;
  flex: 1 1 0%;
  margin: 0;
  padding: 0;
  color: $text-color-weak;
  height: 84px;

  // For a flexbox bug in firefox that wont allow the text overflow on the text
  min-width: $marker-size;

  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: $path-position;
    bottom: $path-position;
    right: -$marker-size-half;
    width: 100%;
    height: $path-height;
    border-top: 2px solid $progress-color-grey-light;
    border-bottom: $progress-color-shadow;
    background: $progress-color-grey-light;
  }

  &:first-child {
    &::after {
      left: 50%;
    }
  }
  &:last-child {
    &::after {
      right: 50%;
    }
  }

  // Active state
  &.active {
    .progress-step-cta {
      display: inline-flex;
    }
    .progress-title {
      font-weight: 400;
    }
    .progress-text {
      display: none;
    }
    .progress-marker {
      .icon-gf {
        color: $brand-primary;
        -webkit-text-fill-color: transparent;
        background: $brand-gradient-horizontal;
        -webkit-background-clip: text;
        text-decoration: none;
      }
      .gicon {
        opacity: 1;
      }
    }
  }

  &.completed {
    .progress-marker {
      color: $online;

      // change icon to check
      .icon-gf::before {
        content: '\e604';
      }
    }
    .progress-text {
      text-decoration: line-through;
    }
    &::after {
      background: $progress-color-grey-light;
    }
  }
}

.progress-step-cta {
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
  display: none;
}

// Progress marker
.progress-marker {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: $marker-size;
  height: $marker-size;
  padding-bottom: 2px; // To align text within the marker
  z-index: 1;
  background-color: $panel-bg;
  margin-left: auto;
  margin-right: auto;
  color: $text-color-weak;
  font-size: 35px;
  vertical-align: sub;
}

// Progress text
.progress-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: $text-muted;
}

.progress-marker {
  color: $text-color-weak;
  text-decoration: none;
  font-size: 35px;
  vertical-align: sub;
  .gicon {
    opacity: 0.7;
  }
}

a.progress-link {
  &:hover {
    .progress-marker,
    .progress-text {
      color: $link-hover-color;
    }
    &:hover .progress-marker.completed {
      color: $online;
    }
  }
}