@greese/ui 0.0.0-stage → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +55 -2
  3. package/bin/greese-utilities.mjs +56 -0
  4. package/dist/_layers.scss +2 -0
  5. package/dist/_maps.scss +1884 -0
  6. package/dist/_tokens-base.scss +174 -0
  7. package/dist/_tokens.scss +2140 -0
  8. package/dist/base.css +67 -0
  9. package/dist/colorScheme.d.ts +16 -0
  10. package/dist/colorScheme.js +13 -0
  11. package/dist/contrast.d.ts +15 -0
  12. package/dist/contrast.js +43 -0
  13. package/dist/css/Accordion.css +9 -0
  14. package/dist/css/ActionSelect.css +6 -0
  15. package/dist/css/Alert.css +84 -0
  16. package/dist/css/AppBar.css +35 -0
  17. package/dist/css/AspectRatio.css +40 -0
  18. package/dist/css/AutoLayout.css +508 -0
  19. package/dist/css/Avatar.css +88 -0
  20. package/dist/css/Badge.css +66 -0
  21. package/dist/css/Box.css +640 -0
  22. package/dist/css/Breadcrumbs.css +57 -0
  23. package/dist/css/Button.css +275 -0
  24. package/dist/css/ButtonGroup.css +40 -0
  25. package/dist/css/Card.css +101 -0
  26. package/dist/css/Carousel.css +170 -0
  27. package/dist/css/Center.css +11 -0
  28. package/dist/css/ChatBubble.css +128 -0
  29. package/dist/css/Checkbox.css +65 -0
  30. package/dist/css/Chip.css +124 -0
  31. package/dist/css/ChoiceGroup.css +57 -0
  32. package/dist/css/Code.css +29 -0
  33. package/dist/css/Collapsible.css +126 -0
  34. package/dist/css/ColorPicker.css +191 -0
  35. package/dist/css/Combobox.css +90 -0
  36. package/dist/css/Container.css +30 -0
  37. package/dist/css/Countdown.css +25 -0
  38. package/dist/css/DateField.css +15 -0
  39. package/dist/css/Dialog.css +640 -0
  40. package/dist/css/Diff.css +103 -0
  41. package/dist/css/Divider.css +19 -0
  42. package/dist/css/Dock.css +91 -0
  43. package/dist/css/Field.css +33 -0
  44. package/dist/css/Fieldset.css +54 -0
  45. package/dist/css/FileInput.css +65 -0
  46. package/dist/css/Footer.css +72 -0
  47. package/dist/css/Grid.css +998 -0
  48. package/dist/css/Header.css +89 -0
  49. package/dist/css/Heading.css +6 -0
  50. package/dist/css/Icon.css +12 -0
  51. package/dist/css/IconButton.css +7 -0
  52. package/dist/css/Image.css +69 -0
  53. package/dist/css/Indicator.css +41 -0
  54. package/dist/css/Input.css +115 -0
  55. package/dist/css/Key.css +42 -0
  56. package/dist/css/Link.css +72 -0
  57. package/dist/css/List.css +52 -0
  58. package/dist/css/Media.css +8 -0
  59. package/dist/css/Menu.css +161 -0
  60. package/dist/css/Motion.css +1356 -0
  61. package/dist/css/NumberField.css +49 -0
  62. package/dist/css/OtpField.css +90 -0
  63. package/dist/css/PageTransition.css +979 -0
  64. package/dist/css/Pagination.css +43 -0
  65. package/dist/css/Popover.css +93 -0
  66. package/dist/css/Progress.css +101 -0
  67. package/dist/css/RadialProgress.css +44 -0
  68. package/dist/css/Radio.css +41 -0
  69. package/dist/css/Rating.css +100 -0
  70. package/dist/css/ScrollSpy.css +6 -0
  71. package/dist/css/SegmentedControl.css +101 -0
  72. package/dist/css/Select.css +115 -0
  73. package/dist/css/Sidebar.css +207 -0
  74. package/dist/css/Skeleton.css +48 -0
  75. package/dist/css/Slider.css +75 -0
  76. package/dist/css/Spacer.css +34 -0
  77. package/dist/css/SpeedDial.css +165 -0
  78. package/dist/css/Spinner.css +44 -0
  79. package/dist/css/Stack.css +528 -0
  80. package/dist/css/Stat.css +107 -0
  81. package/dist/css/Status.css +86 -0
  82. package/dist/css/Steps.css +201 -0
  83. package/dist/css/Swap.css +49 -0
  84. package/dist/css/Switch.css +66 -0
  85. package/dist/css/Table.css +269 -0
  86. package/dist/css/Tabs.css +119 -0
  87. package/dist/css/Text.css +60 -0
  88. package/dist/css/TextRotate.css +147 -0
  89. package/dist/css/Textarea.css +107 -0
  90. package/dist/css/ThemeProvider.css +6 -0
  91. package/dist/css/Tile.css +18 -0
  92. package/dist/css/Toast.css +110 -0
  93. package/dist/css/ToggleButton.css +20 -0
  94. package/dist/css/Tooltip.css +94 -0
  95. package/dist/css/Type.css +211 -0
  96. package/dist/css/Visibility.css +78 -0
  97. package/dist/css/VisuallyHidden.css +15 -0
  98. package/dist/css/core.css +251 -0
  99. package/dist/css.d.ts +29 -0
  100. package/dist/css.js +28 -0
  101. package/dist/effect-classes.d.ts +8 -0
  102. package/dist/effect-classes.js +5 -0
  103. package/dist/effects/css.d.ts +71 -0
  104. package/dist/effects/css.js +184 -0
  105. package/dist/effects/definitions.d.ts +555 -0
  106. package/dist/effects/definitions.js +379 -0
  107. package/dist/effects/frames.d.ts +18 -0
  108. package/dist/effects/frames.js +68 -0
  109. package/dist/effects/sequence.d.ts +33 -0
  110. package/dist/effects/sequence.js +106 -0
  111. package/dist/effects.d.ts +30 -0
  112. package/dist/effects.js +30 -0
  113. package/dist/greese.css +11907 -0
  114. package/dist/index.d.ts +10 -0
  115. package/dist/index.js +10 -0
  116. package/dist/kebab.d.ts +2 -0
  117. package/dist/kebab.js +2 -0
  118. package/dist/palette.css +249 -0
  119. package/dist/palette.d.ts +599 -0
  120. package/dist/palette.js +334 -0
  121. package/dist/shapes.d.ts +193 -0
  122. package/dist/shapes.js +852 -0
  123. package/dist/storage.d.ts +47 -0
  124. package/dist/storage.js +118 -0
  125. package/dist/style-manifest.json +3010 -0
  126. package/dist/theme.d.ts +71 -0
  127. package/dist/theme.js +180 -0
  128. package/dist/tokens.css +253 -0
  129. package/dist/tokens.d.ts +343 -0
  130. package/dist/tokens.js +179 -0
  131. package/dist/typography.d.ts +55 -0
  132. package/dist/typography.js +144 -0
  133. package/dist/utilities.css +6975 -0
  134. package/dist/utilities.d.ts +82 -0
  135. package/dist/utilities.js +636 -0
  136. package/dist/utilitiesFiles.d.ts +18 -0
  137. package/dist/utilitiesFiles.js +26 -0
  138. package/dist/vite.d.ts +40 -0
  139. package/dist/vite.js +43 -0
  140. package/package.json +131 -4
  141. package/src/components/Accordion/Accordion.scss +9 -0
  142. package/src/components/ActionSelect/ActionSelect.scss +6 -0
  143. package/src/components/Alert/Alert.scss +71 -0
  144. package/src/components/AppBar/AppBar.scss +43 -0
  145. package/src/components/AspectRatio/AspectRatio.scss +22 -0
  146. package/src/components/AutoLayout/AutoLayout.scss +90 -0
  147. package/src/components/Avatar/Avatar.scss +91 -0
  148. package/src/components/Badge/Badge.scss +52 -0
  149. package/src/components/Box/Box.scss +63 -0
  150. package/src/components/Breadcrumbs/Breadcrumbs.scss +59 -0
  151. package/src/components/Button/Button.scss +231 -0
  152. package/src/components/ButtonGroup/ButtonGroup.scss +56 -0
  153. package/src/components/Card/Card.scss +99 -0
  154. package/src/components/Carousel/Carousel.scss +161 -0
  155. package/src/components/Center/Center.scss +11 -0
  156. package/src/components/ChatBubble/ChatBubble.scss +119 -0
  157. package/src/components/Checkbox/Checkbox.scss +66 -0
  158. package/src/components/Chip/Chip.scss +119 -0
  159. package/src/components/ChoiceGroup/ChoiceGroup.scss +69 -0
  160. package/src/components/Code/Code.scss +28 -0
  161. package/src/components/Collapsible/Collapsible.scss +136 -0
  162. package/src/components/ColorPicker/ColorPicker.scss +235 -0
  163. package/src/components/Combobox/Combobox.scss +83 -0
  164. package/src/components/Container/Container.scss +28 -0
  165. package/src/components/Countdown/Countdown.scss +28 -0
  166. package/src/components/DateField/DateField.scss +19 -0
  167. package/src/components/Dialog/Dialog.scss +268 -0
  168. package/src/components/Diff/Diff.scss +125 -0
  169. package/src/components/Divider/Divider.scss +22 -0
  170. package/src/components/Dock/Dock.scss +86 -0
  171. package/src/components/Field/Field.scss +38 -0
  172. package/src/components/Fieldset/Fieldset.scss +63 -0
  173. package/src/components/FileInput/FileInput.scss +66 -0
  174. package/src/components/Footer/Footer.scss +79 -0
  175. package/src/components/Grid/Grid.scss +86 -0
  176. package/src/components/Header/Header.scss +111 -0
  177. package/src/components/Heading/Heading.scss +7 -0
  178. package/src/components/Icon/Icon.scss +12 -0
  179. package/src/components/IconButton/IconButton.scss +6 -0
  180. package/src/components/Image/Image.scss +46 -0
  181. package/src/components/Indicator/Indicator.scss +48 -0
  182. package/src/components/Input/Input.scss +58 -0
  183. package/src/components/Key/Key.scss +48 -0
  184. package/src/components/Link/Link.scss +50 -0
  185. package/src/components/List/List.scss +62 -0
  186. package/src/components/Media/Media.scss +7 -0
  187. package/src/components/Menu/Menu.scss +91 -0
  188. package/src/components/Motion/Motion.scss +106 -0
  189. package/src/components/NumberField/NumberField.scss +44 -0
  190. package/src/components/OtpField/OtpField.scss +91 -0
  191. package/src/components/PageTransition/PageTransition.scss +168 -0
  192. package/src/components/Pagination/Pagination.scss +55 -0
  193. package/src/components/Popover/Popover.scss +13 -0
  194. package/src/components/Progress/Progress.scss +126 -0
  195. package/src/components/RadialProgress/RadialProgress.scss +65 -0
  196. package/src/components/Radio/Radio.scss +36 -0
  197. package/src/components/Rating/Rating.scss +121 -0
  198. package/src/components/ScrollSpy/ScrollSpy.scss +6 -0
  199. package/src/components/SegmentedControl/SegmentedControl.scss +107 -0
  200. package/src/components/Select/Select.scss +59 -0
  201. package/src/components/Sidebar/Sidebar.scss +88 -0
  202. package/src/components/Skeleton/Skeleton.scss +60 -0
  203. package/src/components/Slider/Slider.scss +96 -0
  204. package/src/components/Spacer/Spacer.scss +15 -0
  205. package/src/components/SpeedDial/SpeedDial.scss +109 -0
  206. package/src/components/Spinner/Spinner.scss +43 -0
  207. package/src/components/Stack/Stack.scss +57 -0
  208. package/src/components/Stat/Stat.scss +96 -0
  209. package/src/components/Status/Status.scss +60 -0
  210. package/src/components/Steps/Steps.scss +216 -0
  211. package/src/components/Swap/Swap.scss +62 -0
  212. package/src/components/Switch/Switch.scss +63 -0
  213. package/src/components/Table/Table.scss +183 -0
  214. package/src/components/Tabs/Tabs.scss +108 -0
  215. package/src/components/Text/Text.scss +34 -0
  216. package/src/components/TextRotate/TextRotate.scss +51 -0
  217. package/src/components/Textarea/Textarea.scss +56 -0
  218. package/src/components/ThemeProvider/ThemeProvider.scss +7 -0
  219. package/src/components/Tile/Tile.scss +23 -0
  220. package/src/components/Toast/Toast.scss +93 -0
  221. package/src/components/ToggleButton/ToggleButton.scss +23 -0
  222. package/src/components/Tooltip/Tooltip.scss +21 -0
  223. package/src/components/Type/Type.scss +35 -0
  224. package/src/components/Visibility/Visibility.scss +39 -0
  225. package/src/components/VisuallyHidden/VisuallyHidden.scss +17 -0
  226. package/src/styles/_breakpoint-vars.scss +16 -0
  227. package/src/styles/_config.scss +48 -0
  228. package/src/styles/_controls.scss +88 -0
  229. package/src/styles/_core.scss +4 -0
  230. package/src/styles/_effect.scss +51 -0
  231. package/src/styles/_floating.scss +141 -0
  232. package/src/styles/_kit.scss +1548 -0
  233. package/src/styles/_manifest.scss +670 -0
  234. package/src/styles/_mixins.scss +261 -0
  235. package/src/styles/_tones.scss +63 -0
  236. package/src/styles/_type-emit.scss +76 -0
  237. package/src/styles/_typography-vars.scss +8 -0
  238. package/src/styles/base.scss +80 -0
  239. package/src/styles/breakpoints.test.ts +73 -0
  240. package/src/styles/entryPoints.test.ts +68 -0
  241. package/src/styles/index.scss +93 -0
  242. package/src/styles/kit.test.ts +754 -0
  243. package/src/styles/public/_controls.scss +3 -0
  244. package/src/styles/public/_floating.scss +3 -0
  245. package/src/styles/public/_mixins.scss +5 -0
  246. package/src/styles/public/_tones.scss +4 -0
  247. package/themes/bevel.css +1077 -0
  248. package/themes/bevel.scss +1166 -0
  249. package/themes/depth.css +123 -0
  250. package/themes/depth.scss +46 -0
  251. package/themes/extrude.css +219 -0
  252. package/themes/extrude.scss +255 -0
  253. package/themes/folio.css +986 -0
  254. package/themes/folio.scss +1047 -0
  255. package/themes/gentle.css +66 -0
  256. package/themes/gentle.scss +39 -0
  257. package/themes/outline.css +127 -0
  258. package/themes/outline.scss +126 -0
  259. package/themes/pebble.css +65 -0
  260. package/themes/pebble.scss +69 -0
  261. package/themes/pocket.css +137 -0
  262. package/themes/pocket.scss +45 -0
  263. package/themes/ridge.css +927 -0
  264. package/themes/ridge.scss +998 -0
  265. package/themes/snappy.css +82 -0
  266. package/themes/snappy.scss +40 -0
  267. package/themes/soft.css +79 -0
  268. package/themes/soft.scss +84 -0
  269. package/themes/ticket.css +960 -0
  270. package/themes/ticket.scss +1031 -0
  271. package/themes/tilt.css +148 -0
  272. package/themes/tilt.scss +169 -0
  273. package/themes/wipe.css +186 -0
  274. package/themes/wipe.scss +46 -0
package/themes/ticket.css ADDED
@@ -0,0 +1,960 @@
1
+ /**
2
+ * Ticket: square corners, with a round notch punched in each side of containers, fields and tabs; controls and indicators are tags that point onward, and a control’s point stretches when hovered. Marks are notched like stamps.
3
+ *
4
+ * A greese ui shape theme (ADR 0025): radii, and components outlined with one
5
+ * clip and one border ring each (ADR 0024), in @layer greese.overrides. It
6
+ * sets no colors and no motion, so it goes with any color or motion theme.
7
+ * Load it after greese ui's styles:
8
+ *
9
+ * import '@greese/ui/themes/ticket.css'
10
+ *
11
+ * Generated from apps/site/src/studio/shapes.ts (npm run themes -w site).
12
+ */
13
+ @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
14
+ @layer greese.theme {
15
+ :root {
16
+ --greese-corner-control: var(--greese-radius-none);
17
+ --greese-corner-field: var(--greese-radius-none);
18
+ --greese-corner-surface: var(--greese-radius-none);
19
+ --greese-corner-panel: var(--greese-radius-none);
20
+ --greese-corner-inset: var(--greese-radius-none);
21
+ --greese-corner-pill: var(--greese-radius-none);
22
+ --greese-corner-round: var(--greese-radius-none);
23
+ }
24
+ }
25
+ @layer greese.overrides {
26
+ .greese-Accordion {
27
+ display: grid;
28
+ gap: var(--greese-space-2);
29
+ border-block-start: 0;
30
+ }
31
+ }
32
+ @layer greese.overrides {
33
+ .greese-AccordionItem {
34
+ border-block-end: 0;
35
+ }
36
+ .greese-AccordionItem > .greese-Collapsible-content {
37
+ padding-block-start: var(--greese-space-3);
38
+ }
39
+ }
40
+ @layer greese.overrides {
41
+ .greese-Collapsible > .greese-Collapsible-trigger {
42
+ padding-inline: var(--greese-space-4);
43
+ background-color: var(--greese-color-surface);
44
+ border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
45
+ border-radius: var(--greese-corner-control);
46
+ }
47
+ @media (hover: hover) {
48
+ .greese-Collapsible > .greese-Collapsible-trigger:hover {
49
+ background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
50
+ }
51
+ }
52
+ .greese-Collapsible[open] > .greese-Collapsible-trigger {
53
+ margin-block-end: var(--greese-space-2);
54
+ }
55
+ .greese-Collapsible > .greese-Collapsible-content {
56
+ padding-inline: var(--greese-space-4);
57
+ }
58
+ }
59
+ @property --greese-shape-bleed {
60
+ syntax: "<length>";
61
+ inherits: false;
62
+ initial-value: 0px;
63
+ }
64
+ @property --greese-shape-border {
65
+ syntax: "<length>";
66
+ inherits: false;
67
+ initial-value: 0px;
68
+ }
69
+ @property --greese-shape-n {
70
+ syntax: "<length>";
71
+ inherits: false;
72
+ initial-value: 0px;
73
+ }
74
+ @property --greese-shape-r {
75
+ syntax: "<length>";
76
+ inherits: false;
77
+ initial-value: 0px;
78
+ }
79
+ @property --greese-shape-t {
80
+ syntax: "<length>";
81
+ inherits: false;
82
+ initial-value: 0px;
83
+ }
84
+ @property --greese-shape-ring {
85
+ syntax: "<color>";
86
+ inherits: true;
87
+ initial-value: transparent;
88
+ }
89
+ @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
90
+ @layer greese.overrides {
91
+ .greese-shape-ticket-control,
92
+ .greese-shape-ticket-indicator {
93
+ --greese-shape-ring: var(--greese-color-border);
94
+ position: relative;
95
+ isolation: isolate;
96
+ border-color: transparent;
97
+ clip-path: var(--greese-shape-clip) padding-box;
98
+ }
99
+ .greese-shape-ticket-control::after,
100
+ .greese-shape-ticket-indicator::after {
101
+ position: absolute;
102
+ inset: 0;
103
+ inline-size: auto;
104
+ block-size: auto;
105
+ translate: none;
106
+ z-index: 1;
107
+ pointer-events: none;
108
+ content: "";
109
+ background: var(--greese-shape-ring);
110
+ clip-path: var(--greese-shape-ring-clip);
111
+ }
112
+ @media (prefers-reduced-motion: no-preference) {
113
+ .greese-shape-ticket-control,
114
+ .greese-shape-ticket-indicator {
115
+ transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
116
+ }
117
+ }
118
+ @media (forced-colors: active) {
119
+ .greese-shape-ticket-control,
120
+ .greese-shape-ticket-indicator {
121
+ clip-path: none;
122
+ border-color: CanvasText;
123
+ }
124
+ .greese-shape-ticket-control::after,
125
+ .greese-shape-ticket-indicator::after {
126
+ display: none;
127
+ }
128
+ }
129
+ .greese-shape-ticket-field,
130
+ .greese-shape-ticket-container,
131
+ .greese-shape-ticket-small,
132
+ .greese-shape-ticket-tab {
133
+ --greese-shape-ring: var(--greese-color-border);
134
+ position: relative;
135
+ isolation: isolate;
136
+ border-color: transparent;
137
+ clip-path: var(--greese-shape-clip) padding-box;
138
+ }
139
+ .greese-shape-ticket-field::after,
140
+ .greese-shape-ticket-container::after,
141
+ .greese-shape-ticket-small::after,
142
+ .greese-shape-ticket-tab::after {
143
+ position: absolute;
144
+ inset: 0;
145
+ inline-size: auto;
146
+ block-size: auto;
147
+ translate: none;
148
+ z-index: 1;
149
+ pointer-events: none;
150
+ content: "";
151
+ background: var(--greese-shape-ring);
152
+ clip-path: var(--greese-shape-ring-clip);
153
+ }
154
+ @media (prefers-reduced-motion: no-preference) {
155
+ .greese-shape-ticket-field,
156
+ .greese-shape-ticket-container,
157
+ .greese-shape-ticket-small,
158
+ .greese-shape-ticket-tab {
159
+ transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
160
+ }
161
+ }
162
+ @media (forced-colors: active) {
163
+ .greese-shape-ticket-field,
164
+ .greese-shape-ticket-container,
165
+ .greese-shape-ticket-small,
166
+ .greese-shape-ticket-tab {
167
+ clip-path: none;
168
+ border-color: CanvasText;
169
+ }
170
+ .greese-shape-ticket-field::after,
171
+ .greese-shape-ticket-container::after,
172
+ .greese-shape-ticket-small::after,
173
+ .greese-shape-ticket-tab::after {
174
+ display: none;
175
+ }
176
+ }
177
+ .greese-shape-ticket-mark {
178
+ --greese-shape-ring: var(--greese-color-border);
179
+ position: relative;
180
+ isolation: isolate;
181
+ border-color: transparent;
182
+ clip-path: var(--greese-shape-clip) padding-box;
183
+ }
184
+ .greese-shape-ticket-mark::after {
185
+ position: absolute;
186
+ inset: 0;
187
+ inline-size: auto;
188
+ block-size: auto;
189
+ translate: none;
190
+ z-index: 1;
191
+ pointer-events: none;
192
+ content: "";
193
+ background: var(--greese-shape-ring);
194
+ clip-path: var(--greese-shape-ring-clip);
195
+ }
196
+ @media (prefers-reduced-motion: no-preference) {
197
+ .greese-shape-ticket-mark {
198
+ transition: --greese-shape-n var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
199
+ }
200
+ }
201
+ @media (forced-colors: active) {
202
+ .greese-shape-ticket-mark {
203
+ clip-path: none;
204
+ border-color: CanvasText;
205
+ }
206
+ .greese-shape-ticket-mark::after {
207
+ display: none;
208
+ }
209
+ }
210
+ .greese-AccordionItem > .greese-Collapsible-content,
211
+ .greese-Tile {
212
+ --greese-shape-ring: var(--greese-color-border);
213
+ position: relative;
214
+ isolation: isolate;
215
+ border-color: transparent;
216
+ clip-path: var(--greese-shape-clip) padding-box;
217
+ }
218
+ .greese-AccordionItem > .greese-Collapsible-content::after,
219
+ .greese-Tile::after {
220
+ position: absolute;
221
+ inset: 0;
222
+ inline-size: auto;
223
+ block-size: auto;
224
+ translate: none;
225
+ z-index: 1;
226
+ pointer-events: none;
227
+ content: "";
228
+ background: var(--greese-shape-ring);
229
+ clip-path: var(--greese-shape-ring-clip);
230
+ }
231
+ @media (prefers-reduced-motion: no-preference) {
232
+ .greese-AccordionItem > .greese-Collapsible-content,
233
+ .greese-Tile {
234
+ transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
235
+ }
236
+ }
237
+ @media (forced-colors: active) {
238
+ .greese-AccordionItem > .greese-Collapsible-content,
239
+ .greese-Tile {
240
+ clip-path: none;
241
+ border-color: CanvasText;
242
+ }
243
+ .greese-AccordionItem > .greese-Collapsible-content::after,
244
+ .greese-Tile::after {
245
+ display: none;
246
+ }
247
+ }
248
+ .greese-Alert {
249
+ --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
250
+ position: relative;
251
+ isolation: isolate;
252
+ border-color: transparent;
253
+ clip-path: var(--greese-shape-clip) padding-box;
254
+ }
255
+ .greese-Alert::after {
256
+ position: absolute;
257
+ inset: 0;
258
+ inline-size: auto;
259
+ block-size: auto;
260
+ translate: none;
261
+ z-index: 1;
262
+ pointer-events: none;
263
+ content: "";
264
+ background: var(--greese-shape-ring);
265
+ clip-path: var(--greese-shape-ring-clip);
266
+ }
267
+ @media (prefers-reduced-motion: no-preference) {
268
+ .greese-Alert {
269
+ transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
270
+ }
271
+ }
272
+ @media (forced-colors: active) {
273
+ .greese-Alert {
274
+ clip-path: none;
275
+ border-color: CanvasText;
276
+ }
277
+ .greese-Alert::after {
278
+ display: none;
279
+ }
280
+ }
281
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
282
+ .greese-Status:not(.greese-Status--pulse) {
283
+ clip-path: var(--greese-shape-clip) border-box;
284
+ }
285
+ @media (forced-colors: active) {
286
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
287
+ .greese-Status:not(.greese-Status--pulse) {
288
+ clip-path: none;
289
+ }
290
+ }
291
+ .greese-Badge {
292
+ --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
293
+ position: relative;
294
+ isolation: isolate;
295
+ border-color: transparent;
296
+ clip-path: var(--greese-shape-clip) padding-box;
297
+ }
298
+ .greese-Badge::after {
299
+ position: absolute;
300
+ inset: 0;
301
+ inline-size: auto;
302
+ block-size: auto;
303
+ translate: none;
304
+ z-index: 1;
305
+ pointer-events: none;
306
+ content: "";
307
+ background: var(--greese-shape-ring);
308
+ clip-path: var(--greese-shape-ring-clip);
309
+ }
310
+ @media (prefers-reduced-motion: no-preference) {
311
+ .greese-Badge {
312
+ transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
313
+ }
314
+ }
315
+ @media (forced-colors: active) {
316
+ .greese-Badge {
317
+ clip-path: none;
318
+ border-color: CanvasText;
319
+ }
320
+ .greese-Badge::after {
321
+ display: none;
322
+ }
323
+ }
324
+ .greese-Button {
325
+ --greese-shape-ring: var(--greese-button-border, transparent);
326
+ position: relative;
327
+ isolation: isolate;
328
+ border-color: transparent;
329
+ clip-path: var(--greese-shape-clip) padding-box;
330
+ }
331
+ .greese-Button::after {
332
+ position: absolute;
333
+ inset: 0;
334
+ inline-size: auto;
335
+ block-size: auto;
336
+ translate: none;
337
+ z-index: 1;
338
+ pointer-events: none;
339
+ content: "";
340
+ background: var(--greese-shape-ring);
341
+ clip-path: var(--greese-shape-ring-clip);
342
+ }
343
+ @media (prefers-reduced-motion: no-preference) {
344
+ .greese-Button {
345
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
346
+ }
347
+ }
348
+ @media (forced-colors: active) {
349
+ .greese-Button {
350
+ clip-path: none;
351
+ border-color: CanvasText;
352
+ }
353
+ .greese-Button::after {
354
+ display: none;
355
+ }
356
+ }
357
+ .greese-Card {
358
+ --greese-shape-ring: transparent;
359
+ position: relative;
360
+ isolation: isolate;
361
+ border-color: transparent;
362
+ clip-path: var(--greese-shape-clip) padding-box;
363
+ }
364
+ .greese-Card::after {
365
+ position: absolute;
366
+ inset: 0;
367
+ inline-size: auto;
368
+ block-size: auto;
369
+ translate: none;
370
+ z-index: 1;
371
+ pointer-events: none;
372
+ content: "";
373
+ background: var(--greese-shape-ring);
374
+ clip-path: var(--greese-shape-ring-clip);
375
+ }
376
+ .greese-Card.greese-Card--outline {
377
+ --greese-shape-ring: var(--greese-color-border);
378
+ }
379
+ .greese-Card.greese-Card--elevated {
380
+ --greese-shape-ring: var(--greese-color-border-strong);
381
+ }
382
+ @media (prefers-reduced-motion: no-preference) {
383
+ .greese-Card {
384
+ transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
385
+ }
386
+ .greese-Card.greese-Card--interactive {
387
+ transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear, box-shadow var(--greese-duration-normal) var(--greese-easing-standard), border-color var(--greese-duration-normal) var(--greese-easing-standard), translate var(--greese-duration-normal) var(--greese-easing-standard);
388
+ }
389
+ }
390
+ @media (forced-colors: active) {
391
+ .greese-Card {
392
+ clip-path: none;
393
+ border-color: CanvasText;
394
+ }
395
+ .greese-Card::after {
396
+ display: none;
397
+ }
398
+ }
399
+ .greese-Chip {
400
+ --greese-shape-ring: var(--greese-color-border);
401
+ position: relative;
402
+ isolation: isolate;
403
+ border-color: transparent;
404
+ clip-path: var(--greese-shape-clip) padding-box;
405
+ }
406
+ .greese-Chip::after {
407
+ position: absolute;
408
+ inset: 0;
409
+ inline-size: auto;
410
+ block-size: auto;
411
+ translate: none;
412
+ z-index: 1;
413
+ pointer-events: none;
414
+ content: "";
415
+ background: var(--greese-shape-ring);
416
+ clip-path: var(--greese-shape-ring-clip);
417
+ }
418
+ @media (prefers-reduced-motion: no-preference) {
419
+ .greese-Chip {
420
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
421
+ }
422
+ }
423
+ @media (forced-colors: active) {
424
+ .greese-Chip {
425
+ clip-path: none;
426
+ border-color: CanvasText;
427
+ }
428
+ .greese-Chip::after {
429
+ display: none;
430
+ }
431
+ }
432
+ .greese-Collapsible-trigger {
433
+ --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
434
+ position: relative;
435
+ isolation: isolate;
436
+ border-color: transparent;
437
+ clip-path: var(--greese-shape-clip) padding-box;
438
+ }
439
+ .greese-Collapsible-trigger::after {
440
+ position: absolute;
441
+ inset: 0;
442
+ inline-size: auto;
443
+ block-size: auto;
444
+ translate: none;
445
+ z-index: 1;
446
+ pointer-events: none;
447
+ content: "";
448
+ background: var(--greese-shape-ring);
449
+ clip-path: var(--greese-shape-ring-clip);
450
+ }
451
+ @media (prefers-reduced-motion: no-preference) {
452
+ .greese-Collapsible-trigger {
453
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
454
+ }
455
+ }
456
+ @media (forced-colors: active) {
457
+ .greese-Collapsible-trigger {
458
+ clip-path: none;
459
+ border-color: CanvasText;
460
+ }
461
+ .greese-Collapsible-trigger::after {
462
+ display: none;
463
+ }
464
+ }
465
+ .greese-Dialog,
466
+ .greese-Menu,
467
+ .greese-Popover {
468
+ --greese-shape-ring: var(--greese-color-border);
469
+ isolation: isolate;
470
+ border-color: transparent;
471
+ clip-path: var(--greese-shape-clip) padding-box;
472
+ }
473
+ .greese-Dialog::after,
474
+ .greese-Menu::after,
475
+ .greese-Popover::after {
476
+ position: absolute;
477
+ inset: 0;
478
+ inline-size: auto;
479
+ block-size: auto;
480
+ translate: none;
481
+ z-index: 1;
482
+ pointer-events: none;
483
+ content: "";
484
+ background: var(--greese-shape-ring);
485
+ clip-path: var(--greese-shape-ring-clip);
486
+ }
487
+ @media (forced-colors: active) {
488
+ .greese-Dialog,
489
+ .greese-Menu,
490
+ .greese-Popover {
491
+ clip-path: none;
492
+ border-color: CanvasText;
493
+ }
494
+ .greese-Dialog::after,
495
+ .greese-Menu::after,
496
+ .greese-Popover::after {
497
+ display: none;
498
+ }
499
+ }
500
+ .greese-Input,
501
+ .greese-Select,
502
+ .greese-Textarea {
503
+ --greese-shape-ring: var(--greese-color-border-strong);
504
+ position: relative;
505
+ isolation: isolate;
506
+ border-color: transparent;
507
+ clip-path: var(--greese-shape-clip) padding-box;
508
+ }
509
+ .greese-Input::after,
510
+ .greese-Select::after,
511
+ .greese-Textarea::after {
512
+ position: absolute;
513
+ inset: 0;
514
+ inline-size: auto;
515
+ block-size: auto;
516
+ translate: none;
517
+ z-index: 1;
518
+ pointer-events: none;
519
+ content: "";
520
+ background: var(--greese-shape-ring);
521
+ clip-path: var(--greese-shape-ring-clip);
522
+ }
523
+ .greese-Input:hover,
524
+ .greese-Select:hover,
525
+ .greese-Textarea:hover {
526
+ --greese-shape-ring: var(--greese-color-fg-muted);
527
+ }
528
+ .greese-Input[aria-invalid=true], .greese-Input[data-invalid],
529
+ .greese-Select[aria-invalid=true], .greese-Select[data-invalid],
530
+ .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
531
+ --greese-shape-ring: var(--greese-color-negative);
532
+ }
533
+ @media (prefers-reduced-motion: no-preference) {
534
+ .greese-Input,
535
+ .greese-Select,
536
+ .greese-Textarea {
537
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
538
+ }
539
+ }
540
+ @media (forced-colors: active) {
541
+ .greese-Input,
542
+ .greese-Select,
543
+ .greese-Textarea {
544
+ clip-path: none;
545
+ border-color: CanvasText;
546
+ }
547
+ .greese-Input::after,
548
+ .greese-Select::after,
549
+ .greese-Textarea::after {
550
+ display: none;
551
+ }
552
+ }
553
+ .greese-OtpField-slot {
554
+ --greese-shape-ring: var(--greese-color-border-strong);
555
+ position: relative;
556
+ isolation: isolate;
557
+ border-color: transparent;
558
+ clip-path: var(--greese-shape-clip) padding-box;
559
+ }
560
+ .greese-OtpField-slot::before {
561
+ position: absolute;
562
+ inset: 0;
563
+ inline-size: auto;
564
+ block-size: auto;
565
+ translate: none;
566
+ z-index: 1;
567
+ pointer-events: none;
568
+ content: "";
569
+ background: var(--greese-shape-ring);
570
+ clip-path: var(--greese-shape-ring-clip);
571
+ }
572
+ .greese-OtpField[data-invalid] .greese-OtpField-slot {
573
+ --greese-shape-ring: var(--greese-color-negative);
574
+ }
575
+ .greese-OtpField-slot.greese-OtpField-slot--active {
576
+ --greese-shape-ring: var(--greese-color-focus-ring);
577
+ --greese-shape-border: 2px;
578
+ }
579
+ @media (prefers-reduced-motion: no-preference) {
580
+ .greese-OtpField-slot {
581
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
582
+ }
583
+ }
584
+ @media (forced-colors: active) {
585
+ .greese-OtpField-slot {
586
+ clip-path: none;
587
+ border-color: CanvasText;
588
+ }
589
+ .greese-OtpField-slot::before {
590
+ display: none;
591
+ }
592
+ }
593
+ .greese-Segment {
594
+ --greese-shape-ring: transparent;
595
+ position: relative;
596
+ isolation: isolate;
597
+ border-color: transparent;
598
+ clip-path: var(--greese-shape-clip) padding-box;
599
+ }
600
+ .greese-Segment::after {
601
+ position: absolute;
602
+ inset: 0;
603
+ inline-size: auto;
604
+ block-size: auto;
605
+ translate: none;
606
+ z-index: 1;
607
+ pointer-events: none;
608
+ content: "";
609
+ background: var(--greese-shape-ring);
610
+ clip-path: var(--greese-shape-ring-clip);
611
+ }
612
+ .greese-Segment:has(:checked) {
613
+ --greese-shape-ring: var(--greese-segment-current-ring, transparent);
614
+ }
615
+ @media (prefers-reduced-motion: no-preference) {
616
+ .greese-Segment {
617
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
618
+ }
619
+ }
620
+ @media (forced-colors: active) {
621
+ .greese-Segment {
622
+ clip-path: none;
623
+ border-color: CanvasText;
624
+ }
625
+ .greese-Segment::after {
626
+ display: none;
627
+ }
628
+ }
629
+ .greese-SegmentedControl-track {
630
+ --greese-shape-ring: var(--greese-color-border);
631
+ position: relative;
632
+ isolation: isolate;
633
+ border-color: transparent;
634
+ clip-path: var(--greese-shape-clip) padding-box;
635
+ }
636
+ .greese-SegmentedControl-track::after {
637
+ position: absolute;
638
+ inset: 0;
639
+ inline-size: auto;
640
+ block-size: auto;
641
+ translate: none;
642
+ z-index: 1;
643
+ pointer-events: none;
644
+ content: "";
645
+ background: var(--greese-shape-ring);
646
+ clip-path: var(--greese-shape-ring-clip);
647
+ }
648
+ @media (prefers-reduced-motion: no-preference) {
649
+ .greese-SegmentedControl-track {
650
+ transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
651
+ }
652
+ }
653
+ @media (forced-colors: active) {
654
+ .greese-SegmentedControl-track {
655
+ clip-path: none;
656
+ border-color: CanvasText;
657
+ }
658
+ .greese-SegmentedControl-track::after {
659
+ display: none;
660
+ }
661
+ }
662
+ .greese-Tab {
663
+ --greese-shape-ring: transparent;
664
+ position: relative;
665
+ isolation: isolate;
666
+ border-color: transparent;
667
+ clip-path: var(--greese-shape-clip) padding-box;
668
+ }
669
+ .greese-Tab::after {
670
+ position: absolute;
671
+ inset: 0;
672
+ inline-size: auto;
673
+ block-size: auto;
674
+ translate: none;
675
+ z-index: 1;
676
+ pointer-events: none;
677
+ content: "";
678
+ background: var(--greese-shape-ring);
679
+ clip-path: var(--greese-shape-ring-clip);
680
+ }
681
+ .greese-Tab[aria-selected=true] {
682
+ --greese-shape-ring: var(--greese-tab-current-ring, transparent);
683
+ --greese-shape-border: 1.5px;
684
+ }
685
+ @media (prefers-reduced-motion: no-preference) {
686
+ .greese-Tab {
687
+ transition: color var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
688
+ }
689
+ }
690
+ @media (forced-colors: active) {
691
+ .greese-Tab {
692
+ clip-path: none;
693
+ border-color: CanvasText;
694
+ }
695
+ .greese-Tab::after {
696
+ display: none;
697
+ }
698
+ }
699
+ .greese-Toast {
700
+ --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
701
+ position: relative;
702
+ isolation: isolate;
703
+ border-color: transparent;
704
+ clip-path: var(--greese-shape-clip) padding-box;
705
+ }
706
+ .greese-Toast::after {
707
+ position: absolute;
708
+ inset: 0;
709
+ inline-size: auto;
710
+ block-size: auto;
711
+ translate: none;
712
+ z-index: 1;
713
+ pointer-events: none;
714
+ content: "";
715
+ background: var(--greese-shape-ring);
716
+ clip-path: var(--greese-shape-ring-clip);
717
+ }
718
+ .greese-Toast {
719
+ box-shadow: inset 3px 0 0 var(--greese-toast-edge);
720
+ }
721
+ .greese-Toast:dir(rtl) {
722
+ box-shadow: inset -3px 0 0 var(--greese-toast-edge);
723
+ }
724
+ @media (forced-colors: active) {
725
+ .greese-Toast {
726
+ clip-path: none;
727
+ border-color: CanvasText;
728
+ }
729
+ .greese-Toast::after {
730
+ display: none;
731
+ }
732
+ }
733
+ .greese-Tooltip {
734
+ --greese-shape-ring: var(--greese-tooltip-border, transparent);
735
+ isolation: isolate;
736
+ border-color: transparent;
737
+ clip-path: var(--greese-shape-clip) padding-box;
738
+ }
739
+ .greese-Tooltip::after {
740
+ position: absolute;
741
+ inset: 0;
742
+ inline-size: auto;
743
+ block-size: auto;
744
+ translate: none;
745
+ z-index: 1;
746
+ pointer-events: none;
747
+ content: "";
748
+ background: var(--greese-shape-ring);
749
+ clip-path: var(--greese-shape-ring-clip);
750
+ }
751
+ @media (forced-colors: active) {
752
+ .greese-Tooltip {
753
+ clip-path: none;
754
+ border-color: CanvasText;
755
+ }
756
+ .greese-Tooltip::after {
757
+ display: none;
758
+ }
759
+ }
760
+ .greese-shape-ticket-control,
761
+ .greese-Button {
762
+ --greese-shape-t: 10px;
763
+ --greese-shape-border: 1px;
764
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-t) + 0.847 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.014 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-t) + 0.847 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
765
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-t)) 0, 100% 50%, calc(100% - var(--greese-shape-t)) 100%, 0 100%, 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-t) - 0.847 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.014 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-t) - 0.847 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
766
+ }
767
+ .greese-shape-ticket-control:dir(rtl),
768
+ .greese-Button:dir(rtl) {
769
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-t) - 0.847 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.014 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-t) - 0.847 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
770
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-t)) 100%, 0 50%, calc(var(--greese-shape-t)) 0, 100% 0, 100% 100%, calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-t) + 0.847 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.014 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-t) + 0.847 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
771
+ }
772
+ .greese-Button.greese-Button--size-sm {
773
+ --greese-shape-t: 7px;
774
+ }
775
+ .greese-Button.greese-Button--size-xs {
776
+ --greese-shape-t: 5px;
777
+ }
778
+ .greese-Button.greese-IconButton {
779
+ --greese-shape-t: 5px;
780
+ }
781
+ @media (hover: hover) {
782
+ .greese-shape-ticket-control:hover,
783
+ .greese-Button:hover {
784
+ --greese-shape-t: 15px;
785
+ }
786
+ .greese-Button.greese-Button--size-sm:hover {
787
+ --greese-shape-t: 10.5px;
788
+ }
789
+ .greese-Button.greese-Button--size-xs:hover,
790
+ .greese-Button.greese-IconButton:hover {
791
+ --greese-shape-t: 7.5px;
792
+ }
793
+ }
794
+ .greese-shape-ticket-control:active,
795
+ .greese-Button:active {
796
+ --greese-shape-t: 6px;
797
+ }
798
+ .greese-Button.greese-Button--size-sm:active {
799
+ --greese-shape-t: 4.2px;
800
+ }
801
+ .greese-Button.greese-Button--size-xs:active,
802
+ .greese-Button.greese-IconButton:active {
803
+ --greese-shape-t: 3px;
804
+ }
805
+ .greese-shape-ticket-control:focus-visible {
806
+ --greese-shape-t: 0px;
807
+ --greese-shape-bleed: 8px;
808
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
809
+ }
810
+ .greese-Button:focus-visible {
811
+ --greese-shape-t: 0px;
812
+ --greese-shape-bleed: 8px;
813
+ transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
814
+ }
815
+ .greese-shape-ticket-field,
816
+ .greese-Input,
817
+ .greese-OtpField-slot,
818
+ .greese-Select,
819
+ .greese-Textarea {
820
+ --greese-shape-r: 5px;
821
+ --greese-shape-border: 1px;
822
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
823
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
824
+ }
825
+ .greese-Input:has(:focus-visible),
826
+ .greese-Select:has(:focus-visible),
827
+ .greese-Textarea:has(:focus-visible) {
828
+ --greese-shape-border: 3px;
829
+ --greese-shape-ring: var(--greese-color-focus-ring);
830
+ outline-color: transparent;
831
+ }
832
+ .greese-shape-ticket-field:focus-visible {
833
+ --greese-shape-r: 0px;
834
+ --greese-shape-bleed: 8px;
835
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
836
+ }
837
+ .greese-shape-ticket-container,
838
+ .greese-AccordionItem > .greese-Collapsible-content,
839
+ .greese-Card,
840
+ .greese-Dialog,
841
+ .greese-Menu,
842
+ .greese-Popover,
843
+ .greese-Tile,
844
+ .greese-Toast {
845
+ --greese-shape-r: 12px;
846
+ --greese-shape-border: 1px;
847
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
848
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
849
+ }
850
+ @media (hover: hover) {
851
+ .greese-shape-ticket-container:hover,
852
+ .greese-Card.greese-Card--interactive:hover {
853
+ --greese-shape-r: 16px;
854
+ }
855
+ }
856
+ .greese-shape-ticket-container:focus-visible,
857
+ .greese-AccordionItem > .greese-Collapsible-content:focus-visible,
858
+ .greese-Card:focus-visible,
859
+ .greese-Tile:focus-visible {
860
+ --greese-shape-r: 0px;
861
+ --greese-shape-bleed: 8px;
862
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
863
+ }
864
+ .greese-Dialog:focus-visible,
865
+ .greese-Menu:focus-visible,
866
+ .greese-Popover:focus-visible,
867
+ .greese-Toast:focus-visible {
868
+ --greese-shape-r: 0px;
869
+ --greese-shape-bleed: 8px;
870
+ }
871
+ .greese-shape-ticket-small,
872
+ .greese-Alert,
873
+ .greese-Collapsible-trigger,
874
+ .greese-Tooltip {
875
+ --greese-shape-r: 7px;
876
+ --greese-shape-border: 1px;
877
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
878
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
879
+ }
880
+ .greese-shape-ticket-small:focus-visible,
881
+ .greese-Alert:focus-visible {
882
+ --greese-shape-r: 0px;
883
+ --greese-shape-bleed: 8px;
884
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
885
+ }
886
+ .greese-Collapsible-trigger:focus-visible {
887
+ --greese-shape-r: 0px;
888
+ --greese-shape-bleed: 8px;
889
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
890
+ }
891
+ .greese-Tooltip:focus-visible {
892
+ --greese-shape-r: 0px;
893
+ --greese-shape-bleed: 8px;
894
+ }
895
+ .greese-shape-ticket-indicator,
896
+ .greese-Badge,
897
+ .greese-Chip,
898
+ .greese-Segment,
899
+ .greese-SegmentedControl-track {
900
+ --greese-shape-t: 6px;
901
+ --greese-shape-border: 1px;
902
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-t) + 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.002 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-t) + 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
903
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-t)) 0, 100% 50%, calc(100% - var(--greese-shape-t)) 100%, 0 100%, 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-t) - 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.002 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-t) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
904
+ }
905
+ .greese-shape-ticket-indicator:dir(rtl),
906
+ .greese-Badge:dir(rtl),
907
+ .greese-Chip:dir(rtl),
908
+ .greese-Segment:dir(rtl),
909
+ .greese-SegmentedControl-track:dir(rtl) {
910
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-t) - 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.002 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-t) - 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
911
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-t)) 100%, 0 50%, calc(var(--greese-shape-t)) 0, 100% 0, 100% 100%, calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-t) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.002 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-t) + 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
912
+ }
913
+ .greese-Segment:has(:focus-visible) {
914
+ --greese-shape-border: 3px;
915
+ --greese-shape-ring: var(--greese-color-focus-ring);
916
+ outline-color: transparent;
917
+ }
918
+ .greese-shape-ticket-indicator:focus-visible,
919
+ .greese-Badge:focus-visible,
920
+ .greese-SegmentedControl-track:focus-visible {
921
+ --greese-shape-t: 0px;
922
+ --greese-shape-bleed: 8px;
923
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
924
+ }
925
+ .greese-Chip:focus-visible {
926
+ --greese-shape-t: 0px;
927
+ --greese-shape-bleed: 8px;
928
+ transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
929
+ }
930
+ .greese-shape-ticket-mark,
931
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
932
+ .greese-Status:not(.greese-Status--pulse) {
933
+ --greese-shape-n: 4px;
934
+ --greese-shape-border: 1px;
935
+ --greese-shape-clip: polygon(calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)));
936
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-n)) 0, calc(100% - var(--greese-shape-n)) 0, calc(100% - var(--greese-shape-n)) calc(var(--greese-shape-n)), 100% calc(var(--greese-shape-n)), 100% calc(100% - var(--greese-shape-n)), calc(100% - var(--greese-shape-n)) calc(100% - var(--greese-shape-n)), calc(100% - var(--greese-shape-n)) 100%, calc(var(--greese-shape-n)) 100%, calc(var(--greese-shape-n)) calc(100% - var(--greese-shape-n)), 0 calc(100% - var(--greese-shape-n)), 0 calc(var(--greese-shape-n)), calc(var(--greese-shape-n)) calc(var(--greese-shape-n)), calc(var(--greese-shape-n)) 0, calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-border)));
937
+ }
938
+ .greese-shape-ticket-mark:focus-visible {
939
+ --greese-shape-n: 0px;
940
+ --greese-shape-bleed: 8px;
941
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
942
+ }
943
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):focus-visible,
944
+ .greese-Status:not(.greese-Status--pulse):focus-visible {
945
+ --greese-shape-n: 0px;
946
+ --greese-shape-bleed: 8px;
947
+ }
948
+ .greese-shape-ticket-tab,
949
+ .greese-Tab {
950
+ --greese-shape-r: 4px;
951
+ --greese-shape-border: 1px;
952
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
953
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
954
+ }
955
+ .greese-shape-ticket-tab:focus-visible {
956
+ --greese-shape-r: 0px;
957
+ --greese-shape-bleed: 8px;
958
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
959
+ }
960
+ }