@import './mixins'

#loading
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 100000
  background-color: white
  .loading-spinner
    height: 400px
    width: 600px
    margin: 0 auto
    overflow: visible
    position: relative
    top: 45%
    @include transform(translateY(-50%))
    .logo-wrap
      height: 204px
      width: 600px
      .logo
        width: 100%
    .bubble-column
      margin: 120px auto 0
      width: 50px
      height: 400px
      svg
        width: 50px
        height: 200px
        overflow: visible
      .bubble
        opacity: 0
        transform-origin: 25px 25px
      .dark-blue
        fill: #004f7d
      .blue
        fill: #006ea4
      .red
        fill: #e75734
      .yellow
        fill: #fbb133
      .animated
        @include animation(chat 2.8s infinite cubic-bezier(0, 0.3, 1, 0.8))
      .animated-backwards
        @include animation(chat-backwards 2.8s infinite cubic-bezier(0, 0.3, 1, 0.8))
      .second
        @include animation-delay(0.7s)
      .third 
        @include animation-delay(1.4s)
      .fourth
        @include animation-delay(2.1s)
@include keyframes(chat)
  0%
    opacity: 0
    @include transform(translateY(0))
  10%
    opacity: 1
  50%
    opacity: 1
  60%
    opacity: 0
    @include transform(translateY(-200px))
@include keyframes(chat-backwards)
  0%
    opacity: 0
    @include transform(translateY(0) scale(-1, 1))
  10%
    opacity: 1
  50%
    opacity: 1
  60%
    opacity: 0
    @include transform(translateY(-200px) scale(-1, 1))