@use '../style/base' as *;

@include bem(skeleton) {
  @include e(block) {
    @include universal;
    width: 100%;
    height: var(--sar-skeleton-block-height);
    background: var(--sar-skeleton-bg);
    border-radius: var(--sar-skeleton-border-radius);
  }

  @include m(round) {
    border-radius: var(--sar-rounded-full);
  }

  @include m(animated) {
    background-image: linear-gradient(
      90deg,
      transparent 25%,
      var(--sar-skeleton-highlight-color) 37%,
      transparent 50%
    );
    background-size: 400% 100%;
    animation: #{bem-ns(skeleton-animated)} 1.2s ease infinite;
  }

  @keyframes #{bem-ns(skeleton-animated)} {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}