@layer ui-reset, ui;

/* shimmer */
@layer ui {
  @keyframes ui-shimmer {
    to {
      background-position-x: calc(100% + var(--shimmer-spread)), 0;
    }
  }

  .shimmer {
    --shimmer-duration: 2s;
    --shimmer-spread: calc(3ch + 40px);
    --shimmer-angle: 20deg;
    --shimmer-color: currentColor;
    --shimmer-muted: color-mix(in oklch, currentColor, var(--ui-neutral-0) 60%);
    background-image: linear-gradient(calc(90deg + var(--shimmer-angle)), transparent, var(--shimmer-color), transparent), linear-gradient(var(--shimmer-muted), var(--shimmer-muted));
    background-size: var(--shimmer-spread) 100%,
    100% 100%;
    background-position: calc(-1 * var(--shimmer-spread)) 0,
    0 0;
    -webkit-text-fill-color: transparent;
    animation: ui-shimmer var(--shimmer-duration) var(--ease-in-out-sine) infinite;
    background-repeat: no-repeat;
    background-clip: text;

    &:dir(rtl) {
      animation-direction: reverse;
    }

    &.reverse {
      animation-direction: reverse;

      &:dir(rtl) {
        animation-direction: normal;
      }
    }

    &.once {
      animation-iteration-count: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}