$circle = 300px

.tut
  height 0
  &-step
    position fixed
    z-index 4
    left 50%
    transform translateX(-50%)
    top 250px
    background $bz-blue
    color $bz-white
    width 500px
    font-size 16px
    margin 0 auto
    text-align left
    padding-top 20px
    boxShadow()
    &__close
      font-size 1em
      cursor pointer
      border 0
      outline 0
      background 0
      padding 0
      color $bz-white
      position absolute
      right 15px
      top 15px
    &__content
      padding 0 20px
    &__controls
      background darken($bz-blue, 20%)
      display flex
    h4, p
      margin-bottom 1.5em
    p
      line-height 1.5em
      i
        font-size .75em
    &__skip, &__next, &__prev, &__continue
      background 0
      outline 0
      border 0
      color $bz-white
      cursor pointer
    &__skip
      padding 15px
      font-size .8em
      i
        margin-left 5px
        font-size .8em
    &__next, &__prev
      font-size 1em
      padding 0 10px
      border-left 1px solid $bz-grey--dark
    &__continue
      text-transform uppercase
      font-size 1em
      padding 1em
      font-weight 600
      width 100%
    &--main
      margin-bottom 3em
      transform none
      position static
      .tut
        &-step
          &__controls
            justify-content flex-end
  &__progress
    padding 20px 0
    width 100%
    margin-right 20px
    padding-left 15px
    .progress
      &__bar
        background $bz-blue
      &__value
        transition width .6s ease-out
        height 5px
        background $bz-white
  &__overlay
    .hidden
      display none
  &__shape
    position fixed
    z-index 2
    left 0
    top 0
    border 10000px solid rgba(255, 255, 255, .5)
    // pointer-events none           Re-activate when we do participatory tutorials
    pointer-events all
    margin-left -10000px
    margin-top -10000px
    width $circle
    height $circle
    border-radius 50%
    transition all .6s ease
  &__screen
    position fixed
    z-index 3
    pointer-events all
    background transparent
    &--top, &--bottom
      left 0
      right 0
    &--left, &--right
      top 0
      bottom 0
    &--left
      left 0
    &--top
      top 0
    &--right
      right 0
    &--bottom
      bottom 0