@import "variables.styl"

.typists
  white-space nowrap
  margin 0 auto
  overflow hidden
  text-align center
  border-radius 3vh
  line-height 3vh
  font-size 2vh
  min-width 3vh
  padding 0.5vh
  display inline-flex
  justify-content center
  .list
    display inline-flex
    opacity 1
    transition: $fastAnimationDuration linear all;
    &.ng-hide
      opacity 0
      transition:1s linear all;

  .starter
    padding-left 0.5vh
    padding-right 0.5vh
    color lighten($blueDark, 60)

  .typist
    &.ng-enter
      transition: $fastAnimationDuration linear all;
      opacity 0
      img
        width 0
        height 0
        opacity 0
    &.ng-enter.ng-enter-active
      opacity 1
      img
        width 3vh
        height 3vh
        opacity 1
    &.ng-leave
      transition: $slowAnimationDuration linear all;
      opacity 1
      img
        width 3vh
        height 3vh
        opacity 1
    &.ng-leave.ng-leave-active
      opacity 0
      img
        width 0
        opacity 0
        height 0
    img
      height 3vh
      width  3vh
      border-radius 1.5vh
      vertical-align middle
      margin-right 0.5vh
      opacity 1
      transition: $slowAnimationDuration linear all;
      &.ng-leave
        opacity 0
        height 0
        width  0