{"version":3,"file":"skeleton.css.cjs","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .stack {\n    width: calc(100% - 2px);\n  }\n\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}