@import (reference) '../../style/themes/index.less';

@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';

@gradient-min: fade(@card-skeleton-bg, 20%);
@gradient-max: fade(@card-skeleton-bg, 40%);

.@{pro-card-prefix-cls} {
  &-loading {
    overflow: hidden;
  }

  &-loading &-body {
    user-select: none;
  }

  &-loading-content {
    p {
      margin: 0;
    }
  }

  &-loading-block {
    height: 14px;
    margin: 4px 0;
    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
    background-size: 600% 600%;
    border-radius: @card-radius;
    animation: card-loading 1.4s ease infinite;
  }
}

@keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}
