$skeleton-animation-blink-duration: 1.2s;
$skeleton-animation-elastic-duration: 0.8s;
$skeleton-title-height: 15Px;
$skeleton-row-height: 12Px;
$skeleton-action-height: 30Px;
$skeleton-aciton-width: 60Px;
$skeleton-aciton-mr: 10Px;
$skeleton-row-margin-top: 10Px;
$skeleton-row-background-color: #f2f3f5;

.skeleton {
  padding: 20px 30px;
  background: #fff;
  line-height: 20px;

  &-grid {
    display: grid;
    text-align: center;
    margin-top: 10Px;
    margin-bottom: 10Px;

    .skeleton {
      padding-top: 15Px;
      text-align: center;

      &-avatar {
        margin: 0 auto;
      }

      &-title {
        margin: 0 auto;

      }

    }
  }

  &-type {
    &-column {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;

      .skeleton-content {
        text-align: center;
      }

      .skeleton-avatar {
        margin: 0 20px;
      }

      .skeleton-row,
      .skeleton-title {
        display: inline-block;
      }
    }

    &-row {
      display: flex;
      align-items: center;
    }
  }

  &-content {
    flex: 1;
    padding-top: 16px;
  }

  &-action,
  &-row,
  &-title {
    border-radius: 4px;
    height: $skeleton-row-height;
    background-color: $skeleton-row-background-color;
  }

  &-title {
    height: $skeleton-title-height;
    margin-bottom: $skeleton-row-margin-top;
  }

  &-action {
    margin-left: $skeleton-aciton-mr;
    height: $skeleton-action-height;
    width: $skeleton-aciton-width;
  }

  &-row {
    &:not(:first-child) {
      margin-top: $skeleton-row-margin-top;
    }

    &:last-child {
      width: 72% !important;

    }
  }

  &-avatar {
    background-color: $skeleton-row-background-color;
    margin-right: 30px;

    &-round {
      border-radius: 50%;
    }
  }

  &-animate {
    &-blink {
      animation: skeleton-blink $skeleton-animation-blink-duration ease-in-out infinite;
    }

    &-elastic {
      .skeleton {

        &-row,
        &-title {
          transform-origin: left center;

          animation: skeleton-elastic $skeleton-animation-elastic-duration ease-in-out infinite;
        }
      }
    }
  }
}

@keyframes skeleton-blink {
  50% {
    opacity: 0.6;
  }
}

@keyframes skeleton-elastic {
  50% {
    transform: scaleX(0.3);
  }

  // to {
  //   transform: scaleX(0);
  // }
}