.breadcrumb
  a.breadcrumb__step.breadcrumb__step--active(href='#') ECMAScript
  a.breadcrumb__step(href='#') HTML5
  a.breadcrumb__step(href='#') Node.js
  a.breadcrumb__step(href='#') Linux

body
  background #FCE4EC
  height 100vh
  display flex
  justify-content center
  align-items center

/* ------------------------- Separate line ------------------------- */

:root
  --breadcrumb-theme-1 #E91E63  // color | background active
  --breadcrumb-theme-2 #FFFFFF  // background | color active
  --breadcrumb-theme-3 #E91E63 - #111  // hover
  --breadcrumb-theme-4 #E91E63 - #222  // arrow

.breadcrumb
  text-align center
  display inline-block
  box-shadow 0 2px 5px rgba(0, 0, 0, 0.25)
  overflow hidden
  border-radius 5px
  counter-reset flag

  &__step
    text-decoration none
    outline none
    display block
    float left
    font-size 12px
    line-height 36px
    padding 0 10px 0 60px
    position relative
    background var(--breadcrumb-theme-2)
    color var(--breadcrumb-theme-1)
    transition background .5s

    &:first-child
      padding-left 46px
      border-radius 5px 0 0 5px

      &::before
        left 14px

    &:last-child
      border-radius 0 5px 5px 0
      padding-right 20px

      &::after
        content none

    // circle
    &::before
      content counter(flag)
      counter-increment flag
      border-radius 100%
      width 20px
      height 20px
      line-height 20px
      margin 8px 0
      position absolute
      top 0
      left 30px
      font-weight bold
      background var(--breadcrumb-theme-2)
      box-shadow 0 0 0 1px var(--breadcrumb-theme-1)

    // arrow
    &::after
      content ''
      position absolute
      top 0
      right -18px
      width 36px
      height 36px
      transform scale(0.707) rotate(45deg)
      z-index 1
      border-radius 0 5px 0 50px
      background var(--breadcrumb-theme-2)
      transition background 0.5s
      box-shadow 2px -2px 0 2px var(--breadcrumb-theme-4)

    &--active
      color var(--breadcrumb-theme-2)
      background var(--breadcrumb-theme-1)

      &::before
        color var(--breadcrumb-theme-1)

      &::after
        background var(--breadcrumb-theme-1)

    &:hover
      color var(--breadcrumb-theme-2)
      background var(--breadcrumb-theme-3)

      &::before
        color var(--breadcrumb-theme-1)

      &::after
        color var(--breadcrumb-theme-1)
        background var(--breadcrumb-theme-3)

const $ = (selector: string): HTMLElement | null =>
  document.querySelector(selector);

const $$ = (selector: string): NodeList<HTMLElement> =>
  document.querySelectorAll(selector);

const breadcrumb: HTMLElement = $('.breadcrumb');
const breadcrumbSteps: NodeList<HTMLElement> = $$('.breadcrumb__step');

[].forEach.call(
  breadcrumbSteps,
  (item: HTMLElement, index: number, array: HTMLElement[]): void => {
    item.onclick = (): void => {
      for (let i = 0, l = array.length; i < l; i++) {
        if (index >= i) {
          array[i].classList.add('breadcrumb__step--active');
        } else {
         array[i].classList.remove('breadcrumb__step--active'); 
        }
      }
    };
  },
);