.step-list {
  list-style: none;
  margin: 0;
  margin-bottom: 80px;
  @include breakpoint(large up) {
    margin-bottom: (157em / $global-size);
    padding-right: (12em / $global-size);
  }
  &-entry{
    padding: (26em /$global-size) 0;
    border-bottom: 1px solid $light-mint;
    vertical-align: middle;
    position: relative;
    padding-left: 40px;

    & > * {
      vertical-align: middle;
    }
    .minted-button{
      color: $mint;
      background-color: white;
      border: 1px solid $mint;
      border-radius: 2px;
    }

    .step-completion {
      font-size: (30em / 16);
      color: $off-white;
      display: inline-block;
      margin-right: (12em / 30);
      position: absolute;
      left: 0;
      &.completed {
        color: $mint;
      }
      &.current{
        color: $honey;
      }
    }

    .entry-title {
      display: block;
      font-size: (16em / 16);
      font-weight: 700;
      line-height: (20em /16);
    }
    .sub-text {
      font-size: (14em / 16);
      line-height: (22em / 14);
      font-weight: 600;
    }
    .edit-button-container {
      font-size: (14em / 16);
      margin-top: 12px;
      margin-right: 0;
      @include breakpoint(large up) {
        display: inline-block;
        margin-right: (12em / 14);
        width: (100em / 14);
        float: right;
      }
      a {
        padding: (11em / 14) (20em / 14);
        margin: 0;

        &.minted-button {

          &:hover {
            background: $mint;
            color: $white;
          }
        }
      }
    }
  }
}