@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/animations';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-skeleton {
  display: inline-block;
  block-size: rem(1px);
  position: relative;
  overflow: hidden;
  background-color: var(--vtmn-semantic-color_background-tertiary);
}

.vtmn-skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    hsl(
        var(--vtmn-semantic-color_background-primary--h)
          var(--vtmn-semantic-color_background-primary--s)
          var(--vtmn-semantic-color_background-primary--l) / 0%
      )
      0,
    hsl(
        var(--vtmn-semantic-color_background-primary--h)
          var(--vtmn-semantic-color_background-primary--s)
          var(--vtmn-semantic-color_background-primary--l) / 30%
      )
      10%,
    hsl(
        var(--vtmn-semantic-color_background-primary--h)
          var(--vtmn-semantic-color_background-primary--s)
          var(--vtmn-semantic-color_background-primary--l) / 60%
      )
      40%,
    hsl(
        var(--vtmn-semantic-color_background-primary--h)
          var(--vtmn-semantic-color_background-primary--s)
          var(--vtmn-semantic-color_background-primary--l) / 60%
      )
      60%,
    hsl(
        var(--vtmn-semantic-color_background-primary--h)
          var(--vtmn-semantic-color_background-primary--s)
          var(--vtmn-semantic-color_background-primary--l) / 30%
      )
      90%,
    hsl(
      var(--vtmn-semantic-color_background-primary--h)
        var(--vtmn-semantic-color_background-primary--s)
        var(--vtmn-semantic-color_background-primary--l) / 0%
    )
  );
  animation: var(--vtmn-animation_shimmer);
  content: '';
}

.vtmn-skeleton_line {
  block-size: rem(8px);
  border-radius: var(--vtmn-radius_200);
}

.vtmn-skeleton_avatar {
  inline-size: rem(32px);
  block-size: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}
