{"version":3,"file":"variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element, matched against the\n *   component's actual shadow DOM markup (e.g., '.card', '.field') — a bare\n *   word like 'button' is a TYPE selector for a literal `<button>` tag, not\n *   a part/class selector. Use `'[part=\"button\"]'` for components whose root\n *   is a `<span part=\"button\">`/`<a part=\"button\">` (e.g. ore-button, which\n *   never renders a `<button>` tag).\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('[part=\"button\"]'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Frost neutral with elevation: combine halo with elevation shadow */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--halo-shadow-neutral), var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Frost color with elevation: combine halo with elevation shadow */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_theme-halo), var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"+BA2BA,IAAa,EAAqB,GAAqB,EAAA,GAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}