jplusplus/the-accountant

.main__toolbar {
  background: transparent;
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  background: $brand-inverse;
  color: white;
  width: $toolbar-width-md;
  z-index:1000;
  overflow: hidden;
  text-align: center;

  @include media-breakpoint-down(sm) {
    width: $toolbar-width-xs;
  }

  &__heading {
    line-height: 1.1em !important;
    padding:$spacer;
    position: relative;

    @include media-breakpoint-down(sm) {
      display:none !important;
    }
  }

  &__link {
    margin:$spacer / 2 0;
    position: relative;
    cursor: pointer;

    @include media-breakpoint-down(sm) {
      font-size:1.5rem;
    }

    &:before,
    &:after {
      content:"";
      position: absolute;
      right:0;
      width:1px;
      height:1.5rem;
      background-size:cover;
      @include transition(width 0.4s);
    }

    &:before {
      background-image:url('images/corner-top.svg');
      bottom:100%;
    }

    &:after {
      background-image:url('images/corner-bottom.svg');
      top:100%;
    }

    &.active {
      &:before, &:after {
        width:1.5rem;
      }

      a {
        color: $brand-inverse;
        &:before {
          transform: translateX(0%);
        }
      }
    }


    a {
      padding:$spacer / 2;
      display: block;
      color:inherit;
      width:100%;
      margin-left:$spacer / 2;
      width: calc(100% - #{$spacer /2});
      position: relative;
      @include transition(0.4s);

      &:before {
        content:"";
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        z-index:-1;
        background:white;
        border-radius:0.5rem 0 0 0.5rem;
        transform: translateX(100%);
        @include transition(0.4s);
      }

      &:hover, &:active, &:focus {
        text-decoration: none;
      }


      i {
        position: relative;
        .badge {
          display: inline-block;
          position: absolute;
          top:0;
          left:100%;
          font-size:0.4em;
          transform: translate(-50%, -50%);
          border-radius: 0.5em;
          font-family: $font-family-sans-serif;
        }
      }
    }
  }

  &__var {
    font-size: 1rem;
    padding:$spacer / 2 $spacer;
    margin:$spacer / 2 0;
    font-family: $headings-font-family;
    color: $friar-gray;

    &__digit {
      color: white;
      font-weight: bolder;
      font-size: 1.1rem;
      line-height: 1;

      @include media-breakpoint-down(sm) {
        font-size: 1rem;
      }
    }

    &__risk {
      width: 100%;
      white-space: nowrap;
      margin:$spacer / 2 auto;
      background-color: rgba($friar-gray, 0.6);

      &__case {
        padding:0;
        border-right:1px solid $brand-inverse;
        position: relative;
        display: block;
        @include transition(600ms);

        &:last-child {
          border-right:0;
        }

        &:after {
          content:"";
          display: block;
          width: 100%;
          padding-bottom:100%;
        }

        &--active {
          animation: blink 1s linear 3 normal;

          $min: $brand-secondary;
          $max: $bittersweet;
          &:nth-child(1)  { background-color:mix($max, $min, 10); }
          &:nth-child(2)  { background-color:mix($max, $min, 20); }
          &:nth-child(3)  { background-color:mix($max, $min, 30); }
          &:nth-child(4)  { background-color:mix($max, $min, 40); }
          &:nth-child(4)  { background-color:mix($max, $min, 40); }
          &:nth-child(5)  { background-color:mix($max, $min, 50); }
          &:nth-child(6)  { background-color:mix($max, $min, 60); }
          &:nth-child(7)  { background-color:mix($max, $min, 70); }
          &:nth-child(8)  { background-color:mix($max, $min, 80); }
          &:nth-child(9)  { background-color:mix($max, $min, 90); }
          &:nth-child(10) { background-color:mix($max, $min, 100); }
        }
      }
    }
  }

  &__separator {
    border-color:rgba(white, 0.1);
    margin:$spacer $spacer / 2;
    padding:0;
  }

  &__share {
    position: absolute;
    bottom:0.5rem;
    left:0.5rem;
    right:0.5rem;
    height:4rem;
    line-height:4rem;
    text-align: right;
    background:rgba($friar-gray, 0.5);

    @include media-breakpoint-down(sm) {
      display:none;
    }

    &__label {
      position: absolute;
      left:0;
      top:100%;
      transform:rotate(-90deg);
      transform-origin: left top;
      width: 3rem;
      text-align: center;
      color:white;
      padding:0 0.5rem;
      line-height: 1 !important;
    }

    &__button {
      text-align:center;
      display: inline-block;
      height:3rem;
      width:4rem;
      line-height:3rem;
      font-size: 2rem;
      margin-top:0.5rem;
      border-left:1px solid rgba(white, 0.1);
      color:white;
    }
  }
}