@import "common/var";

$avatar-size-base: 32px;
$avatar-size-lg: 40px;
$avatar-size-sm: 24px;
$skeleton-color: $--color-background;
$skeleton-to-color: $--color-table-header;

@keyframes my-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


@mixin avatar-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
  @include when(avatar-circle) {
    border-radius: 50%;
  }
}

@mixin skeleton-color() {
  background: linear-gradient(
      90deg,
      $skeleton-color 25%,
      $skeleton-to-color 37%,
      $skeleton-color 63%
  );
  background-size: 400% 100%;
  animation: my-skeleton-loading 1.4s ease infinite;
}


@include b(skeleton) {
  display: table;
  width: 100%;

  @include e(header) {
    display: table-cell;
    padding-right: 1rem;
    vertical-align: top;
  }

  @include e(avatar) {
    display: inline-block;
    vertical-align: top;
    background: $skeleton-color;
    @include avatar-size($avatar-size-base);

    @include when(avatar-large) {
      @include avatar-size($avatar-size-lg);
    }
    @include when(avatar-small) {
      @include avatar-size($avatar-size-sm);
    }
  }

  @include e(content) {
    display: table-cell;
    width: 100%;
    vertical-align: top;
  }

  @include e(title) {
    width: 100%;
    height: 1rem;
    margin: 1rem 0 0 0;
    background: $skeleton-color;
  }

  @include e(paragraph) {
    margin: 24px 0 0 0;
    padding: 0;
    > li {
      width: 100%;
      height: 16px;
      list-style: none;
      background: $skeleton-color;

      &:last-child:not(:first-child):not(:nth-child(2)) {
        width: 61%;
      }

      + li {
        margin-top: 16px;
      }
    }
  }

  @include m(with-avatar) {
    @include e(title) {
      margin-top: 12px;
    }
    @include e(paragraph) {
      margin-top: 28px;
    }
  }

  @include when(active) {
    @include e(title) {
      @include skeleton-color();
    }
    @include e(paragraph) {
      > li {
        @include skeleton-color();
      }

    }
    @include e(avatar) {
      @include skeleton-color();
    }
  }
}