$prefix: '.c-skeleton__tb';

#{$prefix} {
  //background: #99a9bf;
  width: 0;
  height: 0;
  //background: #dcdcdc;
  &--radius {
    border-radius: 4px;
  }

  &--circle {
    border-radius: 50%;
  }
  &--opacity {
    opacity: 1;
    animation: opacity 2s linear infinite normal
  }
  &--gradient {
    background: linear-gradient(to right, rgba(255, 255, 255,.5) 2%,rgba(255, 255, 255,.9) 11%,rgba(255, 255, 255,.8) 13%, transparent 14%);
    animation: gradient 1s linear infinite normal;
    background-size: 200% 100%;
  }

  &--flexouter {
    animation: flex-outer .5s linear infinite normal;
  }

  &--flexinner {
    animation: flex-inner .5s linear infinite normal;
  }

}

@keyframes gradient {
  0% {
    background-position: 100% 0
  }
  100% {
    background-position: -100% 0
  }
}

@keyframes opacity {
  0% {
    opacity: .95;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flex-inner {
  0% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

@keyframes flex-outer {
  0% {
    width: 100%;
  }
  50% {
    width: 150%;
  }
  100% {
    width: 100%;
  }
}




