18F/calc

// The "steps" widget that displays when uploading a price list.
// Read more: https://calc-dev.app.cloud.gov/styleguide/#steps-widget

@import '../base/variables';

@keyframes step-fade-in {
  to {
    background-color: $color-green-light;
    color: $color-base;
    border-color: $color-green-light;
  }
}

@supports ((animation-name: test) and (animation-fill-mode: forwards)) {
  ol.steps li + li.current::before {
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-name: step-fade-in;
    animation-fill-mode: forwards;
    background-color: $color-gray-light;
    color: $color-base;
  }
}

.step-bar {
  label {
    font-weight: 100;
    margin-top: 0.2rem;
    font-size: 1.4rem;
    line-height: 1.2;
    color: $color-gray-dark;
    font-weight: $font-weight-bold;
  }
}

select option:first-child{
  font-weight: normal;
}

ol.steps {
  counter-reset: li;
  font-weight: 300;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  // margin-top: 2rem;

  &:after {
    content: " ";
    display: table;
    clear: both;
  }

  li {
    list-style: none;
    border-top: 3px solid $color-gray-lighter;
    padding-top: 14px;
    position: relative;
    float: left;
    width: 38px; // width of :before psuedoclass + margin (26 + 12px)

    &:before {
      content: counter(li);
      counter-increment: li;
      width: 2.6rem;
      height: 2.6rem;
      padding-top: .1rem;
      position: absolute;
      top: -15px;
      left: 0px;
      background-color: $color-gray-lighter;
      color: $color-gray-dark;
      border-radius: 30px;
      border: 3px solid $color-gray-lighter;
      text-align: center;
      font-size: 80%;
      font-weight: 700;
    }

    &.current ~ li::before {
      background-color: $color-white;
      color: $color-gray-dark;
    }

    &:last-child {
      border-color: transparent;
    }
  }
}