@keyframes skeleton-wave {
  100% {
    transform: translateX(100%);
  }
}

@include b(skeleton) {
  position: relative;
  overflow: hidden;
  background-color: var(--#{$rd-prefix}background-color-gray);

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: '';
    background: linear-gradient(100deg, transparent 20%, var(--#{$rd-prefix}skeleton-background-color-wave) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: skeleton-wave 2s linear infinite;
  }

  @include m(text) {
    width: 100%;
    border-radius: var(--#{$rd-prefix}border-radius);
  }

  @include m(circular) {
    border-radius: 50%;
  }

  @include m(rect) {
    border-radius: var(--#{$rd-prefix}border-radius);
  }

  @include e(placeholder) {
    width: 0;
    overflow: hidden;
    visibility: hidden;
  }
}