@import "variables.styl"

.shimmer-wrapper .shimmer.br-2
  border-radius 2px

.shimmer-wrapper
  .shimmer
    overflow hidden
    border-radius border-radius
    position relative
    background-color #d2d8e0

    &:after
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      transform translateX(-100%)
      background-image linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0)
      )
      animation shimmer 1.4s infinite
      content ''

  @keyframes shimmer
    100%
      transform translateX(100%)

.tile-container
  .shimmer-wrapper
    display flex
    flex-grow 1
    flex-wrap wrap

//RESPONSIVE
@media only screen and (max-width: 576px)
  .tile-container
    .shimmer-wrapper
      .p-tile
        padding 0 5px 5px

        .h-24x
          height 16px