// shape
.yc-skeleton-shape {
  background-color: var(--color-fill-2);
}
// size
@size: {
  mini: 48px;
  small: 36px;
  medium: 48px;
  large: 60px;
};
// Generate Size Classes
each(@size, {
  .yc-skeleton-shape-size-@{key} {
    width: @value;
    height:@value;
  }
});
// shape
@shape: square, circle;
each(@shape, {
  .yc-skeleton-shape-shape-@{value} {
    border-radius: if(@value=square,var(--border-radius-small),var(--border-radius-circle));
  }
});
// line
.yc-skeleton-line {
  width: 100%;
  display: flex;
  flex-direction: column;
  .yc-skeleton-line-row {
    background-color: var(--color-fill-2);
  }
}

// animation
.yc-skeleton-animation {
  @keyframes skeleton-circle {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  .yc-skeleton-shape,
  .yc-skeleton-line .yc-skeleton-line-row {
    background: linear-gradient(
      90deg,
      var(--color-fill-2) 25%,
      var(--color-fill-3) 37%,
      var(--color-fill-2) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
  }
}
