https://collectiviq.ai/assets/webawesome/chunks/chunk.75CPQRLT.js

1/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
2
3// _bundle_/src/components/skeleton/skeleton.styles.ts
4import { css } from "lit";
5var skeleton_styles_default = css`
6  :host {
7    --color: var(--wa-color-neutral-fill-normal);
8    --sheen-color: color-mix(in oklab, var(--color), var(--wa-color-surface-raised));
9
10    display: flex;
11    position: relative;
12    width: 100%;
13    height: 100%;
14    min-height: 1rem;
15  }
16
17  .indicator {
18    flex: 1 1 auto;
19    background: var(--color);
20    border-radius: var(--wa-border-radius-pill);
21  }
22
23  :host([effect='sheen']) .indicator {
24    background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
25    background-size: 400% 100%;
26    animation: sheen 8s ease-in-out infinite;
27  }
28
29  :host([effect='pulse']) .indicator {
30    animation: pulse 2s ease-in-out 0.5s infinite;
31  }
32
33  /* Forced colors mode */
34  @media (forced-colors: active) {
35    :host {
36      --color: GrayText;
37    }
38  }
39
40  @keyframes sheen {
41    0% {
42      background-position: 200% 0;
43    }
44    to {
45      background-position: -200% 0;
46    }
47  }
48
49  @keyframes pulse {
50    0% {
51      opacity: 1;
52    }
53    50% {
54      opacity: 0.4;
55    }
56    100% {
57      opacity: 1;
58    }
59  }
60`;
61
62export {
63  skeleton_styles_default
64};