@keyframes react-loading-skeleton {
      to {
        transform: translate(100%)
      }
    }

    .react-loading-skeleton {
      --base-color: #ebebeb;
      --highlight-color: #f5f5f5;
      --animation-duration: 1.5s;
      --animation-direction: normal;
      --pseudo-element-display: block;
      background-color: var(--base-color);
      width: 100%;
      border-radius: .25rem;
      display: inline-flex;
      line-height: 1;
      position: relative;
      -webkit-user-select: none;
      -moz-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: translate(-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
      }
    }