@import "../../../themes/default";

:global {
  .app-skeleton {
    display: table;
    width: 100%;
  }

  .app-skeleton-header {
    display: table-cell;
    padding-right: 16px;
    vertical-align: top;
  }

  .app-skeleton-header {
    .app-skeleton-avatar {
      display: inline-block;
      vertical-align: top;
      background: @skeleton-color;
      width: 32px;
      height: 32px;
      line-height: 32px;
    }

    .app-skeleton-avatar.app-skeleton-avatar-circle {
      border-radius: 50%;
    }

    .app-skeleton-avatar-lg {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }

    .app-skeleton-avatar-lg.app-skeleton-avatar-circle {
      border-radius: 50%;
    }

    .app-skeleton-avatar-sm {
      width: 24px;
      height: 24px;
      line-height: 24px;
    }

    .app-skeleton-avatar-sm.app-skeleton-avatar-circle {
      border-radius: 50%;
    }
  }

  .app-skeleton-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;

    .app-skeleton-title {
      width: 100%;
      height: @skeleton-height;
      margin-top: 0;
      margin-bottom: 0;
      background: @skeleton-color;
      border-radius: @skeleton-border-radius;
    }

    .app-skeleton-title + .app-skeleton-paragraph {
      margin-top: 24px;
    }

    .app-skeleton-paragraph {
      padding: 0;
    }

    .app-skeleton-paragraph > li {
      width: 100%;
      height: @skeleton-height;
      list-style: none;
      background: @skeleton-color;
      border-radius: @skeleton-border-radius;

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

    .app-skeleton-paragraph > li + li {
      margin-top: 16px;
    }

    .app-skeleton-paragraph-inline > li {
      //width: 10% !important;
      display: inline-block;
    }

    .app-skeleton-paragraph-inline > li + li {
      margin-top: 0;
      margin-left: 24px;
    }
  }


  .app-skeleton-with-avatar {
    .app-skeleton-content {
      .app-skeleton-title {
        margin-top: 12px;
      }

      .app-skeleton-title + .app-skeleton-paragraph {
        margin-top: 28px;
      }
    }
  }

  .app-skeleton.app-skeleton-active .app-skeleton-content .app-skeleton-title,
  .app-skeleton.app-skeleton-active .app-skeleton-content .app-skeleton-paragraph > li {
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, @skeleton-color), color-stop(37%, @skeleton-color-loading), color-stop(63%, @skeleton-color));
    background: -webkit-linear-gradient(left, @skeleton-color 25%, @skeleton-color-loading 37%, @skeleton-color 63%);
    background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-color-loading 37%, @skeleton-color 63%);
    background-size: 400% 100%;

    :local {
      -webkit-animation: app-skeleton-loading 1.4s ease infinite;
      animation: app-skeleton-loading 1.4s ease infinite;
    }
  }

  .app-skeleton.app-skeleton-active .app-skeleton-avatar {
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, @skeleton-color), color-stop(37%, @skeleton-color-loading), color-stop(63%, @skeleton-color));
    background: -webkit-linear-gradient(left, @skeleton-color 25%, @skeleton-color-loading 37%, @skeleton-color 63%);
    background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-color-loading 37%, @skeleton-color 63%);
    background-size: 400% 100%;

    :local {
      -webkit-animation: app-skeleton-loading 1.4s ease infinite;
      animation: app-skeleton-loading 1.4s ease infinite;
    }
  }
}

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

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