[{"data":1,"prerenderedAt":4025},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-pseudo-elements":407,"-docs-theme-modifiers-composables-pseudo-elements-surround":4020},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":4012,"extension":4013,"links":4014,"meta":4015,"navigation":4016,"path":397,"seo":4017,"sitemap":4018,"stem":398,"__hash__":4019},"docs_theme/docs/theme/modifiers/02.composables/05.pseudo-elements.md","Pseudo-Elements Modifiers",{"type":411,"value":412,"toc":3990},"minimark",[413,417,434,438,441,482,488,502,1072,1077,1115,1131,1137,1146,1467,1470,1499,1505,1513,1886,1889,1913,1919,1925,2257,2260,2284,2290,2296,2299,2323,2329,2335,2338,2362,2368,2374,2657,2660,2684,2690,2703,2706,2730,2736,2746,2749,2773,2779,2785,3104,3109,3278,3282,3286,3576,3580,3841,3845,3900,3904,3986],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433],"p",{},"Pseudo-element modifiers let you apply utility styles to specific sub-parts of an element. They wrap utility declarations in CSS pseudo-element selectors like ",[422,423,424],"code",{},"::before",", ",[422,427,428],{},"::after",", and ",[422,431,432],{},"::placeholder",", generating variant utility classes that target these element fragments.",[414,435,437],{"id":436},"why-use-pseudo-element-modifiers","Why Use Pseudo-Element Modifiers?",[418,439,440],{},"Pseudo-element modifiers help you:",[442,443,444,458,464,470,476],"ul",{},[445,446,447,451,452,454,455,457],"li",{},[448,449,450],"strong",{},"Style generated content",": Control the appearance of ",[422,453,424],{}," and ",[422,456,428],{}," pseudo-elements",[445,459,460,463],{},[448,461,462],{},"Customize form placeholders",": Style placeholder text without custom CSS",[445,465,466,469],{},[448,467,468],{},"Enhance text selection",": Change the appearance of selected text",[445,471,472,475],{},[448,473,474],{},"Style list markers",": Customize bullet points and list numbers",[445,477,478,481],{},[448,479,480],{},"Target file inputs",": Style the file upload button in file input elements",[414,483,485],{"id":484},"usebeforemodifier",[422,486,487],{},"useBeforeModifier",[418,489,490,491,494,495,497,498,501],{},"The ",[422,492,493],{},"useBeforeModifier()"," function creates a modifier that applies styles to the ",[422,496,424],{}," pseudo-element. It automatically injects ",[422,499,500],{},"content: ''"," to ensure the pseudo-element is rendered.",[503,504,505,818,1019],"tabs",{},[506,507,510],"tabs-item",{"icon":508,"label":509},"i-lucide-code","Code",[511,512,518],"pre",{"className":513,"code":514,"filename":515,"language":516,"meta":517,"style":517},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility, useWidthUtility, useHeightUtility } from \"@styleframe/theme\";\nimport { useBeforeModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst before = useBeforeModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: '#006cff',\n}, [before]);\n\nuseWidthUtility(s, {\n    full: '100%',\n}, [before]);\n\nuseHeightUtility(s, {\n    px: '1px',\n}, [before]);\n\nexport default s;\n","styleframe.config.ts","ts","",[422,519,520,556,590,612,618,639,644,661,666,680,702,713,718,730,747,756,761,773,790,799,804],{"__ignoreMap":517},[521,522,525,529,533,537,540,543,546,550,553],"span",{"class":523,"line":524},"line",1,[521,526,528],{"class":527},"s7zQu","import",[521,530,532],{"class":531},"sMK4o"," {",[521,534,536],{"class":535},"sTEyZ"," styleframe",[521,538,539],{"class":531}," }",[521,541,542],{"class":527}," from",[521,544,545],{"class":531}," \"",[521,547,549],{"class":548},"sfazB","styleframe",[521,551,552],{"class":531},"\"",[521,554,555],{"class":531},";\n",[521,557,559,561,563,566,569,572,574,577,579,581,583,586,588],{"class":523,"line":558},2,[521,560,528],{"class":527},[521,562,532],{"class":531},[521,564,565],{"class":535}," useBackgroundColorUtility",[521,567,568],{"class":531},",",[521,570,571],{"class":535}," useWidthUtility",[521,573,568],{"class":531},[521,575,576],{"class":535}," useHeightUtility",[521,578,539],{"class":531},[521,580,542],{"class":527},[521,582,545],{"class":531},[521,584,585],{"class":548},"@styleframe/theme",[521,587,552],{"class":531},[521,589,555],{"class":531},[521,591,593,595,597,600,602,604,606,608,610],{"class":523,"line":592},3,[521,594,528],{"class":527},[521,596,532],{"class":531},[521,598,599],{"class":535}," useBeforeModifier",[521,601,539],{"class":531},[521,603,542],{"class":527},[521,605,545],{"class":531},[521,607,585],{"class":548},[521,609,552],{"class":531},[521,611,555],{"class":531},[521,613,615],{"class":523,"line":614},4,[521,616,617],{"emptyLinePlaceholder":206},"\n",[521,619,621,625,628,631,634,637],{"class":523,"line":620},5,[521,622,624],{"class":623},"spNyl","const",[521,626,627],{"class":535}," s ",[521,629,630],{"class":531},"=",[521,632,536],{"class":633},"s2Zo4",[521,635,636],{"class":535},"()",[521,638,555],{"class":531},[521,640,642],{"class":523,"line":641},6,[521,643,617],{"emptyLinePlaceholder":206},[521,645,647,649,652,654,656,659],{"class":523,"line":646},7,[521,648,624],{"class":623},[521,650,651],{"class":535}," before ",[521,653,630],{"class":531},[521,655,599],{"class":633},[521,657,658],{"class":535},"(s)",[521,660,555],{"class":531},[521,662,664],{"class":523,"line":663},8,[521,665,617],{"emptyLinePlaceholder":206},[521,667,669,672,675,677],{"class":523,"line":668},9,[521,670,671],{"class":633},"useBackgroundColorUtility",[521,673,674],{"class":535},"(s",[521,676,568],{"class":531},[521,678,679],{"class":531}," {\n",[521,681,683,687,690,693,696,699],{"class":523,"line":682},10,[521,684,686],{"class":685},"swJcz","    primary",[521,688,689],{"class":531},":",[521,691,692],{"class":531}," '",[521,694,695],{"class":548},"#006cff",[521,697,698],{"class":531},"'",[521,700,701],{"class":531},",\n",[521,703,705,708,711],{"class":523,"line":704},11,[521,706,707],{"class":531},"},",[521,709,710],{"class":535}," [before])",[521,712,555],{"class":531},[521,714,716],{"class":523,"line":715},12,[521,717,617],{"emptyLinePlaceholder":206},[521,719,721,724,726,728],{"class":523,"line":720},13,[521,722,723],{"class":633},"useWidthUtility",[521,725,674],{"class":535},[521,727,568],{"class":531},[521,729,679],{"class":531},[521,731,733,736,738,740,743,745],{"class":523,"line":732},14,[521,734,735],{"class":685},"    full",[521,737,689],{"class":531},[521,739,692],{"class":531},[521,741,742],{"class":548},"100%",[521,744,698],{"class":531},[521,746,701],{"class":531},[521,748,750,752,754],{"class":523,"line":749},15,[521,751,707],{"class":531},[521,753,710],{"class":535},[521,755,555],{"class":531},[521,757,759],{"class":523,"line":758},16,[521,760,617],{"emptyLinePlaceholder":206},[521,762,764,767,769,771],{"class":523,"line":763},17,[521,765,766],{"class":633},"useHeightUtility",[521,768,674],{"class":535},[521,770,568],{"class":531},[521,772,679],{"class":531},[521,774,776,779,781,783,786,788],{"class":523,"line":775},18,[521,777,778],{"class":685},"    px",[521,780,689],{"class":531},[521,782,692],{"class":531},[521,784,785],{"class":548},"1px",[521,787,698],{"class":531},[521,789,701],{"class":531},[521,791,793,795,797],{"class":523,"line":792},19,[521,794,707],{"class":531},[521,796,710],{"class":535},[521,798,555],{"class":531},[521,800,802],{"class":523,"line":801},20,[521,803,617],{"emptyLinePlaceholder":206},[521,805,807,810,813,816],{"class":523,"line":806},21,[521,808,809],{"class":527},"export",[521,811,812],{"class":527}," default",[521,814,815],{"class":535}," s",[521,817,555],{"class":531},[506,819,821],{"icon":140,"label":820},"Output",[511,822,827],{"className":823,"code":824,"filename":825,"language":826,"meta":517,"style":517},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._background-color\\:primary { background-color: #006cff; }\n\n._before\\:background-color\\:primary {\n    &::before { content: ''; background-color: #006cff; }\n}\n\n._before\\:width\\:full {\n    &::before { content: ''; width: 100%; }\n}\n\n._before\\:height\\:px {\n    &::before { content: ''; height: 1px; }\n}\n","styleframe/index.css","css",[422,828,829,864,868,886,913,918,922,940,965,969,973,991,1015],{"__ignoreMap":517},[521,830,831,834,838,841,844,846,850,852,855,858,861],{"class":523,"line":524},[521,832,833],{"class":531},".",[521,835,837],{"class":836},"sBMFI","_background-color",[521,839,840],{"class":535},"\\:",[521,842,843],{"class":836},"primary",[521,845,532],{"class":531},[521,847,849],{"class":848},"sqsOY"," background-color",[521,851,689],{"class":531},[521,853,854],{"class":531}," #",[521,856,857],{"class":535},"006cff",[521,859,860],{"class":531},";",[521,862,863],{"class":531}," }\n",[521,865,866],{"class":523,"line":558},[521,867,617],{"emptyLinePlaceholder":206},[521,869,870,872,875,877,880,882,884],{"class":523,"line":592},[521,871,833],{"class":531},[521,873,874],{"class":836},"_before",[521,876,840],{"class":535},[521,878,879],{"class":836},"background-color",[521,881,840],{"class":535},[521,883,843],{"class":836},[521,885,679],{"class":531},[521,887,888,891,893,896,899,901,903,905,907,909,911],{"class":523,"line":614},[521,889,890],{"class":535},"    &",[521,892,689],{"class":531},[521,894,895],{"class":535},":before { content: ",[521,897,898],{"class":531},"''",[521,900,860],{"class":531},[521,902,849],{"class":848},[521,904,689],{"class":531},[521,906,854],{"class":531},[521,908,857],{"class":535},[521,910,860],{"class":531},[521,912,863],{"class":531},[521,914,915],{"class":523,"line":620},[521,916,917],{"class":535},"}\n",[521,919,920],{"class":523,"line":641},[521,921,617],{"emptyLinePlaceholder":206},[521,923,924,926,928,930,933,935,938],{"class":523,"line":646},[521,925,833],{"class":531},[521,927,874],{"class":836},[521,929,840],{"class":535},[521,931,932],{"class":836},"width",[521,934,840],{"class":535},[521,936,937],{"class":836},"full",[521,939,679],{"class":531},[521,941,942,944,946,948,950,952,955,957,961,963],{"class":523,"line":663},[521,943,890],{"class":535},[521,945,689],{"class":531},[521,947,895],{"class":535},[521,949,898],{"class":531},[521,951,860],{"class":531},[521,953,954],{"class":848}," width",[521,956,689],{"class":531},[521,958,960],{"class":959},"sbssI"," 100%",[521,962,860],{"class":531},[521,964,863],{"class":531},[521,966,967],{"class":523,"line":668},[521,968,917],{"class":535},[521,970,971],{"class":523,"line":682},[521,972,617],{"emptyLinePlaceholder":206},[521,974,975,977,979,981,984,986,989],{"class":523,"line":704},[521,976,833],{"class":531},[521,978,874],{"class":836},[521,980,840],{"class":535},[521,982,983],{"class":836},"height",[521,985,840],{"class":535},[521,987,988],{"class":836},"px",[521,990,679],{"class":531},[521,992,993,995,997,999,1001,1003,1006,1008,1011,1013],{"class":523,"line":715},[521,994,890],{"class":535},[521,996,689],{"class":531},[521,998,895],{"class":535},[521,1000,898],{"class":531},[521,1002,860],{"class":531},[521,1004,1005],{"class":848}," height",[521,1007,689],{"class":531},[521,1009,1010],{"class":959}," 1px",[521,1012,860],{"class":531},[521,1014,863],{"class":531},[521,1016,1017],{"class":523,"line":720},[521,1018,917],{"class":535},[506,1020,1023],{"icon":1021,"label":1022},"i-lucide-layout","Usage",[511,1024,1028],{"className":1025,"code":1026,"language":1027,"meta":517,"style":517},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Add a decorative line before an element -->\n\u003Ch2 class=\"_before:background-color:primary _before:width:full _before:height:px\">\n    Section Title\n\u003C/h2>\n","html",[422,1029,1030,1036,1058,1063],{"__ignoreMap":517},[521,1031,1032],{"class":523,"line":524},[521,1033,1035],{"class":1034},"sHwdD","\u003C!-- Add a decorative line before an element -->\n",[521,1037,1038,1041,1043,1046,1048,1050,1053,1055],{"class":523,"line":558},[521,1039,1040],{"class":531},"\u003C",[521,1042,414],{"class":685},[521,1044,1045],{"class":623}," class",[521,1047,630],{"class":531},[521,1049,552],{"class":531},[521,1051,1052],{"class":548},"_before:background-color:primary _before:width:full _before:height:px",[521,1054,552],{"class":531},[521,1056,1057],{"class":531},">\n",[521,1059,1060],{"class":523,"line":592},[521,1061,1062],{"class":535},"    Section Title\n",[521,1064,1065,1068,1070],{"class":523,"line":614},[521,1066,1067],{"class":531},"\u003C/",[521,1069,414],{"class":685},[521,1071,1057],{"class":531},[1073,1074,1076],"h4",{"id":1075},"css-selector","CSS Selector",[1078,1079,1080,1095],"table",{},[1081,1082,1083],"thead",{},[1084,1085,1086,1090,1092],"tr",{},[1087,1088,1089],"th",{},"Modifier Name",[1087,1091,1076],{},[1087,1093,1094],{},"Auto-injected",[1096,1097,1098],"tbody",{},[1084,1099,1100,1106,1111],{},[1101,1102,1103],"td",{},[422,1104,1105],{},"before",[1101,1107,1108],{},[422,1109,1110],{},"&::before",[1101,1112,1113],{},[422,1114,500],{},[1116,1117,1118,1121,1122,454,1124,1127,1128,1130],"tip",{},[448,1119,1120],{},"Pro tip",": The ",[422,1123,1105],{},[422,1125,1126],{},"after"," modifiers automatically inject ",[422,1129,500],{}," into the declarations. This ensures the pseudo-element is rendered without requiring a separate content utility.",[414,1132,1134],{"id":1133},"useaftermodifier",[422,1135,1136],{},"useAfterModifier",[418,1138,490,1139,494,1142,497,1144,833],{},[422,1140,1141],{},"useAfterModifier()",[422,1143,428],{},[422,1145,500],{},[503,1147,1148,1306,1422],{},[506,1149,1150],{"icon":508,"label":509},[511,1151,1153],{"className":513,"code":1152,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { useAfterModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst after = useAfterModifier(s);\n\nuseBackgroundColorUtility(s, {\n    overlay: 'rgba(0, 0, 0, 0.5)',\n}, [after]);\n\nexport default s;\n",[422,1154,1155,1175,1195,1216,1220,1234,1238,1253,1257,1267,1283,1292,1296],{"__ignoreMap":517},[521,1156,1157,1159,1161,1163,1165,1167,1169,1171,1173],{"class":523,"line":524},[521,1158,528],{"class":527},[521,1160,532],{"class":531},[521,1162,536],{"class":535},[521,1164,539],{"class":531},[521,1166,542],{"class":527},[521,1168,545],{"class":531},[521,1170,549],{"class":548},[521,1172,552],{"class":531},[521,1174,555],{"class":531},[521,1176,1177,1179,1181,1183,1185,1187,1189,1191,1193],{"class":523,"line":558},[521,1178,528],{"class":527},[521,1180,532],{"class":531},[521,1182,565],{"class":535},[521,1184,539],{"class":531},[521,1186,542],{"class":527},[521,1188,545],{"class":531},[521,1190,585],{"class":548},[521,1192,552],{"class":531},[521,1194,555],{"class":531},[521,1196,1197,1199,1201,1204,1206,1208,1210,1212,1214],{"class":523,"line":592},[521,1198,528],{"class":527},[521,1200,532],{"class":531},[521,1202,1203],{"class":535}," useAfterModifier",[521,1205,539],{"class":531},[521,1207,542],{"class":527},[521,1209,545],{"class":531},[521,1211,585],{"class":548},[521,1213,552],{"class":531},[521,1215,555],{"class":531},[521,1217,1218],{"class":523,"line":614},[521,1219,617],{"emptyLinePlaceholder":206},[521,1221,1222,1224,1226,1228,1230,1232],{"class":523,"line":620},[521,1223,624],{"class":623},[521,1225,627],{"class":535},[521,1227,630],{"class":531},[521,1229,536],{"class":633},[521,1231,636],{"class":535},[521,1233,555],{"class":531},[521,1235,1236],{"class":523,"line":641},[521,1237,617],{"emptyLinePlaceholder":206},[521,1239,1240,1242,1245,1247,1249,1251],{"class":523,"line":646},[521,1241,624],{"class":623},[521,1243,1244],{"class":535}," after ",[521,1246,630],{"class":531},[521,1248,1203],{"class":633},[521,1250,658],{"class":535},[521,1252,555],{"class":531},[521,1254,1255],{"class":523,"line":663},[521,1256,617],{"emptyLinePlaceholder":206},[521,1258,1259,1261,1263,1265],{"class":523,"line":668},[521,1260,671],{"class":633},[521,1262,674],{"class":535},[521,1264,568],{"class":531},[521,1266,679],{"class":531},[521,1268,1269,1272,1274,1276,1279,1281],{"class":523,"line":682},[521,1270,1271],{"class":685},"    overlay",[521,1273,689],{"class":531},[521,1275,692],{"class":531},[521,1277,1278],{"class":548},"rgba(0, 0, 0, 0.5)",[521,1280,698],{"class":531},[521,1282,701],{"class":531},[521,1284,1285,1287,1290],{"class":523,"line":704},[521,1286,707],{"class":531},[521,1288,1289],{"class":535}," [after])",[521,1291,555],{"class":531},[521,1293,1294],{"class":523,"line":715},[521,1295,617],{"emptyLinePlaceholder":206},[521,1297,1298,1300,1302,1304],{"class":523,"line":720},[521,1299,809],{"class":527},[521,1301,812],{"class":527},[521,1303,815],{"class":535},[521,1305,555],{"class":531},[506,1307,1308],{"icon":140,"label":820},[511,1309,1311],{"className":823,"code":1310,"filename":825,"language":826,"meta":517,"style":517},"._background-color\\:overlay { background-color: rgba(0, 0, 0, 0.5); }\n\n._after\\:background-color\\:overlay {\n    &::after { content: ''; background-color: rgba(0, 0, 0, 0.5); }\n}\n",[422,1312,1313,1358,1362,1379,1418],{"__ignoreMap":517},[521,1314,1315,1317,1319,1321,1324,1326,1328,1330,1333,1336,1339,1341,1344,1346,1348,1350,1353,1356],{"class":523,"line":524},[521,1316,833],{"class":531},[521,1318,837],{"class":836},[521,1320,840],{"class":535},[521,1322,1323],{"class":836},"overlay",[521,1325,532],{"class":531},[521,1327,849],{"class":848},[521,1329,689],{"class":531},[521,1331,1332],{"class":633}," rgba",[521,1334,1335],{"class":531},"(",[521,1337,1338],{"class":959},"0",[521,1340,568],{"class":531},[521,1342,1343],{"class":959}," 0",[521,1345,568],{"class":531},[521,1347,1343],{"class":959},[521,1349,568],{"class":531},[521,1351,1352],{"class":959}," 0.5",[521,1354,1355],{"class":531},");",[521,1357,863],{"class":531},[521,1359,1360],{"class":523,"line":558},[521,1361,617],{"emptyLinePlaceholder":206},[521,1363,1364,1366,1369,1371,1373,1375,1377],{"class":523,"line":592},[521,1365,833],{"class":531},[521,1367,1368],{"class":836},"_after",[521,1370,840],{"class":535},[521,1372,879],{"class":836},[521,1374,840],{"class":535},[521,1376,1323],{"class":836},[521,1378,679],{"class":531},[521,1380,1381,1383,1385,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416],{"class":523,"line":614},[521,1382,890],{"class":535},[521,1384,689],{"class":531},[521,1386,1387],{"class":535},":after { content: ",[521,1389,898],{"class":531},[521,1391,860],{"class":531},[521,1393,849],{"class":848},[521,1395,689],{"class":531},[521,1397,1332],{"class":633},[521,1399,1335],{"class":531},[521,1401,1338],{"class":959},[521,1403,568],{"class":531},[521,1405,1343],{"class":959},[521,1407,568],{"class":531},[521,1409,1343],{"class":959},[521,1411,568],{"class":531},[521,1413,1352],{"class":959},[521,1415,1355],{"class":531},[521,1417,863],{"class":531},[521,1419,1420],{"class":523,"line":620},[521,1421,917],{"class":535},[506,1423,1424],{"icon":1021,"label":1022},[511,1425,1427],{"className":1025,"code":1426,"language":1027,"meta":517,"style":517},"\u003C!-- Add an overlay after an element -->\n\u003Cdiv class=\"_after:background-color:overlay\">\n    Content with overlay\n\u003C/div>\n",[422,1428,1429,1434,1454,1459],{"__ignoreMap":517},[521,1430,1431],{"class":523,"line":524},[521,1432,1433],{"class":1034},"\u003C!-- Add an overlay after an element -->\n",[521,1435,1436,1438,1441,1443,1445,1447,1450,1452],{"class":523,"line":558},[521,1437,1040],{"class":531},[521,1439,1440],{"class":685},"div",[521,1442,1045],{"class":623},[521,1444,630],{"class":531},[521,1446,552],{"class":531},[521,1448,1449],{"class":548},"_after:background-color:overlay",[521,1451,552],{"class":531},[521,1453,1057],{"class":531},[521,1455,1456],{"class":523,"line":592},[521,1457,1458],{"class":535},"    Content with overlay\n",[521,1460,1461,1463,1465],{"class":523,"line":614},[521,1462,1067],{"class":531},[521,1464,1440],{"class":685},[521,1466,1057],{"class":531},[1073,1468,1076],{"id":1469},"css-selector-1",[1078,1471,1472,1482],{},[1081,1473,1474],{},[1084,1475,1476,1478,1480],{},[1087,1477,1089],{},[1087,1479,1076],{},[1087,1481,1094],{},[1096,1483,1484],{},[1084,1485,1486,1490,1495],{},[1101,1487,1488],{},[422,1489,1126],{},[1101,1491,1492],{},[422,1493,1494],{},"&::after",[1101,1496,1497],{},[422,1498,500],{},[414,1500,1502],{"id":1501},"useplaceholdermodifier",[422,1503,1504],{},"usePlaceholderModifier",[418,1506,490,1507,494,1510,1512],{},[422,1508,1509],{},"usePlaceholderModifier()",[422,1511,432],{}," pseudo-element of form inputs.",[503,1514,1515,1719,1839],{},[506,1516,1517],{"icon":508,"label":509},[511,1518,1520],{"className":513,"code":1519,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility, useOpacityUtility } from \"@styleframe/theme\";\nimport { usePlaceholderModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst placeholder = usePlaceholderModifier(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n}, [placeholder]);\n\nuseOpacityUtility(s, {\n    75: '0.75',\n}, [placeholder]);\n\nexport default s;\n",[422,1521,1522,1542,1568,1589,1593,1607,1611,1626,1630,1641,1657,1666,1670,1681,1697,1705,1709],{"__ignoreMap":517},[521,1523,1524,1526,1528,1530,1532,1534,1536,1538,1540],{"class":523,"line":524},[521,1525,528],{"class":527},[521,1527,532],{"class":531},[521,1529,536],{"class":535},[521,1531,539],{"class":531},[521,1533,542],{"class":527},[521,1535,545],{"class":531},[521,1537,549],{"class":548},[521,1539,552],{"class":531},[521,1541,555],{"class":531},[521,1543,1544,1546,1548,1551,1553,1556,1558,1560,1562,1564,1566],{"class":523,"line":558},[521,1545,528],{"class":527},[521,1547,532],{"class":531},[521,1549,1550],{"class":535}," useTextColorUtility",[521,1552,568],{"class":531},[521,1554,1555],{"class":535}," useOpacityUtility",[521,1557,539],{"class":531},[521,1559,542],{"class":527},[521,1561,545],{"class":531},[521,1563,585],{"class":548},[521,1565,552],{"class":531},[521,1567,555],{"class":531},[521,1569,1570,1572,1574,1577,1579,1581,1583,1585,1587],{"class":523,"line":592},[521,1571,528],{"class":527},[521,1573,532],{"class":531},[521,1575,1576],{"class":535}," usePlaceholderModifier",[521,1578,539],{"class":531},[521,1580,542],{"class":527},[521,1582,545],{"class":531},[521,1584,585],{"class":548},[521,1586,552],{"class":531},[521,1588,555],{"class":531},[521,1590,1591],{"class":523,"line":614},[521,1592,617],{"emptyLinePlaceholder":206},[521,1594,1595,1597,1599,1601,1603,1605],{"class":523,"line":620},[521,1596,624],{"class":623},[521,1598,627],{"class":535},[521,1600,630],{"class":531},[521,1602,536],{"class":633},[521,1604,636],{"class":535},[521,1606,555],{"class":531},[521,1608,1609],{"class":523,"line":641},[521,1610,617],{"emptyLinePlaceholder":206},[521,1612,1613,1615,1618,1620,1622,1624],{"class":523,"line":646},[521,1614,624],{"class":623},[521,1616,1617],{"class":535}," placeholder ",[521,1619,630],{"class":531},[521,1621,1576],{"class":633},[521,1623,658],{"class":535},[521,1625,555],{"class":531},[521,1627,1628],{"class":523,"line":663},[521,1629,617],{"emptyLinePlaceholder":206},[521,1631,1632,1635,1637,1639],{"class":523,"line":668},[521,1633,1634],{"class":633},"useTextColorUtility",[521,1636,674],{"class":535},[521,1638,568],{"class":531},[521,1640,679],{"class":531},[521,1642,1643,1646,1648,1650,1653,1655],{"class":523,"line":682},[521,1644,1645],{"class":685},"    muted",[521,1647,689],{"class":531},[521,1649,692],{"class":531},[521,1651,1652],{"class":548},"#6c757d",[521,1654,698],{"class":531},[521,1656,701],{"class":531},[521,1658,1659,1661,1664],{"class":523,"line":704},[521,1660,707],{"class":531},[521,1662,1663],{"class":535}," [placeholder])",[521,1665,555],{"class":531},[521,1667,1668],{"class":523,"line":715},[521,1669,617],{"emptyLinePlaceholder":206},[521,1671,1672,1675,1677,1679],{"class":523,"line":720},[521,1673,1674],{"class":633},"useOpacityUtility",[521,1676,674],{"class":535},[521,1678,568],{"class":531},[521,1680,679],{"class":531},[521,1682,1683,1686,1688,1690,1693,1695],{"class":523,"line":732},[521,1684,1685],{"class":959},"    75",[521,1687,689],{"class":531},[521,1689,692],{"class":531},[521,1691,1692],{"class":548},"0.75",[521,1694,698],{"class":531},[521,1696,701],{"class":531},[521,1698,1699,1701,1703],{"class":523,"line":749},[521,1700,707],{"class":531},[521,1702,1663],{"class":535},[521,1704,555],{"class":531},[521,1706,1707],{"class":523,"line":758},[521,1708,617],{"emptyLinePlaceholder":206},[521,1710,1711,1713,1715,1717],{"class":523,"line":763},[521,1712,809],{"class":527},[521,1714,812],{"class":527},[521,1716,815],{"class":535},[521,1718,555],{"class":531},[506,1720,1721],{"icon":140,"label":820},[511,1722,1724],{"className":823,"code":1723,"filename":825,"language":826,"meta":517,"style":517},"._text-color\\:muted { color: #6c757d; }\n\n._placeholder\\:text-color\\:muted {\n    &::placeholder { color: #6c757d; }\n}\n\n._placeholder\\:opacity\\:75 {\n    &::placeholder { opacity: 0.75; }\n}\n",[422,1725,1726,1754,1758,1776,1794,1798,1802,1820,1835],{"__ignoreMap":517},[521,1727,1728,1730,1733,1735,1738,1740,1743,1745,1747,1750,1752],{"class":523,"line":524},[521,1729,833],{"class":531},[521,1731,1732],{"class":836},"_text-color",[521,1734,840],{"class":535},[521,1736,1737],{"class":836},"muted",[521,1739,532],{"class":531},[521,1741,1742],{"class":848}," color",[521,1744,689],{"class":531},[521,1746,854],{"class":531},[521,1748,1749],{"class":535},"6c757d",[521,1751,860],{"class":531},[521,1753,863],{"class":531},[521,1755,1756],{"class":523,"line":558},[521,1757,617],{"emptyLinePlaceholder":206},[521,1759,1760,1762,1765,1767,1770,1772,1774],{"class":523,"line":592},[521,1761,833],{"class":531},[521,1763,1764],{"class":836},"_placeholder",[521,1766,840],{"class":535},[521,1768,1769],{"class":836},"text-color",[521,1771,840],{"class":535},[521,1773,1737],{"class":836},[521,1775,679],{"class":531},[521,1777,1778,1780,1782,1785,1788,1790,1792],{"class":523,"line":614},[521,1779,890],{"class":535},[521,1781,689],{"class":531},[521,1783,1784],{"class":535},":placeholder { color: ",[521,1786,1787],{"class":531},"#",[521,1789,1749],{"class":535},[521,1791,860],{"class":531},[521,1793,863],{"class":531},[521,1795,1796],{"class":523,"line":620},[521,1797,917],{"class":535},[521,1799,1800],{"class":523,"line":641},[521,1801,617],{"emptyLinePlaceholder":206},[521,1803,1804,1806,1808,1810,1813,1815,1818],{"class":523,"line":646},[521,1805,833],{"class":531},[521,1807,1764],{"class":836},[521,1809,840],{"class":535},[521,1811,1812],{"class":836},"opacity",[521,1814,840],{"class":535},[521,1816,1817],{"class":836},"75",[521,1819,679],{"class":531},[521,1821,1822,1824,1826,1829,1831,1833],{"class":523,"line":663},[521,1823,890],{"class":535},[521,1825,689],{"class":531},[521,1827,1828],{"class":535},":placeholder { opacity: ",[521,1830,1692],{"class":959},[521,1832,860],{"class":531},[521,1834,863],{"class":531},[521,1836,1837],{"class":523,"line":668},[521,1838,917],{"class":535},[506,1840,1841],{"icon":1021,"label":1022},[511,1842,1844],{"className":1025,"code":1843,"language":1027,"meta":517,"style":517},"\u003Cinput\n    class=\"_placeholder:text-color:muted _placeholder:opacity:75\"\n    placeholder=\"Enter your name...\"\n>\n",[422,1845,1846,1853,1868,1882],{"__ignoreMap":517},[521,1847,1848,1850],{"class":523,"line":524},[521,1849,1040],{"class":531},[521,1851,1852],{"class":685},"input\n",[521,1854,1855,1858,1860,1862,1865],{"class":523,"line":558},[521,1856,1857],{"class":623},"    class",[521,1859,630],{"class":531},[521,1861,552],{"class":531},[521,1863,1864],{"class":548},"_placeholder:text-color:muted _placeholder:opacity:75",[521,1866,1867],{"class":531},"\"\n",[521,1869,1870,1873,1875,1877,1880],{"class":523,"line":592},[521,1871,1872],{"class":623},"    placeholder",[521,1874,630],{"class":531},[521,1876,552],{"class":531},[521,1878,1879],{"class":548},"Enter your name...",[521,1881,1867],{"class":531},[521,1883,1884],{"class":523,"line":614},[521,1885,1057],{"class":531},[1073,1887,1076],{"id":1888},"css-selector-2",[1078,1890,1891,1899],{},[1081,1892,1893],{},[1084,1894,1895,1897],{},[1087,1896,1089],{},[1087,1898,1076],{},[1096,1900,1901],{},[1084,1902,1903,1908],{},[1101,1904,1905],{},[422,1906,1907],{},"placeholder",[1101,1909,1910],{},[422,1911,1912],{},"&::placeholder",[414,1914,1916],{"id":1915},"useselectionmodifier",[422,1917,1918],{},"useSelectionModifier",[418,1920,490,1921,1924],{},[422,1922,1923],{},"useSelectionModifier()"," function creates a modifier that applies styles to the text selection highlight.",[503,1926,1927,2125,2213],{},[506,1928,1929],{"icon":508,"label":509},[511,1930,1932],{"className":513,"code":1931,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility, useTextColorUtility } from \"@styleframe/theme\";\nimport { useSelectionModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst selection = useSelectionModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: '#006cff',\n}, [selection]);\n\nuseTextColorUtility(s, {\n    white: '#ffffff',\n}, [selection]);\n\nexport default s;\n",[422,1933,1934,1954,1978,1999,2003,2017,2021,2036,2040,2050,2064,2073,2077,2087,2103,2111,2115],{"__ignoreMap":517},[521,1935,1936,1938,1940,1942,1944,1946,1948,1950,1952],{"class":523,"line":524},[521,1937,528],{"class":527},[521,1939,532],{"class":531},[521,1941,536],{"class":535},[521,1943,539],{"class":531},[521,1945,542],{"class":527},[521,1947,545],{"class":531},[521,1949,549],{"class":548},[521,1951,552],{"class":531},[521,1953,555],{"class":531},[521,1955,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976],{"class":523,"line":558},[521,1957,528],{"class":527},[521,1959,532],{"class":531},[521,1961,565],{"class":535},[521,1963,568],{"class":531},[521,1965,1550],{"class":535},[521,1967,539],{"class":531},[521,1969,542],{"class":527},[521,1971,545],{"class":531},[521,1973,585],{"class":548},[521,1975,552],{"class":531},[521,1977,555],{"class":531},[521,1979,1980,1982,1984,1987,1989,1991,1993,1995,1997],{"class":523,"line":592},[521,1981,528],{"class":527},[521,1983,532],{"class":531},[521,1985,1986],{"class":535}," useSelectionModifier",[521,1988,539],{"class":531},[521,1990,542],{"class":527},[521,1992,545],{"class":531},[521,1994,585],{"class":548},[521,1996,552],{"class":531},[521,1998,555],{"class":531},[521,2000,2001],{"class":523,"line":614},[521,2002,617],{"emptyLinePlaceholder":206},[521,2004,2005,2007,2009,2011,2013,2015],{"class":523,"line":620},[521,2006,624],{"class":623},[521,2008,627],{"class":535},[521,2010,630],{"class":531},[521,2012,536],{"class":633},[521,2014,636],{"class":535},[521,2016,555],{"class":531},[521,2018,2019],{"class":523,"line":641},[521,2020,617],{"emptyLinePlaceholder":206},[521,2022,2023,2025,2028,2030,2032,2034],{"class":523,"line":646},[521,2024,624],{"class":623},[521,2026,2027],{"class":535}," selection ",[521,2029,630],{"class":531},[521,2031,1986],{"class":633},[521,2033,658],{"class":535},[521,2035,555],{"class":531},[521,2037,2038],{"class":523,"line":663},[521,2039,617],{"emptyLinePlaceholder":206},[521,2041,2042,2044,2046,2048],{"class":523,"line":668},[521,2043,671],{"class":633},[521,2045,674],{"class":535},[521,2047,568],{"class":531},[521,2049,679],{"class":531},[521,2051,2052,2054,2056,2058,2060,2062],{"class":523,"line":682},[521,2053,686],{"class":685},[521,2055,689],{"class":531},[521,2057,692],{"class":531},[521,2059,695],{"class":548},[521,2061,698],{"class":531},[521,2063,701],{"class":531},[521,2065,2066,2068,2071],{"class":523,"line":704},[521,2067,707],{"class":531},[521,2069,2070],{"class":535}," [selection])",[521,2072,555],{"class":531},[521,2074,2075],{"class":523,"line":715},[521,2076,617],{"emptyLinePlaceholder":206},[521,2078,2079,2081,2083,2085],{"class":523,"line":720},[521,2080,1634],{"class":633},[521,2082,674],{"class":535},[521,2084,568],{"class":531},[521,2086,679],{"class":531},[521,2088,2089,2092,2094,2096,2099,2101],{"class":523,"line":732},[521,2090,2091],{"class":685},"    white",[521,2093,689],{"class":531},[521,2095,692],{"class":531},[521,2097,2098],{"class":548},"#ffffff",[521,2100,698],{"class":531},[521,2102,701],{"class":531},[521,2104,2105,2107,2109],{"class":523,"line":749},[521,2106,707],{"class":531},[521,2108,2070],{"class":535},[521,2110,555],{"class":531},[521,2112,2113],{"class":523,"line":758},[521,2114,617],{"emptyLinePlaceholder":206},[521,2116,2117,2119,2121,2123],{"class":523,"line":763},[521,2118,809],{"class":527},[521,2120,812],{"class":527},[521,2122,815],{"class":535},[521,2124,555],{"class":531},[506,2126,2127],{"icon":140,"label":820},[511,2128,2130],{"className":823,"code":2129,"filename":825,"language":826,"meta":517,"style":517},"._selection\\:background-color\\:primary {\n    &::selection { background-color: #006cff; }\n}\n\n._selection\\:text-color\\:white {\n    &::selection { color: #ffffff; }\n}\n",[422,2131,2132,2149,2166,2170,2174,2191,2209],{"__ignoreMap":517},[521,2133,2134,2136,2139,2141,2143,2145,2147],{"class":523,"line":524},[521,2135,833],{"class":531},[521,2137,2138],{"class":836},"_selection",[521,2140,840],{"class":535},[521,2142,879],{"class":836},[521,2144,840],{"class":535},[521,2146,843],{"class":836},[521,2148,679],{"class":531},[521,2150,2151,2153,2155,2158,2160,2162,2164],{"class":523,"line":558},[521,2152,890],{"class":535},[521,2154,689],{"class":531},[521,2156,2157],{"class":535},":selection { background-color: ",[521,2159,1787],{"class":531},[521,2161,857],{"class":535},[521,2163,860],{"class":531},[521,2165,863],{"class":531},[521,2167,2168],{"class":523,"line":592},[521,2169,917],{"class":535},[521,2171,2172],{"class":523,"line":614},[521,2173,617],{"emptyLinePlaceholder":206},[521,2175,2176,2178,2180,2182,2184,2186,2189],{"class":523,"line":620},[521,2177,833],{"class":531},[521,2179,2138],{"class":836},[521,2181,840],{"class":535},[521,2183,1769],{"class":836},[521,2185,840],{"class":535},[521,2187,2188],{"class":836},"white",[521,2190,679],{"class":531},[521,2192,2193,2195,2197,2200,2202,2205,2207],{"class":523,"line":641},[521,2194,890],{"class":535},[521,2196,689],{"class":531},[521,2198,2199],{"class":535},":selection { color: ",[521,2201,1787],{"class":531},[521,2203,2204],{"class":535},"ffffff",[521,2206,860],{"class":531},[521,2208,863],{"class":531},[521,2210,2211],{"class":523,"line":646},[521,2212,917],{"class":535},[506,2214,2215],{"icon":1021,"label":1022},[511,2216,2218],{"className":1025,"code":2217,"language":1027,"meta":517,"style":517},"\u003C!-- Custom text selection colors -->\n\u003Cp class=\"_selection:background-color:primary _selection:text-color:white\">\n    Select this text to see custom highlight colors.\n\u003C/p>\n",[422,2219,2220,2225,2244,2249],{"__ignoreMap":517},[521,2221,2222],{"class":523,"line":524},[521,2223,2224],{"class":1034},"\u003C!-- Custom text selection colors -->\n",[521,2226,2227,2229,2231,2233,2235,2237,2240,2242],{"class":523,"line":558},[521,2228,1040],{"class":531},[521,2230,418],{"class":685},[521,2232,1045],{"class":623},[521,2234,630],{"class":531},[521,2236,552],{"class":531},[521,2238,2239],{"class":548},"_selection:background-color:primary _selection:text-color:white",[521,2241,552],{"class":531},[521,2243,1057],{"class":531},[521,2245,2246],{"class":523,"line":592},[521,2247,2248],{"class":535},"    Select this text to see custom highlight colors.\n",[521,2250,2251,2253,2255],{"class":523,"line":614},[521,2252,1067],{"class":531},[521,2254,418],{"class":685},[521,2256,1057],{"class":531},[1073,2258,1076],{"id":2259},"css-selector-3",[1078,2261,2262,2270],{},[1081,2263,2264],{},[1084,2265,2266,2268],{},[1087,2267,1089],{},[1087,2269,1076],{},[1096,2271,2272],{},[1084,2273,2274,2279],{},[1101,2275,2276],{},[422,2277,2278],{},"selection",[1101,2280,2281],{},[422,2282,2283],{},"&::selection",[414,2285,2287],{"id":2286},"usefirstlettermodifier",[422,2288,2289],{},"useFirstLetterModifier",[418,2291,490,2292,2295],{},[422,2293,2294],{},"useFirstLetterModifier()"," function creates a modifier that applies styles to the first letter of a text block.",[1073,2297,1076],{"id":2298},"css-selector-4",[1078,2300,2301,2309],{},[1081,2302,2303],{},[1084,2304,2305,2307],{},[1087,2306,1089],{},[1087,2308,1076],{},[1096,2310,2311],{},[1084,2312,2313,2318],{},[1101,2314,2315],{},[422,2316,2317],{},"first-letter",[1101,2319,2320],{},[422,2321,2322],{},"&::first-letter",[414,2324,2326],{"id":2325},"usefirstlinemodifier",[422,2327,2328],{},"useFirstLineModifier",[418,2330,490,2331,2334],{},[422,2332,2333],{},"useFirstLineModifier()"," function creates a modifier that applies styles to the first line of a text block.",[1073,2336,1076],{"id":2337},"css-selector-5",[1078,2339,2340,2348],{},[1081,2341,2342],{},[1084,2343,2344,2346],{},[1087,2345,1089],{},[1087,2347,1076],{},[1096,2349,2350],{},[1084,2351,2352,2357],{},[1101,2353,2354],{},[422,2355,2356],{},"first-line",[1101,2358,2359],{},[422,2360,2361],{},"&::first-line",[414,2363,2365],{"id":2364},"usemarkermodifier",[422,2366,2367],{},"useMarkerModifier",[418,2369,490,2370,2373],{},[422,2371,2372],{},"useMarkerModifier()"," function creates a modifier that applies styles to list item markers (bullets, numbers).",[503,2375,2376,2532,2577],{},[506,2377,2378],{"icon":508,"label":509},[511,2379,2381],{"className":513,"code":2380,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility } from \"@styleframe/theme\";\nimport { useMarkerModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst marker = useMarkerModifier(s);\n\nuseTextColorUtility(s, {\n    primary: '#006cff',\n}, [marker]);\n\nexport default s;\n",[422,2382,2383,2403,2423,2444,2448,2462,2466,2481,2485,2495,2509,2518,2522],{"__ignoreMap":517},[521,2384,2385,2387,2389,2391,2393,2395,2397,2399,2401],{"class":523,"line":524},[521,2386,528],{"class":527},[521,2388,532],{"class":531},[521,2390,536],{"class":535},[521,2392,539],{"class":531},[521,2394,542],{"class":527},[521,2396,545],{"class":531},[521,2398,549],{"class":548},[521,2400,552],{"class":531},[521,2402,555],{"class":531},[521,2404,2405,2407,2409,2411,2413,2415,2417,2419,2421],{"class":523,"line":558},[521,2406,528],{"class":527},[521,2408,532],{"class":531},[521,2410,1550],{"class":535},[521,2412,539],{"class":531},[521,2414,542],{"class":527},[521,2416,545],{"class":531},[521,2418,585],{"class":548},[521,2420,552],{"class":531},[521,2422,555],{"class":531},[521,2424,2425,2427,2429,2432,2434,2436,2438,2440,2442],{"class":523,"line":592},[521,2426,528],{"class":527},[521,2428,532],{"class":531},[521,2430,2431],{"class":535}," useMarkerModifier",[521,2433,539],{"class":531},[521,2435,542],{"class":527},[521,2437,545],{"class":531},[521,2439,585],{"class":548},[521,2441,552],{"class":531},[521,2443,555],{"class":531},[521,2445,2446],{"class":523,"line":614},[521,2447,617],{"emptyLinePlaceholder":206},[521,2449,2450,2452,2454,2456,2458,2460],{"class":523,"line":620},[521,2451,624],{"class":623},[521,2453,627],{"class":535},[521,2455,630],{"class":531},[521,2457,536],{"class":633},[521,2459,636],{"class":535},[521,2461,555],{"class":531},[521,2463,2464],{"class":523,"line":641},[521,2465,617],{"emptyLinePlaceholder":206},[521,2467,2468,2470,2473,2475,2477,2479],{"class":523,"line":646},[521,2469,624],{"class":623},[521,2471,2472],{"class":535}," marker ",[521,2474,630],{"class":531},[521,2476,2431],{"class":633},[521,2478,658],{"class":535},[521,2480,555],{"class":531},[521,2482,2483],{"class":523,"line":663},[521,2484,617],{"emptyLinePlaceholder":206},[521,2486,2487,2489,2491,2493],{"class":523,"line":668},[521,2488,1634],{"class":633},[521,2490,674],{"class":535},[521,2492,568],{"class":531},[521,2494,679],{"class":531},[521,2496,2497,2499,2501,2503,2505,2507],{"class":523,"line":682},[521,2498,686],{"class":685},[521,2500,689],{"class":531},[521,2502,692],{"class":531},[521,2504,695],{"class":548},[521,2506,698],{"class":531},[521,2508,701],{"class":531},[521,2510,2511,2513,2516],{"class":523,"line":704},[521,2512,707],{"class":531},[521,2514,2515],{"class":535}," [marker])",[521,2517,555],{"class":531},[521,2519,2520],{"class":523,"line":715},[521,2521,617],{"emptyLinePlaceholder":206},[521,2523,2524,2526,2528,2530],{"class":523,"line":720},[521,2525,809],{"class":527},[521,2527,812],{"class":527},[521,2529,815],{"class":535},[521,2531,555],{"class":531},[506,2533,2534],{"icon":140,"label":820},[511,2535,2537],{"className":823,"code":2536,"filename":825,"language":826,"meta":517,"style":517},"._marker\\:text-color\\:primary {\n    &::marker { color: #006cff; }\n}\n",[422,2538,2539,2556,2573],{"__ignoreMap":517},[521,2540,2541,2543,2546,2548,2550,2552,2554],{"class":523,"line":524},[521,2542,833],{"class":531},[521,2544,2545],{"class":836},"_marker",[521,2547,840],{"class":535},[521,2549,1769],{"class":836},[521,2551,840],{"class":535},[521,2553,843],{"class":836},[521,2555,679],{"class":531},[521,2557,2558,2560,2562,2565,2567,2569,2571],{"class":523,"line":558},[521,2559,890],{"class":535},[521,2561,689],{"class":531},[521,2563,2564],{"class":535},":marker { color: ",[521,2566,1787],{"class":531},[521,2568,857],{"class":535},[521,2570,860],{"class":531},[521,2572,863],{"class":531},[521,2574,2575],{"class":523,"line":592},[521,2576,917],{"class":535},[506,2578,2579],{"icon":1021,"label":1022},[511,2580,2582],{"className":1025,"code":2581,"language":1027,"meta":517,"style":517},"\u003Cul>\n    \u003Cli class=\"_marker:text-color:primary\">Colored bullet item\u003C/li>\n    \u003Cli class=\"_marker:text-color:primary\">Another item\u003C/li>\n\u003C/ul>\n",[422,2583,2584,2592,2622,2649],{"__ignoreMap":517},[521,2585,2586,2588,2590],{"class":523,"line":524},[521,2587,1040],{"class":531},[521,2589,442],{"class":685},[521,2591,1057],{"class":531},[521,2593,2594,2597,2599,2601,2603,2605,2608,2610,2613,2616,2618,2620],{"class":523,"line":558},[521,2595,2596],{"class":531},"    \u003C",[521,2598,445],{"class":685},[521,2600,1045],{"class":623},[521,2602,630],{"class":531},[521,2604,552],{"class":531},[521,2606,2607],{"class":548},"_marker:text-color:primary",[521,2609,552],{"class":531},[521,2611,2612],{"class":531},">",[521,2614,2615],{"class":535},"Colored bullet item",[521,2617,1067],{"class":531},[521,2619,445],{"class":685},[521,2621,1057],{"class":531},[521,2623,2624,2626,2628,2630,2632,2634,2636,2638,2640,2643,2645,2647],{"class":523,"line":592},[521,2625,2596],{"class":531},[521,2627,445],{"class":685},[521,2629,1045],{"class":623},[521,2631,630],{"class":531},[521,2633,552],{"class":531},[521,2635,2607],{"class":548},[521,2637,552],{"class":531},[521,2639,2612],{"class":531},[521,2641,2642],{"class":535},"Another item",[521,2644,1067],{"class":531},[521,2646,445],{"class":685},[521,2648,1057],{"class":531},[521,2650,2651,2653,2655],{"class":523,"line":614},[521,2652,1067],{"class":531},[521,2654,442],{"class":685},[521,2656,1057],{"class":531},[1073,2658,1076],{"id":2659},"css-selector-6",[1078,2661,2662,2670],{},[1081,2663,2664],{},[1084,2665,2666,2668],{},[1087,2667,1089],{},[1087,2669,1076],{},[1096,2671,2672],{},[1084,2673,2674,2679],{},[1101,2675,2676],{},[422,2677,2678],{},"marker",[1101,2680,2681],{},[422,2682,2683],{},"&::marker",[414,2685,2687],{"id":2686},"usebackdropmodifier",[422,2688,2689],{},"useBackdropModifier",[418,2691,490,2692,494,2695,2698,2699,2702],{},[422,2693,2694],{},"useBackdropModifier()",[422,2696,2697],{},"::backdrop"," pseudo-element, used with ",[422,2700,2701],{},"\u003Cdialog>"," elements and fullscreen API.",[1073,2704,1076],{"id":2705},"css-selector-7",[1078,2707,2708,2716],{},[1081,2709,2710],{},[1084,2711,2712,2714],{},[1087,2713,1089],{},[1087,2715,1076],{},[1096,2717,2718],{},[1084,2719,2720,2725],{},[1101,2721,2722],{},[422,2723,2724],{},"backdrop",[1101,2726,2727],{},[422,2728,2729],{},"&::backdrop",[414,2731,2733],{"id":2732},"usefilemodifier",[422,2734,2735],{},"useFileModifier",[418,2737,490,2738,2741,2742,2745],{},[422,2739,2740],{},"useFileModifier()"," function creates a modifier that applies styles to the file upload button in ",[422,2743,2744],{},"\u003Cinput type=\"file\">"," elements.",[1073,2747,1076],{"id":2748},"css-selector-8",[1078,2750,2751,2759],{},[1081,2752,2753],{},[1084,2754,2755,2757],{},[1087,2756,1089],{},[1087,2758,1076],{},[1096,2760,2761],{},[1084,2762,2763,2768],{},[1101,2764,2765],{},[422,2766,2767],{},"file",[1101,2769,2770],{},[422,2771,2772],{},"&::file-selector-button",[414,2774,2776],{"id":2775},"usepseudoelementmodifiers",[422,2777,2778],{},"usePseudoElementModifiers",[418,2780,490,2781,2784],{},[422,2782,2783],{},"usePseudoElementModifiers()"," function registers all pseudo-element modifiers at once and returns them as a destructurable object.",[503,2786,2787,3031],{},[506,2788,2789],{"icon":508,"label":509},[511,2790,2792],{"className":513,"code":2791,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility, useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { usePseudoElementModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { before, after, placeholder, selection } = usePseudoElementModifiers(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n    white: '#ffffff',\n}, [placeholder, selection]);\n\nuseBackgroundColorUtility(s, {\n    primary: '#006cff',\n}, [before, after, selection]);\n\nexport default s;\n",[422,2793,2794,2814,2838,2859,2863,2877,2881,2916,2920,2930,2944,2958,2972,2976,2986,3000,3017,3021],{"__ignoreMap":517},[521,2795,2796,2798,2800,2802,2804,2806,2808,2810,2812],{"class":523,"line":524},[521,2797,528],{"class":527},[521,2799,532],{"class":531},[521,2801,536],{"class":535},[521,2803,539],{"class":531},[521,2805,542],{"class":527},[521,2807,545],{"class":531},[521,2809,549],{"class":548},[521,2811,552],{"class":531},[521,2813,555],{"class":531},[521,2815,2816,2818,2820,2822,2824,2826,2828,2830,2832,2834,2836],{"class":523,"line":558},[521,2817,528],{"class":527},[521,2819,532],{"class":531},[521,2821,1550],{"class":535},[521,2823,568],{"class":531},[521,2825,565],{"class":535},[521,2827,539],{"class":531},[521,2829,542],{"class":527},[521,2831,545],{"class":531},[521,2833,585],{"class":548},[521,2835,552],{"class":531},[521,2837,555],{"class":531},[521,2839,2840,2842,2844,2847,2849,2851,2853,2855,2857],{"class":523,"line":592},[521,2841,528],{"class":527},[521,2843,532],{"class":531},[521,2845,2846],{"class":535}," usePseudoElementModifiers",[521,2848,539],{"class":531},[521,2850,542],{"class":527},[521,2852,545],{"class":531},[521,2854,585],{"class":548},[521,2856,552],{"class":531},[521,2858,555],{"class":531},[521,2860,2861],{"class":523,"line":614},[521,2862,617],{"emptyLinePlaceholder":206},[521,2864,2865,2867,2869,2871,2873,2875],{"class":523,"line":620},[521,2866,624],{"class":623},[521,2868,627],{"class":535},[521,2870,630],{"class":531},[521,2872,536],{"class":633},[521,2874,636],{"class":535},[521,2876,555],{"class":531},[521,2878,2879],{"class":523,"line":641},[521,2880,617],{"emptyLinePlaceholder":206},[521,2882,2883,2885,2887,2890,2892,2895,2897,2900,2902,2904,2907,2910,2912,2914],{"class":523,"line":646},[521,2884,624],{"class":623},[521,2886,532],{"class":531},[521,2888,2889],{"class":535}," before",[521,2891,568],{"class":531},[521,2893,2894],{"class":535}," after",[521,2896,568],{"class":531},[521,2898,2899],{"class":535}," placeholder",[521,2901,568],{"class":531},[521,2903,2027],{"class":535},[521,2905,2906],{"class":531},"}",[521,2908,2909],{"class":531}," =",[521,2911,2846],{"class":633},[521,2913,658],{"class":535},[521,2915,555],{"class":531},[521,2917,2918],{"class":523,"line":663},[521,2919,617],{"emptyLinePlaceholder":206},[521,2921,2922,2924,2926,2928],{"class":523,"line":668},[521,2923,1634],{"class":633},[521,2925,674],{"class":535},[521,2927,568],{"class":531},[521,2929,679],{"class":531},[521,2931,2932,2934,2936,2938,2940,2942],{"class":523,"line":682},[521,2933,1645],{"class":685},[521,2935,689],{"class":531},[521,2937,692],{"class":531},[521,2939,1652],{"class":548},[521,2941,698],{"class":531},[521,2943,701],{"class":531},[521,2945,2946,2948,2950,2952,2954,2956],{"class":523,"line":704},[521,2947,2091],{"class":685},[521,2949,689],{"class":531},[521,2951,692],{"class":531},[521,2953,2098],{"class":548},[521,2955,698],{"class":531},[521,2957,701],{"class":531},[521,2959,2960,2962,2965,2967,2970],{"class":523,"line":715},[521,2961,707],{"class":531},[521,2963,2964],{"class":535}," [placeholder",[521,2966,568],{"class":531},[521,2968,2969],{"class":535}," selection])",[521,2971,555],{"class":531},[521,2973,2974],{"class":523,"line":720},[521,2975,617],{"emptyLinePlaceholder":206},[521,2977,2978,2980,2982,2984],{"class":523,"line":732},[521,2979,671],{"class":633},[521,2981,674],{"class":535},[521,2983,568],{"class":531},[521,2985,679],{"class":531},[521,2987,2988,2990,2992,2994,2996,2998],{"class":523,"line":749},[521,2989,686],{"class":685},[521,2991,689],{"class":531},[521,2993,692],{"class":531},[521,2995,695],{"class":548},[521,2997,698],{"class":531},[521,2999,701],{"class":531},[521,3001,3002,3004,3007,3009,3011,3013,3015],{"class":523,"line":758},[521,3003,707],{"class":531},[521,3005,3006],{"class":535}," [before",[521,3008,568],{"class":531},[521,3010,2894],{"class":535},[521,3012,568],{"class":531},[521,3014,2969],{"class":535},[521,3016,555],{"class":531},[521,3018,3019],{"class":523,"line":763},[521,3020,617],{"emptyLinePlaceholder":206},[521,3022,3023,3025,3027,3029],{"class":523,"line":775},[521,3024,809],{"class":527},[521,3026,812],{"class":527},[521,3028,815],{"class":535},[521,3030,555],{"class":531},[506,3032,3033],{"icon":1021,"label":1022},[511,3034,3036],{"className":1025,"code":3035,"language":1027,"meta":517,"style":517},"\u003Cinput class=\"_placeholder:text-color:muted\" placeholder=\"Styled placeholder\">\n\n\u003Cp class=\"_selection:background-color:primary _selection:text-color:white\">\n    Custom selection highlight\n\u003C/p>\n",[422,3037,3038,3069,3073,3091,3096],{"__ignoreMap":517},[521,3039,3040,3042,3045,3047,3049,3051,3054,3056,3058,3060,3062,3065,3067],{"class":523,"line":524},[521,3041,1040],{"class":531},[521,3043,3044],{"class":685},"input",[521,3046,1045],{"class":623},[521,3048,630],{"class":531},[521,3050,552],{"class":531},[521,3052,3053],{"class":548},"_placeholder:text-color:muted",[521,3055,552],{"class":531},[521,3057,2899],{"class":623},[521,3059,630],{"class":531},[521,3061,552],{"class":531},[521,3063,3064],{"class":548},"Styled placeholder",[521,3066,552],{"class":531},[521,3068,1057],{"class":531},[521,3070,3071],{"class":523,"line":558},[521,3072,617],{"emptyLinePlaceholder":206},[521,3074,3075,3077,3079,3081,3083,3085,3087,3089],{"class":523,"line":592},[521,3076,1040],{"class":531},[521,3078,418],{"class":685},[521,3080,1045],{"class":623},[521,3082,630],{"class":531},[521,3084,552],{"class":531},[521,3086,2239],{"class":548},[521,3088,552],{"class":531},[521,3090,1057],{"class":531},[521,3092,3093],{"class":523,"line":614},[521,3094,3095],{"class":535},"    Custom selection highlight\n",[521,3097,3098,3100,3102],{"class":523,"line":620},[521,3099,1067],{"class":531},[521,3101,418],{"class":685},[521,3103,1057],{"class":531},[3105,3106,3108],"h3",{"id":3107},"returned-modifiers","Returned Modifiers",[1078,3110,3111,3125],{},[1081,3112,3113],{},[1084,3114,3115,3118,3120,3122],{},[1087,3116,3117],{},"Key",[1087,3119,1089],{},[1087,3121,1076],{},[1087,3123,3124],{},"Notes",[1096,3126,3127,3146,3164,3180,3196,3213,3230,3246,3262],{},[1084,3128,3129,3133,3137,3141],{},[1101,3130,3131],{},[422,3132,1105],{},[1101,3134,3135],{},[422,3136,1105],{},[1101,3138,3139],{},[422,3140,1110],{},[1101,3142,3143,3144],{},"Auto-injects ",[422,3145,500],{},[1084,3147,3148,3152,3156,3160],{},[1101,3149,3150],{},[422,3151,1126],{},[1101,3153,3154],{},[422,3155,1126],{},[1101,3157,3158],{},[422,3159,1494],{},[1101,3161,3143,3162],{},[422,3163,500],{},[1084,3165,3166,3170,3174,3178],{},[1101,3167,3168],{},[422,3169,1907],{},[1101,3171,3172],{},[422,3173,1907],{},[1101,3175,3176],{},[422,3177,1912],{},[1101,3179],{},[1084,3181,3182,3186,3190,3194],{},[1101,3183,3184],{},[422,3185,2278],{},[1101,3187,3188],{},[422,3189,2278],{},[1101,3191,3192],{},[422,3193,2283],{},[1101,3195],{},[1084,3197,3198,3203,3207,3211],{},[1101,3199,3200],{},[422,3201,3202],{},"firstLetter",[1101,3204,3205],{},[422,3206,2317],{},[1101,3208,3209],{},[422,3210,2322],{},[1101,3212],{},[1084,3214,3215,3220,3224,3228],{},[1101,3216,3217],{},[422,3218,3219],{},"firstLine",[1101,3221,3222],{},[422,3223,2356],{},[1101,3225,3226],{},[422,3227,2361],{},[1101,3229],{},[1084,3231,3232,3236,3240,3244],{},[1101,3233,3234],{},[422,3235,2678],{},[1101,3237,3238],{},[422,3239,2678],{},[1101,3241,3242],{},[422,3243,2683],{},[1101,3245],{},[1084,3247,3248,3252,3256,3260],{},[1101,3249,3250],{},[422,3251,2724],{},[1101,3253,3254],{},[422,3255,2724],{},[1101,3257,3258],{},[422,3259,2729],{},[1101,3261],{},[1084,3263,3264,3268,3272,3276],{},[1101,3265,3266],{},[422,3267,2767],{},[1101,3269,3270],{},[422,3271,2767],{},[1101,3273,3274],{},[422,3275,2772],{},[1101,3277],{},[414,3279,3281],{"id":3280},"examples","Examples",[3105,3283,3285],{"id":3284},"drop-cap-typography","Drop Cap Typography",[503,3287,3288,3537],{},[506,3289,3290],{"icon":508,"label":509},[511,3291,3293],{"className":513,"code":3292,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useFontSizeUtility, useFontWeightUtility, useTextColorUtility } from \"@styleframe/theme\";\nimport { useFirstLetterModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst firstLetter = useFirstLetterModifier(s);\n\nuseFontSizeUtility(s, {\n    '3xl': '3rem',\n}, [firstLetter]);\n\nuseFontWeightUtility(s, {\n    bold: '700',\n}, [firstLetter]);\n\nuseTextColorUtility(s, {\n    primary: '#006cff',\n}, [firstLetter]);\n\nexport default s;\n",[422,3294,3295,3315,3345,3366,3370,3384,3388,3403,3407,3418,3439,3448,3452,3463,3479,3487,3491,3501,3515,3523,3527],{"__ignoreMap":517},[521,3296,3297,3299,3301,3303,3305,3307,3309,3311,3313],{"class":523,"line":524},[521,3298,528],{"class":527},[521,3300,532],{"class":531},[521,3302,536],{"class":535},[521,3304,539],{"class":531},[521,3306,542],{"class":527},[521,3308,545],{"class":531},[521,3310,549],{"class":548},[521,3312,552],{"class":531},[521,3314,555],{"class":531},[521,3316,3317,3319,3321,3324,3326,3329,3331,3333,3335,3337,3339,3341,3343],{"class":523,"line":558},[521,3318,528],{"class":527},[521,3320,532],{"class":531},[521,3322,3323],{"class":535}," useFontSizeUtility",[521,3325,568],{"class":531},[521,3327,3328],{"class":535}," useFontWeightUtility",[521,3330,568],{"class":531},[521,3332,1550],{"class":535},[521,3334,539],{"class":531},[521,3336,542],{"class":527},[521,3338,545],{"class":531},[521,3340,585],{"class":548},[521,3342,552],{"class":531},[521,3344,555],{"class":531},[521,3346,3347,3349,3351,3354,3356,3358,3360,3362,3364],{"class":523,"line":592},[521,3348,528],{"class":527},[521,3350,532],{"class":531},[521,3352,3353],{"class":535}," useFirstLetterModifier",[521,3355,539],{"class":531},[521,3357,542],{"class":527},[521,3359,545],{"class":531},[521,3361,585],{"class":548},[521,3363,552],{"class":531},[521,3365,555],{"class":531},[521,3367,3368],{"class":523,"line":614},[521,3369,617],{"emptyLinePlaceholder":206},[521,3371,3372,3374,3376,3378,3380,3382],{"class":523,"line":620},[521,3373,624],{"class":623},[521,3375,627],{"class":535},[521,3377,630],{"class":531},[521,3379,536],{"class":633},[521,3381,636],{"class":535},[521,3383,555],{"class":531},[521,3385,3386],{"class":523,"line":641},[521,3387,617],{"emptyLinePlaceholder":206},[521,3389,3390,3392,3395,3397,3399,3401],{"class":523,"line":646},[521,3391,624],{"class":623},[521,3393,3394],{"class":535}," firstLetter ",[521,3396,630],{"class":531},[521,3398,3353],{"class":633},[521,3400,658],{"class":535},[521,3402,555],{"class":531},[521,3404,3405],{"class":523,"line":663},[521,3406,617],{"emptyLinePlaceholder":206},[521,3408,3409,3412,3414,3416],{"class":523,"line":668},[521,3410,3411],{"class":633},"useFontSizeUtility",[521,3413,674],{"class":535},[521,3415,568],{"class":531},[521,3417,679],{"class":531},[521,3419,3420,3423,3426,3428,3430,3432,3435,3437],{"class":523,"line":682},[521,3421,3422],{"class":531},"    '",[521,3424,3425],{"class":685},"3xl",[521,3427,698],{"class":531},[521,3429,689],{"class":531},[521,3431,692],{"class":531},[521,3433,3434],{"class":548},"3rem",[521,3436,698],{"class":531},[521,3438,701],{"class":531},[521,3440,3441,3443,3446],{"class":523,"line":704},[521,3442,707],{"class":531},[521,3444,3445],{"class":535}," [firstLetter])",[521,3447,555],{"class":531},[521,3449,3450],{"class":523,"line":715},[521,3451,617],{"emptyLinePlaceholder":206},[521,3453,3454,3457,3459,3461],{"class":523,"line":720},[521,3455,3456],{"class":633},"useFontWeightUtility",[521,3458,674],{"class":535},[521,3460,568],{"class":531},[521,3462,679],{"class":531},[521,3464,3465,3468,3470,3472,3475,3477],{"class":523,"line":732},[521,3466,3467],{"class":685},"    bold",[521,3469,689],{"class":531},[521,3471,692],{"class":531},[521,3473,3474],{"class":548},"700",[521,3476,698],{"class":531},[521,3478,701],{"class":531},[521,3480,3481,3483,3485],{"class":523,"line":749},[521,3482,707],{"class":531},[521,3484,3445],{"class":535},[521,3486,555],{"class":531},[521,3488,3489],{"class":523,"line":758},[521,3490,617],{"emptyLinePlaceholder":206},[521,3492,3493,3495,3497,3499],{"class":523,"line":763},[521,3494,1634],{"class":633},[521,3496,674],{"class":535},[521,3498,568],{"class":531},[521,3500,679],{"class":531},[521,3502,3503,3505,3507,3509,3511,3513],{"class":523,"line":775},[521,3504,686],{"class":685},[521,3506,689],{"class":531},[521,3508,692],{"class":531},[521,3510,695],{"class":548},[521,3512,698],{"class":531},[521,3514,701],{"class":531},[521,3516,3517,3519,3521],{"class":523,"line":792},[521,3518,707],{"class":531},[521,3520,3445],{"class":535},[521,3522,555],{"class":531},[521,3524,3525],{"class":523,"line":801},[521,3526,617],{"emptyLinePlaceholder":206},[521,3528,3529,3531,3533,3535],{"class":523,"line":806},[521,3530,809],{"class":527},[521,3532,812],{"class":527},[521,3534,815],{"class":535},[521,3536,555],{"class":531},[506,3538,3539],{"icon":1021,"label":1022},[511,3540,3542],{"className":1025,"code":3541,"language":1027,"meta":517,"style":517},"\u003Cp class=\"_first-letter:font-size:3xl _first-letter:font-weight:bold _first-letter:text-color:primary\">\n    Once upon a time, there was a beautiful drop cap that started a paragraph.\n\u003C/p>\n",[422,3543,3544,3563,3568],{"__ignoreMap":517},[521,3545,3546,3548,3550,3552,3554,3556,3559,3561],{"class":523,"line":524},[521,3547,1040],{"class":531},[521,3549,418],{"class":685},[521,3551,1045],{"class":623},[521,3553,630],{"class":531},[521,3555,552],{"class":531},[521,3557,3558],{"class":548},"_first-letter:font-size:3xl _first-letter:font-weight:bold _first-letter:text-color:primary",[521,3560,552],{"class":531},[521,3562,1057],{"class":531},[521,3564,3565],{"class":523,"line":558},[521,3566,3567],{"class":535},"    Once upon a time, there was a beautiful drop cap that started a paragraph.\n",[521,3569,3570,3572,3574],{"class":523,"line":592},[521,3571,1067],{"class":531},[521,3573,418],{"class":685},[521,3575,1057],{"class":531},[3105,3577,3579],{"id":3578},"styled-file-input","Styled File Input",[503,3581,3582,3798],{},[506,3583,3584],{"icon":508,"label":509},[511,3585,3587],{"className":513,"code":3586,"filename":515,"language":516,"meta":517,"style":517},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility, useTextColorUtility } from \"@styleframe/theme\";\nimport { useFileModifier, useHoverModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst file = useFileModifier(s);\nconst hover = useHoverModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: '#006cff',\n}, [file]);\n\nuseTextColorUtility(s, {\n    white: '#ffffff',\n}, [file]);\n\nexport default s;\n",[422,3588,3589,3609,3633,3659,3663,3677,3681,3696,3711,3715,3725,3739,3748,3752,3762,3776,3784,3788],{"__ignoreMap":517},[521,3590,3591,3593,3595,3597,3599,3601,3603,3605,3607],{"class":523,"line":524},[521,3592,528],{"class":527},[521,3594,532],{"class":531},[521,3596,536],{"class":535},[521,3598,539],{"class":531},[521,3600,542],{"class":527},[521,3602,545],{"class":531},[521,3604,549],{"class":548},[521,3606,552],{"class":531},[521,3608,555],{"class":531},[521,3610,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629,3631],{"class":523,"line":558},[521,3612,528],{"class":527},[521,3614,532],{"class":531},[521,3616,565],{"class":535},[521,3618,568],{"class":531},[521,3620,1550],{"class":535},[521,3622,539],{"class":531},[521,3624,542],{"class":527},[521,3626,545],{"class":531},[521,3628,585],{"class":548},[521,3630,552],{"class":531},[521,3632,555],{"class":531},[521,3634,3635,3637,3639,3642,3644,3647,3649,3651,3653,3655,3657],{"class":523,"line":592},[521,3636,528],{"class":527},[521,3638,532],{"class":531},[521,3640,3641],{"class":535}," useFileModifier",[521,3643,568],{"class":531},[521,3645,3646],{"class":535}," useHoverModifier",[521,3648,539],{"class":531},[521,3650,542],{"class":527},[521,3652,545],{"class":531},[521,3654,585],{"class":548},[521,3656,552],{"class":531},[521,3658,555],{"class":531},[521,3660,3661],{"class":523,"line":614},[521,3662,617],{"emptyLinePlaceholder":206},[521,3664,3665,3667,3669,3671,3673,3675],{"class":523,"line":620},[521,3666,624],{"class":623},[521,3668,627],{"class":535},[521,3670,630],{"class":531},[521,3672,536],{"class":633},[521,3674,636],{"class":535},[521,3676,555],{"class":531},[521,3678,3679],{"class":523,"line":641},[521,3680,617],{"emptyLinePlaceholder":206},[521,3682,3683,3685,3688,3690,3692,3694],{"class":523,"line":646},[521,3684,624],{"class":623},[521,3686,3687],{"class":535}," file ",[521,3689,630],{"class":531},[521,3691,3641],{"class":633},[521,3693,658],{"class":535},[521,3695,555],{"class":531},[521,3697,3698,3700,3703,3705,3707,3709],{"class":523,"line":663},[521,3699,624],{"class":623},[521,3701,3702],{"class":535}," hover ",[521,3704,630],{"class":531},[521,3706,3646],{"class":633},[521,3708,658],{"class":535},[521,3710,555],{"class":531},[521,3712,3713],{"class":523,"line":668},[521,3714,617],{"emptyLinePlaceholder":206},[521,3716,3717,3719,3721,3723],{"class":523,"line":682},[521,3718,671],{"class":633},[521,3720,674],{"class":535},[521,3722,568],{"class":531},[521,3724,679],{"class":531},[521,3726,3727,3729,3731,3733,3735,3737],{"class":523,"line":704},[521,3728,686],{"class":685},[521,3730,689],{"class":531},[521,3732,692],{"class":531},[521,3734,695],{"class":548},[521,3736,698],{"class":531},[521,3738,701],{"class":531},[521,3740,3741,3743,3746],{"class":523,"line":715},[521,3742,707],{"class":531},[521,3744,3745],{"class":535}," [file])",[521,3747,555],{"class":531},[521,3749,3750],{"class":523,"line":720},[521,3751,617],{"emptyLinePlaceholder":206},[521,3753,3754,3756,3758,3760],{"class":523,"line":732},[521,3755,1634],{"class":633},[521,3757,674],{"class":535},[521,3759,568],{"class":531},[521,3761,679],{"class":531},[521,3763,3764,3766,3768,3770,3772,3774],{"class":523,"line":749},[521,3765,2091],{"class":685},[521,3767,689],{"class":531},[521,3769,692],{"class":531},[521,3771,2098],{"class":548},[521,3773,698],{"class":531},[521,3775,701],{"class":531},[521,3777,3778,3780,3782],{"class":523,"line":758},[521,3779,707],{"class":531},[521,3781,3745],{"class":535},[521,3783,555],{"class":531},[521,3785,3786],{"class":523,"line":763},[521,3787,617],{"emptyLinePlaceholder":206},[521,3789,3790,3792,3794,3796],{"class":523,"line":775},[521,3791,809],{"class":527},[521,3793,812],{"class":527},[521,3795,815],{"class":535},[521,3797,555],{"class":531},[506,3799,3800],{"icon":1021,"label":1022},[511,3801,3803],{"className":1025,"code":3802,"language":1027,"meta":517,"style":517},"\u003Cinput\n    type=\"file\"\n    class=\"_file:background-color:primary _file:text-color:white\"\n>\n",[422,3804,3805,3811,3824,3837],{"__ignoreMap":517},[521,3806,3807,3809],{"class":523,"line":524},[521,3808,1040],{"class":531},[521,3810,1852],{"class":685},[521,3812,3813,3816,3818,3820,3822],{"class":523,"line":558},[521,3814,3815],{"class":623},"    type",[521,3817,630],{"class":531},[521,3819,552],{"class":531},[521,3821,2767],{"class":548},[521,3823,1867],{"class":531},[521,3825,3826,3828,3830,3832,3835],{"class":523,"line":592},[521,3827,1857],{"class":623},[521,3829,630],{"class":531},[521,3831,552],{"class":531},[521,3833,3834],{"class":548},"_file:background-color:primary _file:text-color:white",[521,3836,1867],{"class":531},[521,3838,3839],{"class":523,"line":614},[521,3840,1057],{"class":531},[414,3842,3844],{"id":3843},"best-practices","Best Practices",[442,3846,3847,3853,3859,3868,3881],{},[445,3848,3849,3852],{},[448,3850,3851],{},"Use before/after for decorative content",": Pseudo-elements are ideal for decorative elements that don't need to be in the DOM",[445,3854,3855,3858],{},[448,3856,3857],{},"Style placeholders subtly",": Use muted colors for placeholder text to distinguish it from actual input values",[445,3860,3861,3864,3865,3867],{},[448,3862,3863],{},"Customize selection colors to match your brand",": Use the ",[422,3866,2278],{}," modifier for on-brand text highlighting",[445,3869,3870,1121,3873,454,3875,3877,3878,3880],{},[448,3871,3872],{},"Remember content injection",[422,3874,1105],{},[422,3876,1126],{}," modifiers auto-inject ",[422,3879,500],{},"; override this if you need specific content",[445,3882,3883,3886,3887,3890,3891,425,3894,429,3897],{},[448,3884,3885],{},"Test marker styles",": Not all CSS properties work with ",[422,3888,3889],{},"::marker","; it supports a limited set including ",[422,3892,3893],{},"color",[422,3895,3896],{},"font-size",[422,3898,3899],{},"content",[414,3901,3903],{"id":3902},"faq","FAQ",[3905,3906,3907,3924,3936,3976],"accordion",{},[3908,3909,3912,3913,454,3915,3917,3918,3920,3921,3923],"accordion-item",{"icon":3910,"label":3911},"i-lucide-circle-help","Why do before and after auto-inject content?","Pseudo-elements ",[422,3914,424],{},[422,3916,428],{}," require the ",[422,3919,3899],{}," property to render. Without it, the pseudo-element won't appear. The auto-injection of ",[422,3922,500],{}," ensures the pseudo-element is always rendered, saving you from a common gotcha.",[3908,3925,490,3927,3929,3930,3932,3933,3935],{"icon":3910,"label":3926},"Can I override the auto-injected content?",[422,3928,500],{}," is injected as a default. If you need different content, you can create a custom content utility and apply it with the ",[422,3931,1105],{}," or ",[422,3934,1126],{}," modifier, which will override the default empty string.",[3908,3937,490,3939,3941,3942,425,3944,425,3947,3950,3951,425,3953,425,3956,454,3959,3962,3963,3966,3967,425,3970,429,3972,3975],{"icon":3910,"label":3938},"What CSS properties work with ::marker?",[422,3940,3889],{}," pseudo-element supports a limited set of properties: ",[422,3943,3893],{},[422,3945,3946],{},"direction",[422,3948,3949],{},"font"," properties, ",[422,3952,3899],{},[422,3954,3955],{},"unicode-bidi",[422,3957,3958],{},"animation",[422,3960,3961],{},"transition"," properties, and ",[422,3964,3965],{},"white-space",". Most layout properties like ",[422,3968,3969],{},"display",[422,3971,932],{},[422,3973,3974],{},"margin"," are not supported.",[3908,3977,3979,3980,3982,3983,3985],{"icon":3910,"label":3978},"When should I use ::backdrop?","Use ",[422,3981,2697],{}," to style the area behind ",[422,3984,2701],{}," elements and fullscreen elements. This is useful for creating modal overlays and customizing the fullscreen background.",[3987,3988,3989],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":517,"searchDepth":558,"depth":558,"links":3991},[3992,3993,3994,3995,3996,3997,3998,3999,4000,4001,4002,4003,4006,4010,4011],{"id":416,"depth":558,"text":64},{"id":436,"depth":558,"text":437},{"id":484,"depth":558,"text":487},{"id":1133,"depth":558,"text":1136},{"id":1501,"depth":558,"text":1504},{"id":1915,"depth":558,"text":1918},{"id":2286,"depth":558,"text":2289},{"id":2325,"depth":558,"text":2328},{"id":2364,"depth":558,"text":2367},{"id":2686,"depth":558,"text":2689},{"id":2732,"depth":558,"text":2735},{"id":2775,"depth":558,"text":2778,"children":4004},[4005],{"id":3107,"depth":592,"text":3108},{"id":3280,"depth":558,"text":3281,"children":4007},[4008,4009],{"id":3284,"depth":592,"text":3285},{"id":3578,"depth":592,"text":3579},{"id":3843,"depth":558,"text":3844},{"id":3902,"depth":558,"text":3903},"Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.","md",null,{},{"title":396,"icon":7},{"title":409,"description":4012},{"loc":397},"w-lTNdRHT8b6X2IT0QKSbTJY01ysQ0y8agLqBCD9YeA",[4021,4023],{"title":392,"path":393,"stem":394,"description":4022,"icon":7,"children":-1},"Create other state modifiers for targeting open and inert elements with full type safety.",{"title":400,"path":401,"stem":402,"description":4024,"icon":7,"children":-1},"Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.",1776621151774]