{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GlobalFocusRing/style.ts"],"sourcesContent":["export const focusRingColor = (color: string) => `color-mix(in srgb, ${color} 90%, transparent)`;\n\nexport const globalFocusRingCSS = `\n[data-lobe-global-focus-ring] {\n  all: initial;\n  position: fixed;\n  position-anchor: --lobe-global-focus;\n  top: anchor(top);\n  right: anchor(right);\n  bottom: anchor(bottom);\n  left: anchor(left);\n  position-visibility: anchors-visible;\n  pointer-events: none;\n  border-radius: inherit;\n  outline: 2px solid ${focusRingColor('var(--lobe-focus-ring-color)')};\n  outline-offset: 2px;\n  animation: lobe-global-focus-in 200ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-lobe-global-focus-ring]:not(:popover-open) { display: none; }\n[data-lobe-global-focus-ring]::backdrop { background: transparent; pointer-events: none; }\n@keyframes lobe-global-focus-in {\n  from { opacity: 0.25; outline-offset: 5px; }\n  to { opacity: 1; outline-offset: 2px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-lobe-global-focus-ring] { animation: none; }\n}\n@media (forced-colors: active) {\n  [data-lobe-global-focus-ring] { outline-color: CanvasText; animation: none; }\n}\n`;\n"],"mappings":";AAAA,MAAa,kBAAkB,UAAkB,sBAAsB,MAAM;AAE7E,MAAa,qBAAqB;;;;;;;;;;;;uBAYX,eAAe,8BAA8B,EAAE"}