.skeleton {
  & &__line {
    position: relative;
    display: flex;
    align-items: center;
    height: 11px;
    overflow: hidden;
    background: var(--wds-color-white, var(--wsr-color-D80, #ffffff));

    &::after {
      background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent 50%
      );
      height: 11px;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      animation: skeleton-move-right 1s linear infinite;
      transform: translateX(-100%);
      content: ' ';
    }

    &--alignment-middle {
      justify-content: center;
    }

    &--spacing-small {
      margin-bottom: 10px;
    }

    &--spacing-small:first-child {
      margin-bottom: 23px;
    }

    &--spacing-medium {
      margin-bottom: 16px;
    }

    &--spacing-medium:first-child {
      margin-bottom: 36px;
    }

    &--spacing-large {
      margin-bottom: 22px;
    }

    &--spacing-large:first-child {
      margin-bottom: 50px;
    }
  }

  & &__chunk {
    height: 100%;
    background: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
    border-radius: 30px;

    &--size-small {
      width: 30%;
    }

    &--size-medium {
      width: 45%;
    }

    &--size-large {
      width: 75%;
    }

    &--size-full {
      width: 100%;
    }
  }

  :global([dir='rtl']) & &__line::after {
    animation-direction: reverse;
  }

  @media (prefers-reduced-motion) {
    & &__line::after {
      animation: none !important;
    }
  }
}

@keyframes skeleton-move-right {
  to {
    transform: translateX(100%);
  }
}