@import "../../variable.less";
@import "../../mixins/index.less";

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

.@{--css-prefix}-skeleton {
  padding: var(--spacing-h-sm) var(--spacing-h-lg);
  overflow: hidden;
  &-box {
    background-image: linear-gradient(
      90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%);
    border-radius: var(--border-radius-sm);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease-in-out infinite;
  }
  &-squared {
    border-radius: 0;
  }
  &-rounded {
    border-radius: 50%;
  }
}