@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

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

    to {
      background-position: 0 50%;
    }
  }
}

.#{$hashClassName}.cn-ui-m-skeleton {
  --skeleton-background-color: #{$m-color-bg-disabled};
  --skeleton-border-radius: #{$m-radius-small};

  .cn-ui-m-skeleton {
    &-paragraph > div:last-child {
      margin-bottom: 0;
    }

    &-title {
      height: $m-s-40;
      width: $m-s-156;
      background-color: var(--skeleton-background-color);
      border-radius: var(--skeleton-border-radius);
      margin-bottom: $m-s-12;
    }

    &-paragraph-item {
      width: 100%;
      height: $m-s-20;
      background-color: var(--skeleton-background-color);
      border-radius: var(--skeleton-border-radius);
      margin-bottom: var(--m-s-20, 8px);
    }

    &-paragraph {
      margin-bottom: $m-s-12;
    }

    &-paragraph-item-animation,
    &-title-animation {
      // background: linear-gradient(90deg,
      //     hsla(0, 0%, 74.5%, 0.2) 25%,
      //     hsla(0, 0%, 50.6%, 0.24) 37%,
      //     hsla(0, 0%, 74.5%, 0.2) 63%);
      background: linear-gradient(
        90deg,
        #f2f4f8 37.5%,
        rgba(232, 234, 236, 0.7) 50%,
        #f2f4f8 62.5%
      );
      background-size: 400% 100%;
      animation: adm-skeleton-loading 2s ease infinite;
    }
  }
}