<commit_before>.ls-steps
  @extend .ls-clearfix
  position: relative
  margin-left: -15px
  padding-top: 15px

.ls-steps-nav
  list-style: none
  margin: 0
  counter-reset: steps
  overflow: hidden
  position: absolute
  top: 0
  left: 30px
  z-index: 11

  li
    counter-increment: steps
    padding-bottom: 20px
    position: relative

    &:last-child
      padding-bottom: 0

    &:before
      content: ""
      border-left: 3px dotted $gray2
      height: 100%
      left: 16px
      position: absolute
      top: 22px
      z-index: 1

.ls-steps-btn
  background: #fff
  border: none
  cursor: none
  display: inline-block
  font-size: remtopx(.875)
  color: $gray2
  padding-right: 5px
  padding-bottom: 3px
  pointer-events: none
  position: relative
  z-index: 2

  &:before
    font-family: Open Sans, Arial, Helvetica, Sans-serif
    font-size: remtopx(1.125)

  .ls-active &,
  .ls-actived &
    cursor: pointer
    pointer-events: initial

    &:before
      border: 2px solid $gray3
      color: #fff

    &:after
      color: $gray3

  .ls-active &

    &:before
      color: $gray3

  .ls-actived:not(.ls-active) &

    &:before
      content: "\e63d"
      font-family: 'locastyle'


  &:hover,
  &:focus,
  &:active

    &:after
      opacity: .7

  &:before
    content: counters(steps, "") " "
    font-size: remtopx(.875)
    border: 2px solid $gray2
    background: #fff
    border-radius: 50%
    display: inline-block
    height: 35px
    line-height: 31px
    vertical-align: middle
    text-align: center
    width: 35px

  &:after
    content: attr(aria-label)
    position: absolute
    top: -999999px

.ls-steps-main
  border-left: 1px solid $gray2
  position: relative
  padding-left: 30px

  .ls-steps-arrow

    border-left: 12px solid $gray2
    border-top: 12px solid transparent
    border-bottom: 12px solid transparent
    height: 0
    width: 0
    position: absolute
    top: 0
    left: -1px


    &:before,
    &:after
      content: ""
      display: block
      left: -1px
      position: absolute


    &:before
      background: green
      border-radius: 50%
      position: absolute
      left: -13px
      top: -12px
      margin-top: 10px
      height: 4px
      width: 4px
      z-index: 2

    &:after
      border-left: 10px solid #fff
      border-top: 10px solid transparent
      border-bottom: 10px solid transparent
      top: -10px
      left: -12px
      height: 0
      width: 0
      z-index: 1

.ls-steps-content
  +single-transition(height, .25s)
  +single-transition(opacity, .25s)
  height: 0
  position: relative
  opacity: 0
  z-index: -1

  &.ls-active
    +single-transition(height, .7s)
    +single-transition(opacity, .3s)
    opacity: 1
    height: auto
    z-index: 99

  .ls-actions-btn
    overflow: hidden

    [class*="ls-btn-"]
      float: right

@media screen and (min-width: $screen-sm)

  .ls-steps-btn

    &:after
      position: relative
      top: 0
      margin-left: 10px
<commit_msg>applying final style to steps<commit_after>$with-steps: 25%

.ls-steps
  @extend .ls-clearfix
  position: relative
  margin-left: -15px
  padding-top: 15px

.ls-steps-nav
  list-style: none
  margin: 0
  counter-reset: steps
  position: absolute
  top: 10px
  left: 30px
  z-index: 11
  width: $with-steps

  li
    counter-increment: steps
    padding-bottom: 20px
    position: relative

    &:last-child
      padding-bottom: 0

      &:before
        display: none

    &:before
      content: ""
      border-left: 3px dotted $gray2
      height: 100%
      left: 16px
      position: absolute
      top: 22px
      z-index: 1

.ls-steps-btn
  background: #fff
  border: none
  cursor: none
  display: inline-block
  font-size: remtopx(.875)
  color: $gray2
  padding-right: 5px
  padding-bottom: 3px
  pointer-events: none
  position: relative
  z-index: 2

  &:before
    font-family: Open Sans, Arial, Helvetica, Sans-serif
    font-size: remtopx(1.125)

  .ls-active &,
  .ls-actived &
    cursor: pointer
    pointer-events: initial

    &:before
      border: 2px solid $gray3
      color: #fff

    &:after
      color: $gray3

  .ls-active &

    &:before
      color: $gray3

  .ls-actived:not(.ls-active) &

    &:before
      content: "\e63d"
      font-family: 'locastyle'


  &:hover,
  &:focus,
  &:active

    &:after
      opacity: .7

  &:before
    content: counters(steps, "") " "
    font-size: remtopx(.875)
    border: 2px solid $gray2
    background: #fff
    border-radius: 50%
    display: inline-block
    height: 35px
    line-height: 31px
    vertical-align: middle
    text-align: center
    width: 35px

  &:after
    content: attr(aria-label)
    position: absolute
    top: -999999px

.ls-steps-arrow
  +single-transition(all, .25s, linear)
  border-left: 12px solid $gray2
  border-top: 12px solid transparent
  border-bottom: 12px solid transparent
  display: none
  height: 0
  width: 0
  position: absolute
  top: 6px
  right: 18px

  &:before,
  &:after
    content: ""
    display: block
    left: -1px
    position: absolute


  &:before
    background: $gray3
    border-radius: 50%
    position: absolute
    left: -12px
    top: -12px
    margin-top: 10px
    height: 4px
    width: 4px
    z-index: 2

  &:after
    border-left: 10px solid #fff
    border-top: 10px solid transparent
    border-bottom: 10px solid transparent
    top: -10px
    left: -12px
    height: 0
    width: 0
    z-index: 1

.ls-steps-main
  border-left: 1px solid $gray2
  position: relative
  margin-left: $with-steps
  padding-left: 15px
  padding-right: 15px

.ls-steps-content
  position: relative
  display: none
  z-index: -1

  &.ls-active
    display: block
    z-index: 99

  .ls-actions-btn
    overflow: hidden

    [class*="ls-btn-"]
      float: right

@media screen and (min-width: $screen-sm)

  .ls-steps-main
    padding-left: 25px

  .ls-steps-arrow
    .ls-active &
      display: block

  .ls-steps-btn

    &:after
      position: relative
      top: 0
      margin-left: 10px

{'fraction_non_alphanumeric': 0.11124082721814543, 'fraction_numerical': 0.038692461641094064, 'mean_word_length': 2.196695095948827, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2556574', 'n_tokens_mistral': 2349, 'n_tokens_neox': 2096, 'n_words': 561}