.nut-skeleton {
  line-height: 0px;
  font-size: 0px;

  &-content {
    position: relative;
    /* #ifdef dynamic*/
    display: flex;
    /* #endif */
    /* #ifndef dynamic*/
    display: inline-flex;
    /* #endif */
    width: $skeleton-line-width;
    background: $skeleton-background;
    border-radius: $skeleton-line-border-radius;
    overflow: hidden;

    &-normal {
      height: $skeleton-line-normal-height;
    }

    &-large {
      height: $skeleton-line-large-height;
    }

    &-small {
      height: $skeleton-line-small-height;
      margin-top: 8px;
    }
    &-small-0 {
      margin-top: 0;
    }
  }

  &-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    animation-name: nut-skeleton;
    animation-delay: 0s;
    animation-duration: 0.6s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-iteration-count: 1;
    animation-timing-function: linear;
  }

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

    to {
      transform: translateX(100%);
    }
  }
}

[dir='rtl'] .nut-skeleton,
.nut-rtl .nut-skeleton {
  &-animation {
    left: auto;
    right: 0;
    animation: nut-skeleton-rtl 2s linear 0s infinite;
  }

  @keyframes nut-skeleton-rtl {
    from {
      //background-position: -200% 0;
      transform: translateX(100%);
    }

    to {
      //background-position: 200% 0;
      transform: translateX(-100%);
    }
  }
}