@keyframes react-loading-skeleton
{
    100%
    {
        transform: translateX(100%);
    }
}
.react-loading-skeleton
{
    --base-color: #ebebeb;
    --highlight-color: #f5f5f5;
    --animation-duration: 1.5s;
    --animation-direction: normal;
    --pseudo-element-display: block;/* Enable animation */
    background-color: var(--base-color);
    width: 100%;
    border-radius: .25rem;
    display: inline-flex;
    line-height: 1;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}
.react-loading-skeleton::after
{
    content: ' ';
    display: var(--pseudo-element-display);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-image: var(--custom-highlight-background,linear-gradient(90deg,var(--base-color) 0%,var(--highlight-color) 50%,var(--base-color) 100%));
    transform: translateX(-100%);
    animation-name: react-loading-skeleton;
    animation-direction: var(--animation-direction);
    animation-duration: var(--animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@media(prefers-reduced-motion)
{
    .react-loading-skeleton
    {
        --pseudo-element-display: none;/* Disable animation */
    }
}