[{"name":"Css","comment":" If you need something that `elm-css` does not support right now, the\n[`Css.property`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#property)\nand [`Css.Global.selector`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css-Global#selector)\nfunctions let you define custom properties and selectors, respectively.\n\n\n## Reusable Styles\n\n@docs Style, batch\n\n\n## Custom Properties\n\n@docs property\n\n\n## `!important`\n\n@docs important\n\n\n------------------------------------------------------\n\n\n# Pseudo-Classes\n\n@docs pseudoClass\n@docs active, checked, default, defined, disabled, empty, enabled\n@docs first, firstChild, firstOfType, focus, fullscreen, hover, inRange\n@docs indeterminate, invalid, lastChild, lastOfType, leftHandPage, link, onlyChild\n@docs onlyOfType, outOfRange, readOnly, readWrite, required, rightHandPage\n@docs root, scope, target, valid, visited\n\n# Pseudo-Classes with arguments\n\n@docs dir, lang, not\n@docs nthChild, nthLastChild, nthOfType, nthLastOfType\n\n# Pseudo-Elements\n\n@docs pseudoElement\n@docs after, backdrop, before, cue, firstLetter, firstLine\n@docs marker, placeholder, selection\n\n# Pseudo-Elements with arguments\n\n@docs slotted\n\n\n------------------------------------------------------\n\n\n# Value types\n\n## Numerical units\n\n### Lengths\n\n@docs Length, LengthSupported\n@docs zero, px, em, ex, ch, rem, vh, vw, vmin, vmax, mm, cm, q, inch, pt, pc, pct, num, int\n\n### Angles\n\n@docs Angle, AngleSupported, Width, WidthSupported\n@docs deg, grad, rad, turn\n\n### Time\n\n@docs Time, TimeSupported, s, ms\n\n### Flex\n\n@docs fr, minmax, fitContentTo\n\n## Names & URLs\n\n@docs customIdent, string, url\n\n## Color\n\n@docs Color, ColorSupported, hex, rgb, rgba, hsl, hsla, currentcolor\n\n## Images & Shapes\n\n@docs Image, ImageSupported\n@docs BasicShape, BasicShapeSupported\n\n@docs insetRect, insetRect2, insetRect3, insetRect4\n@docs insetRound, insetRound2, insetRound3, insetRound4\n@docs circle, circleAt, circleAt2\n@docs ellipse, ellipseAt, ellipseAt2\n@docs closestSide, farthestSide, polygon, path\n\n\n## Blend Modes\n\n@docs BlendMode, BlendModeSupported\n\n## Filter Functions\n\n@docs FilterFunction, FilterFunctionSupported\n@docs blur, brightness, contrast, dropShadow, grayscale, hueRotate, invert, opacity_, saturate, sepia\n\n## Lines\n@docs LineStyle, LineStyleSupported\n@docs LineWidth, LineWidthSupported\n\n## Calc\n\n@docs calc, CalcOperation, minus, plus, times, dividedBy\n\n\n------------------------------------------------------\n\n\n# Shared/Grouped keyword values\n\nMany different kinds of CSS properties use the same keyword values,\nso they're put in this place for easier understanding.\n\nSome of these keywords are used only in one property but they fit\ninto a group of functionality (like Logical Values), so they're also grouped here.\n\n\n## General Values\n\nAll CSS properties can have the values `unset`, `initial`, `inherit` and `revert`.\n\n@docs BaseValue\n@docs unset, initial, inherit, revert\n\n\n## Very common keywords\n\n@docs auto, none\n\n\n## (usually) Absolute positional values\n\n@docs left_, right_, top_, bottom_\n\n\n## (usually) Logical Values\n\nLogical values are those that set properties by their relation to the user's reading direction.\n\nSometimes these keywords mean other things too.\n\n@docs block, inline, start, end, blockStart, blockEnd, inlineStart, inlineEnd\n\n\n## Content sizing values\n\n@docs minContent, maxContent, fitContent\n\n\n## Axis values\n\n@docs x, y, z\n\n\n## Alignment values\n\n@docs stretch, center\n\n\n## Geometry box values\n\n@docs marginBox, borderBox, paddingBox, contentBox, fillBox, strokeBox, viewBox\n\n\n## Typographic values\n\n@docs baseline, sub, super, ruby, fullWidth, under, circle_\n\n\n## Visibility\n\n@docs hidden, visible\n\n\n## Thickness\n\n@docs thin, thick\n\n\n## Miscellaneous shared\n\n@docs normal, strict, all_, both, always, scroll, column\n@docs content, fill_, stroke, text, style\n@docs clip, cover, contain_\n@docs repeat, noRepeat, repeatX, repeatY, space, round_\n@docs isolate, matchParent, nowrap\n\n\n------------------------------------------------------\n\n\n# All\n\n@docs all\n\n\n------------------------------------------------------\n\n\n# Display\n\n@docs display, display2, displayListItem2, displayListItem3\n@docs flex_, flow, flowRoot, grid_, contents, listItem\n@docs inlineBlock, inlineFlex, inlineTable, inlineGrid\n@docs rubyBase, rubyBaseContainer, rubyText, rubyTextContainer\n@docs runIn, table\n@docs tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup\n\n\n------------------------------------------------------\n\n\n# Position\n\n@docs position\n@docs absolute, fixed, relative, static, sticky\n\n\n------------------------------------------------------\n\n\n# Stacking contexts & box-sizing\n\n@docs zIndex, isolation, boxSizing\n\n\n------------------------------------------------------\n\n\n# Contain\n\n@docs contain, contain2, contain3, contain4\n@docs size, inlineSize_, layout, paint\n@docs containIntrinsicSize, containIntrinsicSize2, containIntrinsicSize4\n@docs containIntrinsicWidth, containIntrinsicWidth2, containIntrinsicHeight, containIntrinsicHeight2\n@docs containIntrinsicInlineSize, containIntrinsicInlineSize2, containIntrinsicBlockSize, containIntrinsicBlockSize2\n\n\n------------------------------------------------------\n\n\n# Sizing\n\n@docs width, minWidth, maxWidth, height, minHeight, maxHeight\n@docs blockSize, minBlockSize, maxBlockSize\n@docs inlineSize, minInlineSize, maxInlineSize\n\n\n------------------------------------------------------\n\n\n# Inset\n\n@docs inset, inset2, inset3, inset4\n\n## Absolute insets\n\n@docs top, right, bottom, left\n\n## Logical insets\n\n@docs insetBlock, insetBlock2, insetInline, insetInline2\n@docs insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd\n\n\n------------------------------------------------------\n\n\n# Margin\n\n@docs margin, margin2, margin3, margin4\n\n## Absolute margin edges\n\n@docs marginTop, marginRight, marginBottom, marginLeft\n\n## Logical margin edges\n\n@docs marginBlock, marginBlock2, marginBlockStart, marginBlockEnd\n@docs marginInline, marginInline2, marginInlineStart, marginInlineEnd\n\n\n------------------------------------------------------\n\n\n# Padding\n\n@docs padding, padding2, padding3, padding4\n\n## Absolute padding edges\n\n@docs paddingTop, paddingRight, paddingBottom, paddingLeft\n\n## Logical padding edges\n\n@docs paddingBlock, paddingBlock2, paddingBlockStart, paddingBlockEnd\n@docs paddingInline, paddingInline2, paddingInlineStart, paddingInlineEnd\n\n\n------------------------------------------------------\n\n\n# Borders\n\n@docs border, border2, border3\n\n## Absolute border edges\n\n@docs borderTop, borderTop2, borderTop3\n@docs borderRight, borderRight2, borderRight3\n@docs borderBottom, borderBottom2, borderBottom3\n@docs borderLeft, borderLeft2, borderLeft3\n\n## Logical border edges\n\n@docs borderBlock, borderBlock2, borderBlock3\n@docs borderBlockStart, borderBlockStart2, borderBlockStart3\n@docs borderBlockEnd, borderBlockEnd2, borderBlockEnd3\n@docs borderInline, borderInline2, borderInline3\n@docs borderInlineStart, borderInlineStart2, borderInlineStart3\n@docs borderInlineEnd, borderInlineEnd2, borderInlineEnd3\n\n## Border width\n\n@docs borderWidth, borderWidth2, borderWidth3, borderWidth4\n@docs borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth\n@docs borderBlockWidth, borderBlockStartWidth, borderBlockEndWidth\n@docs borderInlineWidth, borderInlineStartWidth, borderInlineEndWidth\n\n## Border style\n\n@docs borderStyle, borderStyle2, borderStyle3, borderStyle4\n@docs borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle\n@docs borderBlockStyle, borderBlockStartStyle, borderBlockEndStyle\n@docs borderInlineStyle, borderInlineStartStyle, borderInlineEndStyle\n@docs dotted, dashed, solid, double, groove, ridge, inset_, outset\n\n## Border color\n\n@docs borderColor, borderColor2, borderColor3, borderColor4\n@docs borderTopColor, borderRightColor, borderBottomColor, borderLeftColor\n@docs borderBlockColor, borderBlockStartColor, borderBlockEndColor\n@docs borderInlineColor, borderInlineStartColor, borderInlineEndColor\n\n## Border radius\n\n@docs borderRadius, borderRadius2, borderRadius3, borderRadius4\n@docs borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2\n@docs borderBottomRightRadius, borderBottomRightRadius2, borderBottomLeftRadius, borderBottomLeftRadius2\n@docs borderStartStartRadius, borderStartStartRadius2, borderStartEndRadius, borderStartEndRadius2\n@docs borderEndStartRadius, borderEndStartRadius2, borderEndEndRadius, borderEndEndRadius2\n\n## Border image\n\n@docs borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4\n@docs borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4\n\n\n------------------------------------------------------\n\n\n# Outlines\n\n@docs outline, outline3, outlineWidth, outlineColor\n@docs invert_, outlineStyle, outlineOffset\n\n\n------------------------------------------------------\n\n\n# Overflow and resizing\n\n@docs overflow, overflow2\n@docs overflowX, overflowY, overflowBlock, overflowInline\n@docs overflowWrap, overflowAnchor\n@docs breakWord, anywhere\n@docs resize, horizontal, vertical\n\n\n------------------------------------------------------\n\n\n# Flex\n\nThe CSS Flexible Box Layout Module.\nSee this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).\n\n## Basics\n\n@docs flex, flex2, flex3\n@docs flexBasis\n@docs flexGrow\n@docs flexShrink\n\n## Layout dynamics\n\n@docs flexDirection\n@docs flexWrap\n@docs flexFlow, flexFlow2\n\n## Alignment\n\nOther values you can use for flex item alignment:\n\n - [`left_`](#left_)\n - [`right_`](#right_)\n - [`top_`](#top_)\n - [`bottom_`](#bottom_)\n - [`start`](#start)\n - [`end`](#end)\n - [`center`](#center)\n - [`stretch`](#stretch)\n - [`baseline`](#baseline)\n\n@docs alignContent, alignContent2\n@docs alignItems, alignItems2\n@docs alignSelf, alignSelf2\n\n## Justify\n\n@docs justifyContent, justifyContent2\n@docs justifyItems, justifyItems2\n@docs justifySelf, justifySelf2\n\n## Place\n\n@docs placeContent, placeContent2\n@docs placeItems, placeItems2\n@docs placeSelf, placeSelf2\n\n## Order\n\n@docs order\n\n## Flex value keywords\n\n@docs row, rowReverse, columnReverse\n@docs flexStart, flexEnd, selfStart, selfEnd\n@docs spaceBetween, spaceAround, spaceEvenly\n@docs firstBaseline, lastBaseline\n@docs safe, unsafe\n@docs legacy, legacyLeft, legacyRight, legacyCenter\n@docs wrap, wrapReverse, breakSpaces\n\n\n------------------------------------------------------\n\n\n# Grid\n\n## Types\n@docs FixedSizeSupported\n@docs TrackBreadthSupported\n@docs TrackSizeSupported, TrackSize\n \n## Grid auto\n@docs gridAutoRows, gridAutoRowsMany\n@docs gridAutoColumns, gridAutoColumnsMany\n@docs gridAutoFlow, gridAutoFlow2\n\n## Grid areas\n@docs GridLine, gridLineIdent, gridLineSpanNum, gridLineSpanIdent\n@docs gridArea, gridArea2, gridArea3, gridArea4\n@docs gridRow, gridRow2\n@docs gridRowStart, gridRowEnd\n@docs gridColumn, gridColumn2\n@docs gridColumnStart, gridColumnEnd\n\n## Grid templates\n@docs gridTemplate\n@docs gridTemplateAreas, gridTemplateAreasCells\n@docs gridTemplateRows\n@docs gridTemplateColumns\n@docs templateRowsColumns, templateAreasRowsColumns\n@docs templateAreaRow, templateColumns\n@docs trackList, autoTrackList\n@docs fixedRepeat, autoRepeat\n@docs autoFill, autoFit, lineNames\n@docs dense\n\n\n------------------------------------------------------\n\n\n# Gap\n\n@docs gap, gap2, rowGap, columnGap\n\n\n------------------------------------------------------\n\n\n# Background\n\n@docs backgroundColor\n@docs backgroundAttachment, backgroundAttachmentMany\n@docs local\n@docs backgroundBlendMode, backgroundBlendModeMany\n@docs multiply, screen, overlay, darken, lighten, colorDodge, colorBurn, hardLight, softLight, difference, exclusion, hue, saturation, color_, luminosity\n@docs backgroundClip, backgroundClipMany\n@docs backgroundOrigin, backgroundOriginMany\n@docs backgroundImage, backgroundImageMany\n@docs backgroundPosition, backgroundPosition2, backgroundPosition3, backgroundPosition4\n@docs backgroundRepeat, backgroundRepeat2\n@docs backgroundSize, backgroundSize2\n\n\n------------------------------------------------------\n\n\n# Basic typographic options\n\n## Sizing\n\n@docs fontSize\n@docs xxSmall, xSmall, small, medium, large, xLarge, xxLarge, xxxLarge, smaller, larger\n@docs fontSizeAdjust\n\n## @font-face\n\n@docs fontDisplay, fallback, swap, optional\n\n## Font family\n\n@docs fontFamily, fontFamilyMany\n@docs serif, sansSerif, monospace, cursive, fantasy\n@docs systemUi, uiSerif, uiSansSerif, uiMonospace, uiRounded\n@docs math, fangsong\n\n\n## Font color, style, weight & stretch\n\n@docs color\n@docs fontStyle, italic, oblique\n@docs fontWeight, bold, lighter, bolder\n@docs fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, semiExpanded, expanded, extraExpanded, ultraExpanded\n \n## Missing typeface synthesis\n\n@docs fontSynthesis, fontSynthesis2, fontSynthesis3\n@docs weight\n\n## Variable fonts (not to be confused with font variants)\n\n@docs fontVariationSettings, fontVariationSettingsMany\n\n\n------------------------------------------------------\n\n\n# Typographic features\n\n## OpenType typographic features\n\n@docs fontFeatureSettings, fontFeatureSettingsMany\n@docs featureTag, featureTag2\n\n## Font Variants\n\n@docs AllFontVariantsSupported, AllFontVariants\n@docs fontVariant, fontVariant2\n\n### Alternative capitals\n\n@docs FontVariantCapsSupported\n@docs fontVariantCaps\n@docs smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps\n\n### East Asian glyph variants\n\n@docs FontVariantEastAsianSupported, FontVariantEastAsian\n@docs fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3\n@docs jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth\n\n### Ligatures & contextual forms\n\n@docs FontVariantLigaturesSupported\n@docs fontVariantLigatures\n@docs commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual\n \n### Numerical variants\n\n@docs FontVariantNumericSupported, FontVariantNumeric\n@docs fontVariantNumeric, fontVariantNumeric4\n@docs ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions\n \n### Emoji variants\n\n@docs FontVariantEmojiSupported\n@docs fontVariantEmoji, emoji, unicode\n\n### Superscript & subscript\n\n@docs FontVariantPositionSupported\n@docs fontVariantPosition\n\n## Other typographic properties\n\n### Kerning\n\n@docs fontKerning\n\n### Language override\n\n@docs fontLanguageOverride\n\n### Optical sizing\n\n@docs fontOpticalSizing\n\n------------------------------------------------------\n\n\n# Typographic metrics\n\n@docs lineHeight\n@docs letterSpacing\n@docs textIndent, textIndent2, textIndent3\n@docs hanging, eachLine\n@docs wordSpacing\n@docs tabSize\n\n\n------------------------------------------------------\n\n\n# Text wrapping, overflow and newlines\n\n@docs wordBreak, breakAll, keepAll\n@docs lineBreak, loose\n@docs whiteSpace, pre, preWrap, preLine\n@docs textOverflow, textOverflow2, ellipsis\n@docs hyphens, manual\n@docs hangingPunctuation, hangingPunctuation2, hangingPunctuation3\n@docs first_, last, forceEnd, allowEnd\n\n\n------------------------------------------------------\n\n\n# Text decoration and transform\n\n@docs textDecoration, textDecoration2, textDecoration3\n@docs textDecorationLine, textDecorationLine2, textDecorationLine3\n@docs textDecorationStyle\n@docs wavy, underline, overline, lineThrough\n@docs textDecorationColor, transparent\n@docs textDecorationThickness, fromFont\n@docs textDecorationSkipInk\n@docs textUnderlinePosition, textUnderlinePosition2\n@docs textUnderlineOffset\n@docs textEmphasis, textEmphasis2, textEmphasis3\n@docs textEmphasisStyle, textEmphasisStyle2\n@docs textEmphasisColor\n@docs textEmphasisPosition, textEmphasisPosition2\n@docs filled, open, dot, doubleCircle, triangle, sesame, over\n@docs textTransform\n@docs capitalize, uppercase, lowercase, fullSizeKana\n\n\n------------------------------------------------------\n\n\n# Text alignment and justification\n\n@docs textAlign, justify\n@docs textJustify, interWord, interCharacter\n\n\n------------------------------------------------------\n\n\n# Script handling\n\n@docs direction, ltr, rtl\n@docs writingMode, verticalLr, verticalRl, horizontalTb\n@docs unicodeBidi, embed, plaintext, bidiOverride, isolateOverride\n@docs textOrientation\n@docs mixed, sideways, sidewaysRight, upright, useGlyphOrientation\n@docs quotes, quotes2, quotes4\n\n\n------------------------------------------------------\n\n\n# Text rendering\n\n@docs textRendering\n@docs geometricPrecision, optimizeLegibility, optimizeSpeed\n\n\n------------------------------------------------------\n\n\n# Text selection\n\n@docs userSelect\n\n\n------------------------------------------------------\n\n\n# Accessibility\n\n@docs speak, spellOut\n\n\n------------------------------------------------------\n\n\n# List styles\n\n@docs ListStyleType, ListStyleTypeSupported\n@docs listStyle, listStyle2, listStyle3, listStylePosition, inside, outside\n@docs listStyleType\n@docs listStyleImage\n@docs arabicIndic, armenian, bengali, cambodian, cjkDecimal, cjkEarthlyBranch, cjkHeavenlyStem, cjkIdeographic, decimal, decimalLeadingZero, devanagari, disclosureClosed, disclosureOpen, disc, ethiopicNumeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiraganaIroha, japaneseFormal, japaneseInformal, kannada, katakana, katakanaIroha, khmer, koreanHangulFormal, koreanHanjaFormal, koreanHanjaInformal, lao, lowerAlpha, lowerArmenian, lowerGreek, lowerLatin, lowerRoman, malayalam, monogolian, myanmar, oriya, persian, simpChineseFormal, simpChineseInformal, tamil, telugu, thai, tibetan, tradChineseFormal, tradChineseInformal, upperAlpha, upperArmenian, upperLatin, upperRoman\n\n\n------------------------------------------------------\n\n\n# Columns\n\n@docs columns, columns2\n@docs columnWidth\n@docs columnCount\n@docs columnFill\n@docs balance, balanceAll\n@docs columnSpan\n@docs columnRule, columnRule2, columnRule3\n@docs columnRuleWidth\n@docs columnRuleStyle\n@docs columnRuleColor\n\n\n------------------------------------------------------\n\n\n# Tables\n\n@docs borderCollapse\n@docs collapse, separate\n@docs borderSpacing, borderSpacing2\n@docs captionSide\n@docs emptyCells\n@docs show, hide\n@docs tableLayout\n\n\n------------------------------------------------------\n\n\n# Content fragmentation\n\n@docs breakBefore, breakAfter, breakInside\n@docs avoid, avoidPage, avoidColumn, page\n@docs pageBreakBefore, pageBreakAfter, pageBreakInside\n@docs orphans, widows\n@docs boxDecorationBreak\n\n\n------------------------------------------------------\n\n\n# Arranging inline/block stuff\n\n@docs float\n@docs clear\n@docs verticalAlign\n@docs textTop, textBottom, middle\n\n\n------------------------------------------------------\n\n\n# Replaced elements\n\n@docs objectFit\n@docs scaleDown\n@docs objectPosition, objectPosition2, objectPosition4\n\n\n------------------------------------------------------\n\n\n# Pointer and touch\n\n## Pointer events\n\n@docs pointerEvents\n@docs visiblePainted, visibleFill, visibleStroke, painted\n\n## Touch action\n\n@docs touchAction\n@docs panX, panY\n@docs pinchZoom, manipulation\n\n\n------------------------------------------------------\n\n\n# Scrollbar customisation\n\n@docs scrollbarColor, scrollbarWidth\n@docs scrollbarGutter, scrollbarGutter2, stable, bothEdges\n\n\n------------------------------------------------------\n\n\n# Scrolling behavior\n\n@docs scrollBehavior, smooth\n@docs overscrollBehavior, overscrollBehavior2\n@docs overscrollBehaviorX, overscrollBehaviorY\n@docs overscrollBehaviorBlock, overscrollBehaviorInline\n\n\n------------------------------------------------------\n\n\n# Scroll snapping\n\n@docs scrollSnapType, scrollSnapType2\n@docs scrollSnapAlign\n@docs scrollSnapStop\n@docs mandatory, proximity\n\n### Margin\n\n@docs scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4\n@docs scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom\n@docs scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2\n@docs scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd\n\n### Padding\n\n@docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4\n@docs scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom\n@docs scrollPaddingBlock, scrollPaddingBlock2, scrollPaddingInline, scrollPaddingInline2\n@docs scrollPaddingBlockStart, scrollPaddingBlockEnd, scrollPaddingInlineStart, scrollPaddingInlineEnd\n\n\n------------------------------------------------------\n\n\n# Cursors\n\n@docs CursorKeyword\n@docs cursor, cursor2, cursor4\n\n## Cursor values\n\n[`text`](#text) is also a supported value for `cursor`.\n\n@docs pointer, default_, contextMenu, help, progress, wait, cell\n@docs crosshair, verticalText, alias, copy, move, noDrop\n@docs notAllowed, allScroll, colResize, rowResize, nResize, eResize, sResize\n@docs wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize\n@docs neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing\n\n## Caret color\n\n@docs caretColor\n\n\n------------------------------------------------------\n\n\n# Gradients\n\n@docs linearGradient, linearGradient2\n@docs stop, stop2, stop3, toBottom, toBottomLeft, toBottomRight, toLeft, toRight, toTop, toTopLeft, toTopRight\n\n\n------------------------------------------------------\n\n\n# Shadows\n\n@docs BoxShadowConfig\n@docs boxShadow, boxShadowMany, defaultBoxShadow\n@docs TextShadowConfig\n@docs textShadow, textShadowMany, defaultTextShadow\n\n\n------------------------------------------------------\n\n\n# Transformation\n\n@docs TransformFunction, TransformFunctionSupported\n@docs transform, transformMany\n@docs transformOrigin, transformOrigin2, transformOrigin3\n@docs transformBox, transformStyle\n@docs flat, preserve3d\n\n## Matrix transformation\n\n@docs matrix, matrix3d\n\n## Scaling (resizing)\n\n@docs scale, scale2, scale3, scale_, scale2_, scaleX, scaleY, scaleZ, scale3d\n\n## Rotation\n\n@docs rotate, rotate2, rotate4, rotate_, rotateX, rotateY, rotateZ, rotate3d\n\n## Skewing (distortion)\n\n@docs skew, skew2, skewX, skewY\n\n## Translation (moving)\n\n@docs translate, translate2, translateX, translateY, translateZ, translate3d\n\n## Perspective\n\n@docs perspective, perspectiveOrigin, perspectiveOrigin2\n@docs perspective_\n\n## 3D Rendering options\n\n@docs backfaceVisibility\n\n\n------------------------------------------------------\n\n\n# Animation\n\n@docs animationName, animationNameMany\n@docs animationDuration, animationDurationMany\n@docs animationTimingFunction, animationTimingFunctionMany\n@docs animationIterationCount, animationIterationCountMany\n@docs animationDirection, animationDirectionMany\n@docs animationPlayState, animationPlayStateMany\n@docs animationDelay, animationDelayMany\n@docs animationFillMode, animationFillModeMany\n@docs EasingFunction, EasingFunctionSupported\n@docs linear, ease, easeIn, easeOut, easeInOut, cubicBezier, stepStart, stepEnd, steps, steps2, jumpStart, jumpEnd, jumpNone, jumpBoth, infinite, reverse, alternate, alternateReverse, running, paused, forwards, backwards\n\n\n------------------------------------------------------\n\n\n# Visual stuff\n\n@docs opacity\n@docs visibility\n@docs mixBlendMode\n@docs imageRendering\n@docs crispEdges, pixelated\n@docs clipPath, clipPath2\n\n\n------------------------------------------------------\n\n\n## Masks\n\n@docs maskBorderMode\n@docs maskBorderRepeat, maskBorderRepeat2\n@docs maskBorderOutset, maskBorderOutset2, maskBorderOutset3, maskBorderOutset4\n@docs maskBorderSlice, maskBorderSlice2, maskBorderSlice3, maskBorderSlice4\n@docs maskBorderWidth, maskBorderWidth2, maskBorderWidth3, maskBorderWidth4\n@docs maskClip, maskClipMany\n@docs maskComposite\n@docs maskMode, maskModeMany\n@docs maskOrigin, maskOriginMany\n@docs maskPosition\n@docs maskRepeat, maskRepeat2\n@docs maskSize, maskSize2\n@docs maskType\n@docs noClip, add, subtract, intersect, exclude, alpha, luminance, matchSource\n\n\n------------------------------------------------------\n\n\n## Filters\n@docs filter, filterMany\n@docs backdropFilter, backdropFilterMany\n\n\n------------------------------------------------------\n\n\n## Rendering\n\n@docs paintOrder, paintOrder2, paintOrder3, markers\n\n\n------------------------------------------------------\n\n\n# Using a printer\n\n@docs bleed\n\n\n------------------------------------------------------\n\n\n# SVG attributes that can be used as CSS presentation properties.\n\n@docs fill\n@docs strokeDasharray\n@docs strokeDashoffset\n@docs strokeWidth\n@docs strokeAlign\n@docs strokeColor\n@docs strokeImage\n@docs strokeMiterlimit\n@docs strokeOpacity\n@docs strokePosition, strokePosition2, strokePosition4\n@docs strokeRepeat, strokeRepeat2\n@docs strokeSize, strokeSize2\n@docs strokeDashCorner\n@docs strokeLinecap, butt, square\n@docs strokeBreak, boundingBox, slice, clone\n@docs strokeOrigin\n@docs strokeLinejoin, strokeLinejoin2, crop, arcs, miter, bevel\n@docs strokeDashJustify, compress, dashes, gaps\n\n\n------------------------------------------------------\n\n\n# WebKit stuff that's standardised for legacy support\n\n@docs lineClamp\n\n\n\n","unions":[{"name":"CalcOperation","comment":" Either [`plus`](#plus) or [`minus`](#minus).\n\nSee [`calc`](#calc) for how to use this.\n\n","args":[],"cases":[]}],"aliases":[{"name":"AllFontVariants","comment":" A type that encapsulates all special font variant keywords.\n","args":[],"type":"Css.AllFontVariantsSupported {}"},{"name":"AllFontVariantsSupported","comment":" A type that encapsulates all special font variant keywords plus additional types.\n","args":["supported"],"type":"Css.FontVariantCapsSupported (Css.FontVariantEastAsianSupported (Css.FontVariantLigaturesSupported (Css.FontVariantNumericSupported (Css.FontVariantEmojiSupported (Css.FontVariantPositionSupported supported)))))"},{"name":"Angle","comment":" A type alias used to accept an [angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle).\n","args":[],"type":"Css.AngleSupported {}"},{"name":"AngleSupported","comment":" A type alias used to accept an [angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)\namong other values.\n","args":["supported"],"type":"{ supported | deg : Css.Value.Supported, grad : Css.Value.Supported, rad : Css.Value.Supported, turn : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported }"},{"name":"BaseValue","comment":" A type that is used in properties for CSS wide values.\nSee [CSS-wide values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#css-wide_values).\n","args":["supported"],"type":"Css.Value.Value { supported | initial : Css.Value.Supported, inherit : Css.Value.Supported, unset : Css.Value.Supported, revert : Css.Value.Supported }"},{"name":"BasicShape","comment":" A type alias used to accept a [basic shape](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape).\n","args":[],"type":"Css.BasicShapeSupported {}"},{"name":"BasicShapeSupported","comment":" A type alias used to accept a [basic shape](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape)\namong other values.\n","args":["supported"],"type":"{ supported | insetRect : Css.Value.Supported, insetRect2 : Css.Value.Supported, insetRect3 : Css.Value.Supported, insetRect4 : Css.Value.Supported, circle : Css.Value.Supported, circleAt : Css.Value.Supported, circleAt2 : Css.Value.Supported, ellipse : Css.Value.Supported, ellipseAt : Css.Value.Supported, ellipseAt2 : Css.Value.Supported, polygon : Css.Value.Supported, path : Css.Value.Supported }"},{"name":"BlendMode","comment":" A type alias used to accept a [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode).\n","args":[],"type":"Css.BlendModeSupported {}"},{"name":"BlendModeSupported","comment":" A type alias used to accept a [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode)\namong other values.\n","args":["supported"],"type":"{ supported | normal : Css.Value.Supported, multiply : Css.Value.Supported, screen : Css.Value.Supported, overlay : Css.Value.Supported, darken : Css.Value.Supported, lighten : Css.Value.Supported, colorDodge : Css.Value.Supported, colorBurn : Css.Value.Supported, hardLight : Css.Value.Supported, softLight : Css.Value.Supported, difference : Css.Value.Supported, exclusion : Css.Value.Supported, hue : Css.Value.Supported, saturation : Css.Value.Supported, color_ : Css.Value.Supported, luminosity : Css.Value.Supported }"},{"name":"BoxShadowConfig","comment":" Configuration for [`boxShadow`](#boxShadow).\n","args":[],"type":"{ offsetX : Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }), offsetY : Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }), blurRadius : Maybe.Maybe (Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported })), spreadRadius : Maybe.Maybe (Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported })), color : Maybe.Maybe (Css.Value.Value Css.Color), inset : Basics.Bool }"},{"name":"Color","comment":" A type alias used to accept a [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color).\n","args":[],"type":"Css.ColorSupported {}"},{"name":"ColorSupported","comment":" A type alias used to accept a [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\namong other values.\n","args":["supported"],"type":"{ supported | rgb : Css.Value.Supported, rgba : Css.Value.Supported, hsl : Css.Value.Supported, hsla : Css.Value.Supported, hex : Css.Value.Supported, currentcolor : Css.Value.Supported }"},{"name":"CursorKeyword","comment":" A type alias used for the various [`cursor`](#cursor) properties\n","args":[],"type":"{ pointer : Css.Value.Supported, auto : Css.Value.Supported, default_ : Css.Value.Supported, none : Css.Value.Supported, contextMenu : Css.Value.Supported, help : Css.Value.Supported, progress : Css.Value.Supported, wait : Css.Value.Supported, cell : Css.Value.Supported, crosshair : Css.Value.Supported, text : Css.Value.Supported, verticalText : Css.Value.Supported, alias : Css.Value.Supported, copy : Css.Value.Supported, move : Css.Value.Supported, noDrop : Css.Value.Supported, notAllowed : Css.Value.Supported, allScroll : Css.Value.Supported, colResize : Css.Value.Supported, rowResize : Css.Value.Supported, nResize : Css.Value.Supported, eResize : Css.Value.Supported, sResize : Css.Value.Supported, wResize : Css.Value.Supported, neResize : Css.Value.Supported, nwResize : Css.Value.Supported, seResize : Css.Value.Supported, swResize : Css.Value.Supported, ewResize : Css.Value.Supported, nsResize : Css.Value.Supported, neswResize : Css.Value.Supported, nwseResize : Css.Value.Supported, zoomIn : Css.Value.Supported, zoomOut : Css.Value.Supported, grab : Css.Value.Supported, grabbing : Css.Value.Supported }"},{"name":"EasingFunction","comment":" A type alias used to accept an [easing-function](https://www.w3.org/TR/css-easing-1/#typedef-easing-function).\n","args":[],"type":"Css.EasingFunctionSupported {}"},{"name":"EasingFunctionSupported","comment":" A type alias used to accept an [easing-function](https://www.w3.org/TR/css-easing-1/#typedef-easing-function)\namong other values.\n","args":["supported"],"type":"{ supported | linear : Css.Value.Supported, ease : Css.Value.Supported, easeIn : Css.Value.Supported, easeOut : Css.Value.Supported, easeInOut : Css.Value.Supported, cubicBezier : Css.Value.Supported, stepStart : Css.Value.Supported, stepEnd : Css.Value.Supported, steps : Css.Value.Supported }"},{"name":"FilterFunction","comment":" A type alias used to accept a [filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function).\n","args":[],"type":"Css.FilterFunctionSupported {}"},{"name":"FilterFunctionSupported","comment":" A type alias used to accept a [filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function),\namong other values.\n","args":["supported"],"type":"{ supported | blur : Css.Value.Supported, brightness : Css.Value.Supported, contrast : Css.Value.Supported, dropShadow : Css.Value.Supported, grayscale : Css.Value.Supported, hueRotate : Css.Value.Supported, invert : Css.Value.Supported, opacity_ : Css.Value.Supported, saturate : Css.Value.Supported, sepia : Css.Value.Supported }"},{"name":"FixedSizeSupported","comment":" Extensible type representing the possibilities of the\n`` type used in grids.\n","args":["supported"],"type":"Css.TrackBreadthSupported { supported | minmax : Css.Value.Supported, fitContent : Css.Value.Supported }"},{"name":"FontVariantCapsSupported","comment":" A type that encapsulates all caps font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | smallCaps : Css.Value.Supported, allSmallCaps : Css.Value.Supported, petiteCaps : Css.Value.Supported, allPetiteCaps : Css.Value.Supported, unicase : Css.Value.Supported, titlingCaps : Css.Value.Supported }"},{"name":"FontVariantEastAsian","comment":" A type that encapsulates all east asian font variant keywords.\n","args":[],"type":"Css.FontVariantEastAsianSupported {}"},{"name":"FontVariantEastAsianSupported","comment":" A type that encapsulates all east asian font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | ruby : Css.Value.Supported, jis78 : Css.Value.Supported, jis83 : Css.Value.Supported, jis90 : Css.Value.Supported, jis04 : Css.Value.Supported, simplified : Css.Value.Supported, traditional : Css.Value.Supported, fullWidth : Css.Value.Supported, proportionalWidth : Css.Value.Supported }"},{"name":"FontVariantEmojiSupported","comment":" A type that encapsulates all emoji font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | text : Css.Value.Supported, emoji : Css.Value.Supported, unicode : Css.Value.Supported }"},{"name":"FontVariantLigaturesSupported","comment":" A type that encapsulates all ligature font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | commonLigatures : Css.Value.Supported, noCommonLigatures : Css.Value.Supported, discretionaryLigatures : Css.Value.Supported, noDiscretionaryLigatures : Css.Value.Supported, historicalLigatures : Css.Value.Supported, noHistoricalLigatures : Css.Value.Supported, contextual : Css.Value.Supported, noContextual : Css.Value.Supported }"},{"name":"FontVariantNumeric","comment":" A type that encapsulates all numeric font variant keywords.\n","args":[],"type":"Css.FontVariantNumericSupported {}"},{"name":"FontVariantNumericSupported","comment":" A type that encapsulates all numeric font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | ordinal : Css.Value.Supported, slashedZero : Css.Value.Supported, liningNums : Css.Value.Supported, oldstyleNums : Css.Value.Supported, proportionalNums : Css.Value.Supported, tabularNums : Css.Value.Supported, diagonalFractions : Css.Value.Supported, stackedFractions : Css.Value.Supported }"},{"name":"FontVariantPositionSupported","comment":" A type that encapsulates all position font variant keywords plus additional types.\n","args":["supported"],"type":"{ supported | sub : Css.Value.Supported, super : Css.Value.Supported }"},{"name":"GridLine","comment":" A type encapsulating the possibilities for defining a ``,\nwhich are the lines around the spaces in a CSS grid.\n","args":[],"type":"{ auto : Css.Value.Supported, num : Css.Value.Supported, gridLineIdent : Css.Value.Supported, gridLineSpanNum : Css.Value.Supported, gridLineSpanIdent : Css.Value.Supported }"},{"name":"Image","comment":" A type alias used to accept an [image](https://developer.mozilla.org/en-US/docs/Web/CSS/image).\n","args":[],"type":"Css.ImageSupported {}"},{"name":"ImageSupported","comment":" A type alias used to accept an [image](https://developer.mozilla.org/en-US/docs/Web/CSS/image)\namong other values.\n","args":["supported"],"type":"{ supported | url : Css.Value.Supported, linearGradient : Css.Value.Supported, radialGradient : Css.Value.Supported, repeatingLinearGradient : Css.Value.Supported, repeatingRadialGradient : Css.Value.Supported }"},{"name":"Length","comment":" A type alias used to accept a [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).\n","args":[],"type":"Css.LengthSupported {}"},{"name":"LengthSupported","comment":" A type alias used to accept a [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)\namong other values.\n","args":["supported"],"type":"{ supported | ch : Css.Value.Supported, em : Css.Value.Supported, ex : Css.Value.Supported, rem : Css.Value.Supported, vh : Css.Value.Supported, vw : Css.Value.Supported, vmin : Css.Value.Supported, vmax : Css.Value.Supported, px : Css.Value.Supported, cm : Css.Value.Supported, mm : Css.Value.Supported, inch : Css.Value.Supported, pc : Css.Value.Supported, pt : Css.Value.Supported, q : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported }"},{"name":"LineStyle","comment":" A type alias used to accept a [line-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#line-style).\nThis includes `hidden` as a possible value.\n","args":[],"type":"Css.LineStyleSupported { hidden : Css.Value.Supported }"},{"name":"LineStyleSupported","comment":" A type alias used to accept a [line-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#line-style)\n(without the `hidden`) value among other values.\n","args":["supported"],"type":"{ supported | none : Css.Value.Supported, dotted : Css.Value.Supported, dashed : Css.Value.Supported, solid : Css.Value.Supported, double : Css.Value.Supported, groove : Css.Value.Supported, ridge : Css.Value.Supported, inset_ : Css.Value.Supported, outset : Css.Value.Supported }"},{"name":"LineWidth","comment":" A type alias used to accept a [line-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width#line-width).\n","args":[],"type":"Css.LineWidthSupported {}"},{"name":"LineWidthSupported","comment":" A type alias used to accept a [line-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width#line-width)\namong other values.\n","args":["supported"],"type":"Css.LengthSupported { supported | thin : Css.Value.Supported, medium : Css.Value.Supported, thick : Css.Value.Supported }"},{"name":"ListStyleType","comment":" A type alias used to accept a [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)\n","args":[],"type":"Css.ListStyleTypeSupported {}"},{"name":"ListStyleTypeSupported","comment":" A type alias used to accept a [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)\namong other values.\n\n**Note:** The [`symbols()`](https://developer.mozilla.org/en-US/docs/Web/CSS/symbols()) function is not supported.\nUse [`property`](#property) instead.\n\n","args":["supported"],"type":"{ supported | customIdent : Css.Value.Supported, string : Css.Value.Supported, none : Css.Value.Supported, arabicIndic : Css.Value.Supported, armenian : Css.Value.Supported, bengali : Css.Value.Supported, cambodian : Css.Value.Supported, circle_ : Css.Value.Supported, cjkDecimal : Css.Value.Supported, cjkEarthlyBranch : Css.Value.Supported, cjkHeavenlyStem : Css.Value.Supported, cjkIdeographic : Css.Value.Supported, decimal : Css.Value.Supported, decimalLeadingZero : Css.Value.Supported, devanagari : Css.Value.Supported, disc : Css.Value.Supported, disclosureClosed : Css.Value.Supported, disclosureOpen : Css.Value.Supported, ethiopicNumeric : Css.Value.Supported, georgian : Css.Value.Supported, gujarati : Css.Value.Supported, gurmukhi : Css.Value.Supported, hebrew : Css.Value.Supported, hiragana : Css.Value.Supported, hiraganaIroha : Css.Value.Supported, japaneseFormal : Css.Value.Supported, japaneseInformal : Css.Value.Supported, kannada : Css.Value.Supported, katakana : Css.Value.Supported, katakanaIroha : Css.Value.Supported, khmer : Css.Value.Supported, koreanHangulFormal : Css.Value.Supported, koreanHanjaFormal : Css.Value.Supported, koreanHanjaInformal : Css.Value.Supported, lao : Css.Value.Supported, lowerAlpha : Css.Value.Supported, lowerArmenian : Css.Value.Supported, lowerGreek : Css.Value.Supported, lowerLatin : Css.Value.Supported, lowerRoman : Css.Value.Supported, malayalam : Css.Value.Supported, monogolian : Css.Value.Supported, myanmar : Css.Value.Supported, oriya : Css.Value.Supported, persian : Css.Value.Supported, simpChineseFormal : Css.Value.Supported, simpChineseInformal : Css.Value.Supported, square : Css.Value.Supported, tamil : Css.Value.Supported, telugu : Css.Value.Supported, thai : Css.Value.Supported, tibetan : Css.Value.Supported, tradChineseFormal : Css.Value.Supported, tradChineseInformal : Css.Value.Supported, upperAlpha : Css.Value.Supported, upperArmenian : Css.Value.Supported, upperLatin : Css.Value.Supported, upperRoman : Css.Value.Supported }"},{"name":"Style","comment":" A CSS property (such as `color`), or multiple properties grouped into one.\n\n invisible : Style\n invisible =\n display none\n\nThis corresponds to the CSS `display: none`.\n\n boldAndUnderlineOnHover : Style\n boldAndUnderlineOnHover =\n hover [ textDecoration underline, fontWeight bold ]\n\nThis (roughly) corresponds to the CSS `:hover { text-decoration: underline; font-weight: bold; }`.\n\nYou can use `Style` values to reuse styles (like [mixins](http://sass-lang.com/guide#topic-6)\nin other CSS systems). [`batch`](#batch) comes in handy for this!\n\n","args":[],"type":"Css.Preprocess.Style"},{"name":"TextShadowConfig","comment":" Configuration for [`textShadow`](#textShadow).\n","args":[],"type":"{ offsetX : Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }), offsetY : Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }), blurRadius : Maybe.Maybe (Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported })), color : Maybe.Maybe (Css.Value.Value Css.Color) }"},{"name":"Time","comment":" A type alias used to accept an [time](https://developer.mozilla.org/en-US/docs/Web/CSS/time).\n","args":[],"type":"Css.TimeSupported {}"},{"name":"TimeSupported","comment":" A type alias used to accept an [time](https://developer.mozilla.org/en-US/docs/Web/CSS/time)\namong other values.\n","args":["supported"],"type":"{ supported | s : Css.Value.Supported, ms : Css.Value.Supported }"},{"name":"TrackBreadthSupported","comment":" Extensible type representing the possibilities of the \n`` type used in grids.\n","args":["supported"],"type":"Css.LengthSupported { supported | pct : Css.Value.Supported, fr : Css.Value.Supported, auto : Css.Value.Supported, minContent : Css.Value.Supported, maxContent : Css.Value.Supported }"},{"name":"TrackSize","comment":" Type representing the possibilities of the \n`` type used in grids.\n","args":[],"type":"Css.TrackSizeSupported {}"},{"name":"TrackSizeSupported","comment":" Extensible type representing the possibilities of the \n`` type used in grids.\n","args":["supported"],"type":"Css.TrackBreadthSupported { supported | minmax : Css.Value.Supported, fitContentTo : Css.Value.Supported }"},{"name":"TransformFunction","comment":" A type alias used to accept a [transform-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function).\n","args":[],"type":"Css.TransformFunctionSupported {}"},{"name":"TransformFunctionSupported","comment":" A type alias used to accept a [transform-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)\namong other values.\n","args":["supported"],"type":"{ supported | matrix : Css.Value.Supported, matrix3d : Css.Value.Supported, translate : Css.Value.Supported, translate2 : Css.Value.Supported, translateX : Css.Value.Supported, translateY : Css.Value.Supported, translateZ : Css.Value.Supported, translate3d : Css.Value.Supported, scale_ : Css.Value.Supported, scale2_ : Css.Value.Supported, scaleX : Css.Value.Supported, scaleY : Css.Value.Supported, scaleZ : Css.Value.Supported, scale3d : Css.Value.Supported, skew : Css.Value.Supported, skew2 : Css.Value.Supported, skewX : Css.Value.Supported, skewY : Css.Value.Supported, rotate_ : Css.Value.Supported, rotateX : Css.Value.Supported, rotateY : Css.Value.Supported, rotateZ : Css.Value.Supported, rotate3d : Css.Value.Supported, perspective_ : Css.Value.Supported }"},{"name":"Width","comment":" A type alias used to accept a ['width'](https://developer.mozilla.org/en-US/docs/Web/CSS/width#values).\n","args":[],"type":"Css.WidthSupported {}"},{"name":"WidthSupported","comment":" A type alias used to accept a ['width'](https://developer.mozilla.org/en-US/docs/Web/CSS/width#values)\namong other values.\n","args":["supported"],"type":"Css.LengthSupported { supported | auto : Css.Value.Supported, pct : Css.Value.Supported, minContent : Css.Value.Supported, maxContent : Css.Value.Supported, fitContent : Css.Value.Supported }"}],"values":[{"name":"absolute","comment":" An [`absolute` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative).\n\n position absolute\n\nThe default `position` value is [`static`](#static). See also [`position: sticky`](#sticky), and [the differences between absolute, relative, and fixed positioning](\n\n","type":"Css.Value.Value { provides | absolute : Css.Value.Supported }"},{"name":"active","comment":" An [`:active`](https://css-tricks.com/almanac/selectors/a/active/)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n button [ active [ color (rgb 12 160 190) ] ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"add","comment":" Sets `add` value for usage with [`maskComposite`](#maskComposite).\n\n maskComposite add\n\n","type":"Css.Value.Value { provides | add : Css.Value.Supported }"},{"name":"after","comment":" An [`::after`](https://css-tricks.com/almanac/selectors/a/after-and-before/)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n div [ after [ content \"hi!\" ] ]\n\n--TODO : Introduce a way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`.\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"alias","comment":" The `alias` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | alias : Css.Value.Supported }"},{"name":"alignContent","comment":" Sets [`align-content`](https://css-tricks.com/almanac/properties/a/align-content/).\n\n alignContent flexStart\n\n**Note:** This property has no effect when the flexbox has only a single line.\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, spaceBetween : Css.Value.Supported, spaceAround : Css.Value.Supported, spaceEvenly : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported } -> Css.Style"},{"name":"alignContent2","comment":" Sets [`align-content`](https://css-tricks.com/almanac/properties/a/align-content/).\n\n alignContent2 unsafe start\n\n**Note:** This property has no effect when the flexbox has only a single line.\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported } -> Css.Style"},{"name":"alignItems","comment":" Sets [`align-items`](https://css-tricks.com/almanac/properties/a/align-items/).\n\n alignItems firstBaseline\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported } -> Css.Style"},{"name":"alignItems2","comment":" Sets [`align-items`](https://css-tricks.com/almanac/properties/a/align-items/).\n\n alignItems2 unsafe selfStart\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported } -> Css.Style"},{"name":"alignSelf","comment":" Sets [`align-self`](https://css-tricks.com/almanac/properties/a/align-self/).\n\n alignSelf firstBaseline\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported } -> Css.Style"},{"name":"alignSelf2","comment":" Sets [`align-self`](https://css-tricks.com/almanac/properties/a/align-self/).\n\n alignSelf2 unsafe flexStart\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported } -> Css.Style"},{"name":"all","comment":" Sets an [`all`](https://css-tricks.com/almanac/properties/a/all/) property.\n\n all inherit\n\n","type":"Css.BaseValue a -> Css.Style"},{"name":"allPetiteCaps","comment":" The `all-petite-caps` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values).\n\n fontVariantCaps allPetiteCaps\n\n","type":"Css.Value.Value { provides | allPetiteCaps : Css.Value.Supported }"},{"name":"allScroll","comment":" The `all-scroll` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | allScroll : Css.Value.Supported }"},{"name":"allSmallCaps","comment":" The `all-small-caps` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values).\n\n fontVariantCaps allSmallCaps\n\n","type":"Css.Value.Value { provides | allSmallCaps : Css.Value.Supported }"},{"name":"all_","comment":" The `all` value used in properties such as [`columnSpan`](#columnSpan)\nand [`pointerEvents`](#pointerEvents).\n\n columnSpan all_\n\n pointerEvents all_\n\nThis value function has an underscore because [`all` is already a property function](#all).\n\n","type":"Css.Value.Value { provides | all_ : Css.Value.Supported }"},{"name":"allowEnd","comment":" Sets `allow-end` value for usage with [`hangingPunctuation`](#hangingPunctuation).\n\n hangingPunctuation allowEnd\n\n","type":"Css.Value.Value { provides | allowEnd : Css.Value.Supported }"},{"name":"alpha","comment":" Sets `alpha` value for usage with [`maskMode`](#maskMode), [`maskType`](#maskType) and [`maskBorderMode`](#maskBorderMode).\n\n maskMode alpha\n\n maskType alpha\n\n maskBorderMode alpha\n\n","type":"Css.Value.Value { provides | alpha : Css.Value.Supported }"},{"name":"alternate","comment":" The `alternate` value used for functions like [`animationDirection`](#animationDirection)\n\n animationDirection alternate\n\n","type":"Css.Value.Value { provides | alternate : Css.Value.Supported }"},{"name":"alternateReverse","comment":" The `alternate-reverse` value used for functions like [`animationDirection`](#animationDirection)\n\n animationDirection alternateReverse\n\n","type":"Css.Value.Value { provides | alternateReverse : Css.Value.Supported }"},{"name":"always","comment":" Sets `always` value for usage with [`scrollSnapStop`](#scrollSnapStop), [`pageBreakBefore`](#pageBreakBefore), and [`pageBreakAfter`](#pageBreakAfter).\n\n scrollSnapStop always\n\n pageBreakBefore always\n\n pageBreakAfter always\n\n","type":"Css.Value.Value { provides | always : Css.Value.Supported }"},{"name":"animationDelay","comment":" The [`animation-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) property.\n\n animationDelay (s 1)\n\n","type":"Css.BaseValue Css.Time -> Css.Style"},{"name":"animationDelayMany","comment":" The [`animation-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationDelayMany (s 1) [ ms 300, s 4.5 ]\n\n animationDelayMany [] -- animation-delay: unset;\n","type":"List.List (Css.Value.Value Css.Time) -> Css.Style"},{"name":"animationDirection","comment":" The [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) property.\n\n animationDirection reverse\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, reverse : Css.Value.Supported, alternate : Css.Value.Supported, alternateReverse : Css.Value.Supported } -> Css.Style"},{"name":"animationDirectionMany","comment":" The [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationDirectionMany [ reverse, normal, alternate, alternateReverse ]\n\n animationDirectionMany [] -- animation-direction: unset;\n","type":"List.List (Css.Value.Value { normal : Css.Value.Supported, reverse : Css.Value.Supported, alternate : Css.Value.Supported, alternateReverse : Css.Value.Supported }) -> Css.Style"},{"name":"animationDuration","comment":" The [`animation-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) property.\n\n animationDuration (s 1)\n\n","type":"Css.BaseValue Css.Time -> Css.Style"},{"name":"animationDurationMany","comment":" The [`animation-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationDurationMany [ s 1, ms 300, s 4.5 ]\n\n animationDurationMany [] -- animation-duration: unset;\n\n","type":"List.List (Css.Value.Value Css.Time) -> Css.Style"},{"name":"animationFillMode","comment":" The [`animation-fill-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) property.\n\n animationFillMode forwards\n\n","type":"Css.BaseValue { none : Css.Value.Supported, forwards : Css.Value.Supported, backwards : Css.Value.Supported, both : Css.Value.Supported } -> Css.Style"},{"name":"animationFillModeMany","comment":" The [`animation-fill-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationFillModeMany [ forwards, none, both, backwards ]\n\n animationFillModeMany [] -- animation-fill-mode: unset;\n","type":"List.List (Css.Value.Value { none : Css.Value.Supported, forwards : Css.Value.Supported, backwards : Css.Value.Supported, both : Css.Value.Supported }) -> Css.Style"},{"name":"animationIterationCount","comment":" The [`animation-iteration-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) property.\n\n animationIterationCount (num 3.5)\n\n animationIterationCount infinite\n\n","type":"Css.BaseValue { infinite : Css.Value.Supported, num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Style"},{"name":"animationIterationCountMany","comment":" The [`animation-iteration-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationIterationCountMany [num 3.5, infinte, zero ]\n\n animationIterationCountMany [] -- animation-iteration-count: unset;\n","type":"List.List (Css.Value.Value { infinite : Css.Value.Supported, num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported }) -> Css.Style"},{"name":"animationName","comment":" The [`animation-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name) property.\n\n animationName (customIdent \"pulse\") []\n\n","type":"Css.BaseValue { none : Css.Value.Supported, string : Css.Value.Supported, customIdent : Css.Value.Supported } -> Css.Style"},{"name":"animationNameMany","comment":" The [`animation-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationNameMany [customIdent \"pulse\"]\n\n animationNameMany [] -- animation-name: unset;\n","type":"List.List (Css.Value.Value { none : Css.Value.Supported, string : Css.Value.Supported, customIdent : Css.Value.Supported }) -> Css.Style"},{"name":"animationPlayState","comment":" The [`animation-play-state`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) property.\n\n animationPlayState running\n\n","type":"Css.BaseValue { running : Css.Value.Supported, paused : Css.Value.Supported } -> Css.Style"},{"name":"animationPlayStateMany","comment":" The [`animation-play-state`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationPlayStateMany [ running, paused ]\n\n animationPlayStateMany [] -- animation-play-state: unset;\n","type":"List.List (Css.Value.Value { running : Css.Value.Supported, paused : Css.Value.Supported }) -> Css.Style"},{"name":"animationTimingFunction","comment":" The [`animation-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) property.\n\n animationTimingFunction linear\n\n","type":"Css.BaseValue Css.EasingFunction -> Css.Style"},{"name":"animationTimingFunctionMany","comment":" The [`animation-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) property.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n animationTimingFunctionMany linear [ cubicBezier 0.42 0 0.38 1, stepEnd ]\n\n animationTimingFunctionMany [] -- animation-timing-function: unset;\n","type":"List.List (Css.Value.Value Css.EasingFunction) -> Css.Style"},{"name":"anywhere","comment":" The `anywhere` value used by [`overflowWrap`](#overflowWrap) and [`lineBreak`](#lineBreak).\n\n overflowWrap anywhere\n\n lineBreak anywhere\n\n","type":"Css.Value.Value { provides | anywhere : Css.Value.Supported }"},{"name":"arabicIndic","comment":" The `arabic-indic` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType arabicIndic\n\n","type":"Css.Value.Value { provides | arabicIndic : Css.Value.Supported }"},{"name":"arcs","comment":" Sets `arcs` value for usage with [`strokeLinejoin`](#strokeLinejoin).\n\n strokeLinejoin arcs\n\n","type":"Css.Value.Value { provides | arcs : Css.Value.Supported }"},{"name":"armenian","comment":" The `armenian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType armenian\n\n","type":"Css.Value.Value { provides | armenian : Css.Value.Supported }"},{"name":"auto","comment":" The `auto` value used in many properties such as (but not limited to) [`width`](#width),\n[`zoom`](#zoom),\n[`outlineStyle`](#outlineStyle),\nand [`flexBasis`](#flexBasis).\n\n width auto\n\n zoom auto\n\n flexBasis auto\n\n","type":"Css.Value.Value { provides | auto : Css.Value.Supported }"},{"name":"autoFill","comment":" The `auto-fill` value [used in the `repeat()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#values).\n\n gridTemplateColumnsList\n [ minmax (px 210) maxContent\n , repeatedTracks autoFill [px 200]\n , pct 20\n ]\n\n(Note: due to a naming conflict, the `repeat()` function is\ncalled [`repeatedTracks`](#repeatedTracks) in this package.)\n","type":"Css.Value.Value { provides | autoFill : Css.Value.Supported }"},{"name":"autoFit","comment":" The `auto-fit` value [used in the `repeat()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#values).\n\n gridTemplateColumnsList\n [ minmax (px 210) maxContent\n , repeatedTracks autoFit [px 200]\n , pct 20\n ]\n\n(Note: due to a naming conflict, the `repeat()` function is\ncalled [`repeatedTracks`](#repeatedTracks) in this package.)\n","type":"Css.Value.Value { provides | autoFit : Css.Value.Supported }"},{"name":"autoRepeat","comment":" Performs the `repeat()` function used in CSS Grid track lists. This lets you\nrepeat a pattern of grid lines in CSS Grid without duplicating code.\n\nYou must specify a `autoFit`, or `autoFill` before specifying the track\nlist pattern you want to repeat.\n\n gridTemplateRows <|\n autoTrackList\n [ lineNames [\"linename1\"]\n , px 100\n , lineNames [\"linename2\"]\n , autoRepeat autoFit\n (px 10)\n [ lineNames[\"row-start\"]\n , px 250\n , lineNames[\"row-end\"]\n ]\n , px 100\n ]\n","type":"Css.Value.Value { autoFill : Css.Value.Supported, autoFit : Css.Value.Supported } -> List.List (Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, fr : Css.Value.Supported, minmax : Css.Value.Supported, lineNames : Css.Value.Supported })) -> Css.Value.Value { provides | autoRepeat : Css.Value.Supported }"},{"name":"autoTrackList","comment":" Creates a `` value for use in creating grid templates.\n\n gridTemplateColumns <|\n autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n","type":"Css.Value.Value (Css.FixedSizeSupported { fixedRepeat : Css.Value.Supported, autoRepeat : Css.Value.Supported, lineNames : Css.Value.Supported }) -> List.List (Css.Value.Value (Css.FixedSizeSupported { fixedRepeat : Css.Value.Supported, autoRepeat : Css.Value.Supported, lineNames : Css.Value.Supported })) -> Css.Value.Value { provides | autoTrackList : Css.Value.Supported }"},{"name":"avoid","comment":" Sets `avoid` value for usage with [`breakAfter`](#breakAfter),\n[`breakBefore`](#breakBefore) and [`breakInside`](#breakInside).\n\n breakBefore avoid\n\n breakAfter avoid\n\n breakInside avoid\n\n","type":"Css.Value.Value { provides | avoid : Css.Value.Supported }"},{"name":"avoidColumn","comment":" Sets `avoid-column` value for usage with [`breakAfter`](#breakAfter),\n[`breakBefore`](#breakBefore) and [`breakInside`](#breakInside).\n\n breakBefore avoidColumn\n\n breakAfter avoidColumn\n\n breakInside avoidColumn\n\n","type":"Css.Value.Value { provides | avoidColumn : Css.Value.Supported }"},{"name":"avoidPage","comment":" Sets `avoid-page` value for usage with [`breakAfter`](#breakAfter),\n[`breakBefore`](#breakBefore) and [`breakInside`](#breakInside).\n\n breakBefore avoidPage\n\n breakAfter avoidPage\n\n breakInside avoidPage\n\n","type":"Css.Value.Value { provides | avoidPage : Css.Value.Supported }"},{"name":"backdrop","comment":" A [`::backdrop`](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n backdrop\n [ background (rgba 255 0 0 0.25)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"backdropFilter","comment":" The [`backdrop-filter`](https://css-tricks.com/almanac/properties/b/backdrop-filter/) property.\n\nThis single-argument version lets you use global value keywords, as\nwell as `none`, URLs to SVG filters and single filter functions.\n\nIf you want to stack filter functions, use [`backdropFilterMany`](#backdropFilterMany).\n\n backdropFilter <| blur (px 6)\n\n backdropFilter <| grayscale (pct 60)\n\n backdropFilter <| url \"thing.svg#filter1\"\n\n backdropFilter none\n\n backdropFilter inherit\n\n backdropFilterMany [] -- unset\n\n backdropFilterMany [ invert (pct 70), sepia(pct 50) ]\n\n","type":"Css.BaseValue (Css.FilterFunctionSupported { url : Css.Value.Supported, none : Css.Value.Supported }) -> Css.Style"},{"name":"backdropFilterMany","comment":" The [`backdrop-filter`](https://css-tricks.com/almanac/properties/b/backdrop-filter/) property.\n\nThis multi-argument version lets you stack multiple filter functions and URLs to SVG filters.\nAn empty list will create an `unset` value.\n\n backdropFilterMany [] -- unset\n\n backdropFilterMany [ invert (pct 70), sepia(pct 50) ]\n\n","type":"List.List (Css.Value.Value (Css.FilterFunctionSupported { url : Css.Value.Supported })) -> Css.Style"},{"name":"backfaceVisibility","comment":" Sets [`backface-visibility`](https://css-tricks.com/almanac/properties/b/backface-visibility/)\n\n backfaceVisibility visible\n\n backfaceVisibility hidden\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported } -> Css.Style"},{"name":"backgroundAttachment","comment":" Sets [`background-attachment`](https://css-tricks.com/almanac/properties/b/background-attachment/).\n\n backgroundAttachment local\n\n backgroundAttachmentMany [ fixed, scroll, fixed ]\n\n backgroundAttachmentMany [ fixed, scroll, fixed ]\n\n backgroundAttachmentMany [] -- background-attachment: unset;\n\n","type":"Css.BaseValue { fixed : Css.Value.Supported, scroll : Css.Value.Supported, local : Css.Value.Supported } -> Css.Style"},{"name":"backgroundAttachmentMany","comment":" Sets [`background-attachment`](https://css-tricks.com/almanac/properties/b/background-attachment/).\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n backgroundAttachment local\n\n backgroundAttachmentMany [ fixed, scroll, fixed ]\n\n backgroundAttachmentMany [ fixed, scroll, fixed ]\n\n backgroundAttachmentMany [] -- background-attachment: unset;\n\n","type":"List.List (Css.Value.Value { fixed : Css.Value.Supported, scroll : Css.Value.Supported, local : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundBlendMode","comment":" Sets [`background-blend-mode`](https://css-tricks.com/almanac/properties/b/background-blend-mode/).\nNote that this takes an argument of [`color_`](#color_), not [`color`](#color)!\n\n backgroundBlendMode color_\n\n backgroundBlendMode darken\n\n backgroundBlendMode colorBurn\n\n backgroundBlendModeMany [ darken, color_ ]\n\n backgroundBlendModeMany [] -- background-blend-mode: unset;\n\n","type":"Css.BaseValue Css.BlendMode -> Css.Style"},{"name":"backgroundBlendModeMany","comment":" Sets [`background-blend-mode`](https://css-tricks.com/almanac/properties/b/background-blend-mode/).\n\nNote that this takes an argument of [`color_`](#color_), not [`color`](#color)!\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n backgroundBlendMode color_\n\n backgroundBlendMode darken\n\n backgroundBlendMode colorBurn\n\n backgroundBlendModeMany [ darken, color_ ]\n\n backgroundBlendModeMany [] -- background-blend-mode: unset;\n \n\n","type":"List.List (Css.Value.Value Css.BlendMode) -> Css.Style"},{"name":"backgroundClip","comment":" Sets [`background-clip`](https://css-tricks.com/almanac/properties/b/background-clip/).\nNote that this takes an argument of [`text`](#text), not [`color`](#color)!\n\n backgroundClip text\n\n backgroundClip paddingBox\n\n backgroundClip contentBox\n\n backgroundClipMany [ text, borderBox, text ]\n\n backgroundClipMany [] -- background-clip: unset;\n\n","type":"Css.BaseValue { borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported, text : Css.Value.Supported } -> Css.Style"},{"name":"backgroundClipMany","comment":" Sets [`background-clip`](https://css-tricks.com/almanac/properties/b/background-clip/).\nNote that this takes an argument of [`text`](#text), not [`color`](#color)!\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n backgroundClip text\n\n backgroundClip paddingBox\n\n backgroundClip contentBox\n\n backgroundClipMany [ text, borderBox, text ]\n\n backgroundClipMany [] -- background-clip: unset;\n\n","type":"List.List (Css.Value.Value { borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported, text : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundColor","comment":" Sets [`background-color`](https://css-tricks.com/almanac/properties/b/background-color/).\n\n backgroundColor (hex \"#60b5cc\")\n\n backgroundColor (rgb 96 181 204)\n\n backgroundColor (rgba 96 181 204 0.5)\n\n backgroundColor transparent\n\n","type":"Css.BaseValue (Css.ColorSupported { transparent : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundImage","comment":" Sets [`background-image`](https://css-tricks.com/almanac/properties/b/background-image/).\n\n backgroundImage (url \"http://www.example.com/chicken.jpg\")\n\n backgroundImage (linearGradient (stop red) (stop blue))\n\nSee also [`backgroundImages`](#backgroundImages) if you need multiple images.\n\n","type":"Css.BaseValue (Css.ImageSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundImageMany","comment":" Sets [`background-image`](https://css-tricks.com/almanac/properties/b/background-image/) for multiple images.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n backgroundImageMany\n (linearGradient (stop red) (stop blue))\n [ url \"http://www.example.com/chicken.jpg\" ]\n\n backgroundImageMany [] -- background-image: unset;\n\nSee also [`backgroundImage`](#backgroundImage) if you need only one.\n\n","type":"List.List (Css.Value.Value Css.Image) -> Css.Style"},{"name":"backgroundOrigin","comment":" Sets [`background-origin`](https://css-tricks.com/almanac/properties/b/background-origin/).\n\n backgroundOrigin paddingBox\n\n backgroundOrigin contentBox\n \n backgroundOriginMany [ contentBox, borderBox, contentBox ]\n\n backgroundOriginMany [] -- background-origin: unset;\n\n","type":"Css.BaseValue { borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported } -> Css.Style"},{"name":"backgroundOriginMany","comment":" Sets [`background-origin`](https://css-tricks.com/almanac/properties/b/background-origin/).\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n backgroundOrigin paddingBox\n\n backgroundOrigin contentBox\n\n backgroundOriginMany [ contentBox, borderBox, contentBox ]\n\n backgroundOriginMany [] -- background-origin: unset;\n\n","type":"List.List (Css.Value.Value { borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundPosition","comment":" Sets [`background-position`](https://css-tricks.com/almanac/properties/b/background-position/).\n\n backgroundPosition left_\n\n backgroundPosition (px 45)\n\n`backgroundPosition` sets the horizontal direction. If you need the vertical\ndirection instead, use [`backgroundPosition2`](#backgroundPosition2) like this:\n\n backgroundPosition2 zero (px 45)\n\nIf you need to set the offsets from the right or bottom, use\n[`backgroundPosition4`](#backgroundPosition4) like this:\n\n backgroundPosition4 right_ (px 20) bottom_ (pct 30)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundPosition2","comment":" Sets [`background-position`](https://css-tricks.com/almanac/properties/b/background-position/).\n\n backgroundPosition2 left_ top_\n\n backgroundPosition2 (px 45) (pct 50)\n\n`backgroundPosition2` sets both the horizontal and vertical directions (in that\norder, same as CSS.) If you need only the horizontal, you can use\n[`backgroundPosition`](#backgroundPosition) instead:\n\n backgroundPosition left_\n\nIf you need to set the offsets from the right or bottom, use\n[`backgroundPosition4`](#backgroundPosition4).\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundPosition3","comment":" Sets [`background-position`](https://css-tricks.com/almanac/properties/b/background-position/).\n\n backgroundPosition3 right_ (px 20) center\n\nThe three-argument form of background position sets one side to center and the\nother to the specified offest. So the example above would position the background\nimage 20px from the right, and center it vertically.\n\n","type":"Css.Value.Value { left_ : Css.Value.Supported, right_ : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { center : Css.Value.Supported } -> Css.Style"},{"name":"backgroundPosition4","comment":" Sets [`background-position`](https://css-tricks.com/almanac/properties/b/background-position/).\n\n backgroundPosition4 right_ (px 20) bottom_ (pct 30)\n\nThe four-argument form of background position alternates sides and offets. So the\nexample above would position the background image 20px from the right, and 30%\nfrom the bottom.\n\nSee also [`backgroundPosition`](#backgroundPosition) for horizontal alignment and\n[`backgroundPosition2`](#backgroundPosition2) for horizontal (from left) and\nvertical (from top) alignment.\n\n","type":"Css.Value.Value { left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundRepeat","comment":" Sets [`background-repeat`](https://css-tricks.com/almanac/properties/b/background-repeat/)\n\n backgroundRepeat repeat\n\n backgroundRepeat repeatX\n\nIf you need to set horizontal and vertical direction separately, see\n[`backgroundRepeat2`](#backgroundRepeat2)\n\n","type":"Css.BaseValue { repeat : Css.Value.Supported, repeatX : Css.Value.Supported, repeatY : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"backgroundRepeat2","comment":" Sets [`background-repeat`](https://css-tricks.com/almanac/properties/b/background-repeat/) along the horizontal axis, then the vertical axis.\n\n backgroundRepeat2 repeat space\n\n backgroundRepeat2 space round\n\nIf you only need to set one value for both, see\n[`backgroundRepeat`](#backgroundRepeat) instead.\n\n","type":"Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"backgroundSize","comment":" Sets [`background-size`](https://css-tricks.com/almanac/properties/b/background-size/).\n\n backgroundSize cover\n\n backgroundSize (px 400)\n\nIf you give a length value, it will be used for the width. The height will be set\nproportional to the size of the [`background-image`](#backgroundImage). If you\nneed to set both width and height explicitly, use\n[`backgroundImage2`](#backgroundImage2) instead.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, cover : Css.Value.Supported, contain_ : Css.Value.Supported }) -> Css.Style"},{"name":"backgroundSize2","comment":" Sets [`background-size`](https://css-tricks.com/almanac/properties/b/background-size/) for both width and height (in that order.)\n\n backgroundSize2 (px 300) (px 100)\n\n backgroundSize2 auto (px 400)\n\nIf you only want to set the width, use [`backgroundImage`](#backgroundImage) instead.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"backwards","comment":" The `backwards` value used for functions like [`animationFillMode`](#animationFillMode)\n\n animationFillMode backwards\n\n","type":"Css.Value.Value { provides | backwards : Css.Value.Supported }"},{"name":"balance","comment":" A `balance` value used in properties such as [`columnFill`](#columnFill)\n\n columnFill balance\n\n","type":"Css.Value.Value { provides | balance : Css.Value.Supported }"},{"name":"balanceAll","comment":" A `balance-all` value used in properties such as [`columnFill`](#columnFill)\n\n columnFill balanceAll\n\n","type":"Css.Value.Value { provides | balanceAll : Css.Value.Supported }"},{"name":"baseline","comment":" The `baseline` value, used in the following properties:\n\n - [`alignContent`](#alignContent)\n - [`alignItems`](#alignItems)\n - [`alignSelf`](#alignSelf)\n - [`verticalAlign`](#verticalAlign)\n\n```\nalignItems baseline\n\nverticalAlign baseline\n```\n\n","type":"Css.Value.Value { provides | baseline : Css.Value.Supported }"},{"name":"batch","comment":" Create a style from multiple other styles.\n\n underlineOnHover =\n batch\n [ textDecoration none\n\n , hover\n [ textDecoration underline ]\n ]\n\n css\n [ color (rgb 128 64 32)\n , underlineOnHover\n ]\n\n...has the same result as:\n\n css\n [ color (rgb 128 64 32)\n , textDecoration none\n , hover\n [ textDecoration underline ]\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"before","comment":" A [`::before`](https://css-tricks.com/almanac/selectors/a/after-and-before/)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n div [ before [ content \"hi!\" ] ]\n\n--TODO : Introduce a way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`.\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"bengali","comment":" The `bengali` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType bengali\n\n","type":"Css.Value.Value { provides | bengali : Css.Value.Supported }"},{"name":"bevel","comment":" Sets `bevel` value for usage with [`strokeLinejoin`](#strokeLinejoins2).\n\n strokeLinejoin miter bevel\n\n","type":"Css.Value.Value { provides | bevel : Css.Value.Supported }"},{"name":"bidiOverride","comment":" Sets `bidi-override` value for usage with [`unicodeBidi`](#unicodeBidi).\n\n unicodeBidi bidiOverride\n\n","type":"Css.Value.Value { provides | bidiOverride : Css.Value.Supported }"},{"name":"bleed","comment":" Sets [`bleed`](https://css-tricks.com/almanac/properties/b/bleed/)\n\n bleed auto\n\n bleed (pt 10)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported }) -> Css.Style"},{"name":"block","comment":" The `block` value.\n\nThis is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/) used by [`display`](#display) and [`resize`](#resize).\n\n\n display block\n\n resize block\n\n","type":"Css.Value.Value { provides | block : Css.Value.Supported }"},{"name":"blockEnd","comment":" The `block-end` value, which is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/).\nIt can be used with [`captionSide`](#captionSide).\n\n captionSide blockEnd\n","type":"Css.Value.Value { provides | blockEnd : Css.Value.Supported }"},{"name":"blockSize","comment":" The [`block-size`](https://css-tricks.com/almanac/properties/b/block-size/) property.\n\n blockSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"blockStart","comment":" The `block-start` value, which is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/).\nIt can be used with [`captionSide`](#captionSide).\n\n captionSide blockStart\n","type":"Css.Value.Value { provides | blockEnd : Css.Value.Supported }"},{"name":"blur","comment":" Provides a [`blur()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur).\n\n backdropFilter <| blur (px 20)\n -- backdrop-filter: blur(20px);\n","type":"Css.Value.Value Css.Length -> Css.Value.Value { provides | blur : Css.Value.Supported }"},{"name":"bold","comment":" ","type":"Css.Value.Value { provides | bold : Css.Value.Supported }"},{"name":"bolder","comment":" ","type":"Css.Value.Value { provides | bolder : Css.Value.Supported }"},{"name":"border","comment":" Sets [`border`](https://css-tricks.com/almanac/properties/b/border/) property.\n\n border (px 1)\n\n border2 (px 1) solid\n\n border3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"border2","comment":" Sets [`border`](https://css-tricks.com/almanac/properties/b/border/) property.\n\n border (px 1)\n\n border2 (px 1) solid\n\n border3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"border3","comment":" Sets [`border`](https://css-tricks.com/almanac/properties/b/border/) property.\n\n border (px 1)\n\n border2 (px 1) solid\n\n border3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderBlock","comment":" Sets [`border-block`](https://css-tricks.com/almanac/properties/b/border-block/) property.\n\n borderBlock (px 1)\n\n borderBlock2 (px 1) solid\n\n borderBlock3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBlock2","comment":" Sets [`border-block`](https://css-tricks.com/almanac/properties/b/border-block/) property.\n\n borderBlock (px 1)\n\n borderBlock2 (px 1) solid\n\n borderBlock3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderBlock3","comment":" Sets [`border-block`](https://css-tricks.com/almanac/properties/b/border-block/) property.\n\n borderBlock (px 1)\n\n borderBlock2 (px 1) solid\n\n borderBlock3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderBlockColor","comment":" Sets [`border-block-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color) property.\n\n borderBlockColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderBlockEnd","comment":" Sets [`border-block-end`](https://css-tricks.com/almanac/properties/b/border-block-end/) property.\n\n borderBlockEnd (px 1)\n\n borderBlockEnd2 (px 1) solid\n\n borderBlockEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBlockEnd2","comment":" Sets [`border-block-end`](https://css-tricks.com/almanac/properties/b/border-block-end/) property.\n\n borderBlockEnd (px 1)\n\n borderBlockEnd2 (px 1) solid\n\n borderBlockEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderBlockEnd3","comment":" Sets [`border-block-end`](https://css-tricks.com/almanac/properties/b/border-block-end/) property.\n\n borderBlockEnd (px 1)\n\n borderBlockEnd2 (px 1) solid\n\n borderBlockEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderBlockEndColor","comment":" Sets [`border-block-end-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color) property.\n\n borderBlockEndColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderBlockEndStyle","comment":" Sets [`border-block-end-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style) property.\n\n borderBlockEndStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderBlockEndWidth","comment":" Sets [`border-block-end-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width) property.\n\n borderBlockEndWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBlockStart","comment":" Sets [`border-block-start`](https://css-tricks.com/almanac/properties/b/border-block-start/) property.\n\n borderBlockStart (px 1)\n\n borderBlockStart2 (px 1) solid\n\n borderBlockStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBlockStart2","comment":" Sets [`border-block-start`](https://css-tricks.com/almanac/properties/b/border-block-start/) property.\n\n borderBlockStart (px 1)\n\n borderBlockStart2 (px 1) solid\n\n borderBlockStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderBlockStart3","comment":" Sets [`border-block-start`](https://css-tricks.com/almanac/properties/b/border-block-start/) property.\n\n borderBlockStart (px 1)\n\n borderBlockStart2 (px 1) solid\n\n borderBlockStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderBlockStartColor","comment":" Sets [`border-block-start-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color) property.\n\n borderBlockStartColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderBlockStartStyle","comment":" Sets [`border-block-start-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style) property.\n\n borderBlockStartStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderBlockStartWidth","comment":" Sets [`border-block-start-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width) property.\n\n borderBlockStartWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBlockStyle","comment":" Sets [`border-block-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style) property.\n\n borderBlockStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderBlockWidth","comment":" Sets [`border-block-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width) property.\n\n borderBlockWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBottom","comment":" Sets [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) property.\n\n borderBottom (px 1)\n\n borderBottom2 (px 1) solid\n\n borderBottom3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBottom2","comment":" Sets [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) property.\n\n borderBottom (px 1)\n\n borderBottom2 (px 1) solid\n\n borderBottom3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderBottom3","comment":" Sets [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) property.\n\n borderBottom (px 1)\n\n borderBottom2 (px 1) solid\n\n borderBottom3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderBottomColor","comment":" Sets [`border-bottom-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) property.\n\n borderBottomColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderBottomLeftRadius","comment":" Sets [`border-bottom-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) property.\n\n borderBottomLeftRadius (em 4)\n\n borderBottomLeftRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderBottomLeftRadius2","comment":" Sets [`border-bottom-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) property.\n\n borderBottomLeftRadius (em 4)\n\n borderBottomLeftRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderBottomRightRadius","comment":" Sets [`border-bottom-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) property.\n\n borderBottomRightRadius (em 4)\n\n borderBottomRightRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderBottomRightRadius2","comment":" Sets [`border-bottom-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) property.\n\n borderBottomRightRadius (em 4)\n\n borderBottomRightRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderBottomStyle","comment":" Sets [`border-bottom-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) property.\n\n borderBottomStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderBottomWidth","comment":" Sets [`border-bottom-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) property.\n\n borderBottomWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderBox","comment":" The `border-box` value, used in the following properties:\n\n - [`boxSizing`](#boxSizing)\n - [`backgroundClip`](#backgroundClip)\n - [`backgroundOrigin`](backgroundOrigin)\n - [`strokeOrigin`](#strokeOrigin)\n\n```\nboxSizing borderBox\n\nbackgroundClip borderBox\n\nbackgroundOrigin borderBox\n\nstrokeOrigin borderBox\n```\n","type":"Css.Value.Value { provides | borderBox : Css.Value.Supported }"},{"name":"borderCollapse","comment":" Sets [`border-collapse`](https://css-tricks.com/almanac/properties/b/border-collapse/).\n\n borderCollapse collapse\n\n borderCollapse separate\n\n","type":"Css.BaseValue { collapse : Css.Value.Supported, separate : Css.Value.Supported } -> Css.Style"},{"name":"borderColor","comment":" Sets [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) property.\n\n borderColor (rgb 0 0 0)\n\n borderColor2 (rgb 0 0 0) (hsl 10 10 10)\n\n borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\")\n\n borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\") transparent\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderColor2","comment":" Sets [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) property.\n\n borderColor (rgb 0 0 0)\n\n borderColor2 (rgb 0 0 0) (hsl 10 10 10)\n\n borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\")\n\n borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\") transparent\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderColor3","comment":" Sets [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) property.\n\n borderColor (rgb 0 0 0)\n\n borderColor2 (rgb 0 0 0) (hsl 10 10 10)\n\n borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\")\n\n borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\") transparent\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderColor4","comment":" Sets [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) property.\n\n borderColor (rgb 0 0 0)\n\n borderColor2 (rgb 0 0 0) (hsl 10 10 10)\n\n borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\")\n\n borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex \"#fff\") transparent\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderEndEndRadius","comment":" Sets [`border-end-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) property.\n\n borderEndEndRadius (em 4)\n\n borderEndEndRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderEndEndRadius2","comment":" Sets [`border-end-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) property.\n\n borderEndEndRadius (em 4)\n\n borderEndEndRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderEndStartRadius","comment":" Sets [`border-end-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) property.\n\n borderEndStartRadius (em 4)\n\n borderEndStartRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderEndStartRadius2","comment":" Sets [`border-end-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) property.\n\n borderEndStartRadius (em 4)\n\n borderEndStartRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageOutset","comment":" Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageOutset (rem 1)\n\n borderImageOutset2 (num 1) (num 1.2)\n\n borderImageOutset3 (px 30) (num 2) (px 45)\n\n borderImageOutset4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.\n\n","type":"Css.BaseValue (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageOutset2","comment":" Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageOutset (rem 1)\n\n borderImageOutset2 (num 1) (num 1.2)\n\n borderImageOutset3 (px 30) (num 2) (px 45)\n\n borderImageOutset4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageOutset3","comment":" Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageOutset (rem 1)\n\n borderImageOutset2 (num 1) (num 1.2)\n\n borderImageOutset3 (px 30) (num 2) (px 45)\n\n borderImageOutset4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageOutset4","comment":" Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageOutset (rem 1)\n\n borderImageOutset2 (num 1) (num 1.2)\n\n borderImageOutset3 (px 30) (num 2) (px 45)\n\n borderImageOutset4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageWidth","comment":" Sets [`border-image-width`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageWidth (rem 1)\n\n borderImageWidth2 (num 1) (num 1.2)\n\n borderImageWidth3 (pct 5) (pct 15) (pct 10)\n\n borderImageWidth4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageWidth2","comment":" Sets [`border-image-width`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageWidth (rem 1)\n\n borderImageWidth2 (num 1) (num 1.2)\n\n borderImageWidth3 (pct 5) (pct 15) (pct 10)\n\n borderImageWidth4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageWidth3","comment":" Sets [`border-image-width`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageWidth (rem 1)\n\n borderImageWidth2 (num 1) (num 1.2)\n\n borderImageWidth3 (pct 5) (pct 15) (pct 10)\n\n borderImageWidth4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"borderImageWidth4","comment":" Sets [`border-image-width`](https://css-tricks.com/almanac/properties/b/border-image/) property.\n\n borderImageWidth (rem 1)\n\n borderImageWidth2 (num 1) (num 1.2)\n\n borderImageWidth3 (pct 5) (pct 15) (pct 10)\n\n borderImageWidth4 (px 7) (px 12) (px 14) (px 5)\n\nSpecifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"borderInline","comment":" Sets [`border-inline`](https://css-tricks.com/almanac/properties/b/border-inline/) property.\n\n borderInline (px 1)\n\n borderInline2 (px 1) solid\n\n borderInline3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderInline2","comment":" Sets [`border-inline`](https://css-tricks.com/almanac/properties/b/border-inline/) property.\n\n borderInline (px 1)\n\n borderInline2 (px 1) solid\n\n borderInline3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderInline3","comment":" Sets [`border-inline`](https://css-tricks.com/almanac/properties/b/border-inline/) property.\n\n borderInline (px 1)\n\n borderInline2 (px 1) solid\n\n borderInline3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderInlineColor","comment":" Sets [`border-inline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color) property.\n\n borderInlineColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderInlineEnd","comment":" Sets [`border-inline-end`](https://css-tricks.com/almanac/properties/b/border-inline-end/) property.\n\n borderInlineEnd (px 1)\n\n borderInlineEnd2 (px 1) solid\n\n borderInlineEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderInlineEnd2","comment":" Sets [`border-inline-end`](https://css-tricks.com/almanac/properties/b/border-inline-end/) property.\n\n borderInlineEnd (px 1)\n\n borderInlineEnd2 (px 1) solid\n\n borderInlineEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderInlineEnd3","comment":" Sets [`border-inline-end`](https://css-tricks.com/almanac/properties/b/border-inline-end/) property.\n\n borderInlineEnd (px 1)\n\n borderInlineEnd2 (px 1) solid\n\n borderInlineEnd3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderInlineEndColor","comment":" Sets [`border-inline-end-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color) property.\n\n borderInlineEndColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderInlineEndStyle","comment":" Sets [`border-inline-end-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style) property.\n\n borderInlineEndStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderInlineEndWidth","comment":" Sets [`border-inline-end-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width) property.\n\n borderInlineEndWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderInlineStart","comment":" Sets [`border-inline-start`](https://css-tricks.com/almanac/properties/b/border-inline-start/) property.\n\n borderInlineStart (px 1)\n\n borderInlineStart2 (px 1) solid\n\n borderInlineStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderInlineStart2","comment":" Sets [`border-inline-start`](https://css-tricks.com/almanac/properties/b/border-inline-start/) property.\n\n borderInlineStart (px 1)\n\n borderInlineStart2 (px 1) solid\n\n borderInlineStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderInlineStart3","comment":" Sets [`border-inline-start`](https://css-tricks.com/almanac/properties/b/border-inline-start/) property.\n\n borderInlineStart (px 1)\n\n borderInlineStart2 (px 1) solid\n\n borderInlineStart3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderInlineStartColor","comment":" Sets [`border-inline-start-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) property.\n\n borderInlineStartColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderInlineStartStyle","comment":" Sets [`border-inline-start-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) property.\n\n borderInlineStartStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderInlineStartWidth","comment":" Sets [`border-inline-start-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width) property.\n\n borderInlineStartWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderInlineStyle","comment":" Sets [`border-inline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style) property.\n\n borderInlineStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderInlineWidth","comment":" Sets [`border-inline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width) property.\n\n borderTopWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderLeft","comment":" Sets [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) property.\n\n borderLeft (px 1)\n\n borderLeft2 (px 1) solid\n\n borderLeft3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderLeft2","comment":" Sets [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) property.\n\n borderLeft (px 1)\n\n borderLeft2 (px 1) solid\n\n borderLeft3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderLeft3","comment":" Sets [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) property.\n\n borderLeft (px 1)\n\n borderLeft2 (px 1) solid\n\n borderLeft3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderLeftColor","comment":" Sets [`border-left-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) property.\n\n borderLeftColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderLeftStyle","comment":" Sets [`border-left-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style) property.\n\n borderLeftStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderLeftWidth","comment":" Sets [`border-left-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) property.\n\n borderLeftWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderRadius","comment":" Sets [`border-radius`](https://css-tricks.com/almanac/properties/b/border-radius/) property.\n\n borderRadius (em 4)\n\n borderRadius2 (em 4) (px 2)\n\n borderRadius3 (em 4) (px 2) (pct 5)\n\n borderRadius4 (em 4) (px 2) (pct 5) (px 3)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderRadius2","comment":" Sets [`border-radius`](https://css-tricks.com/almanac/properties/b/border-radius/) property.\n\n borderRadius (em 4)\n\n borderRadius2 (em 4) (px 2)\n\n borderRadius3 (em 4) (px 2) (pct 5)\n\n borderRadius4 (em 4) (px 2) (pct 5) (px 3)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderRadius3","comment":" Sets [`border-radius`](https://css-tricks.com/almanac/properties/b/border-radius/) property.\n\n borderRadius (em 4)\n\n borderRadius2 (em 4) (px 2)\n\n borderRadius3 (em 4) (px 2) (pct 5)\n\n borderRadius4 (em 4) (px 2) (pct 5) (px 3)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderRadius4","comment":" Sets [`border-radius`](https://css-tricks.com/almanac/properties/b/border-radius/) property.\n\n borderRadius (em 4)\n\n borderRadius2 (em 4) (px 2)\n\n borderRadius3 (em 4) (px 2) (pct 5)\n\n borderRadius4 (em 4) (px 2) (pct 5) (px 3)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderRight","comment":" Sets [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) property.\n\n borderRight (px 1)\n\n borderRight2 (px 1) solid\n\n borderRight3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderRight2","comment":" Sets [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) property.\n\n borderRight (px 1)\n\n borderRight2 (px 1) solid\n\n borderRight3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderRight3","comment":" Sets [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) property.\n\n borderRight (px 1)\n\n borderRight2 (px 1) solid\n\n borderRight3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderRightColor","comment":" Sets [`border-right-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) property.\n\n borderRightColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderRightStyle","comment":" Sets [`border-right-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style) property.\n\n borderRightStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderRightWidth","comment":" Sets [`border-right-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) property.\n\n borderRightWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderSpacing","comment":" Sets [`border-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing).\n\n borderSpacing zero\n\n borderSpacing (px 5)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"borderSpacing2","comment":" Sets [`border-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing), defining horizontal and vertical spacing separately.\n\n borderSpacing2 (cm 1) (em 2)\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"borderStartEndRadius","comment":" Sets [`border-start-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) property.\n\n borderStartEndRadius (em 4)\n\n borderStartEndRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderStartEndRadius2","comment":" Sets [`border-start-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) property.\n\n borderStartEndRadius (em 4)\n\n borderStartEndRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderStartStartRadius","comment":" Sets [`border-start-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius) property.\n\n borderStartStartRadius (em 4)\n\n borderStartStartRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderStartStartRadius2","comment":" Sets [`border-start-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius) property.\n\n borderStartStartRadius (em 4)\n\n borderStartStartRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderStyle","comment":" Sets [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property.\n\n borderStyle solid\n\n borderStyle2 solid none\n\n borderStyle3 solid none dotted\n\n borderStyle4 solid none dotted groove\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderStyle2","comment":" Sets [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property.\n\n borderStyle solid\n\n","type":"Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderStyle3","comment":" Sets [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property.\n\n borderStyle2 solid none\n\n","type":"Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderStyle4","comment":" Sets [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property.\n\n borderStyle4 solid none dotted groove\n\n","type":"Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderTop","comment":" Sets [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) property.\n\n borderTop (px 1)\n\n borderTop2 (px 1) solid\n\n borderTop3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderTop2","comment":" Sets [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) property.\n\n borderTop (px 1)\n\n borderTop2 (px 1) solid\n\n borderTop3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"borderTop3","comment":" Sets [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) property.\n\n borderTop (px 1)\n\n borderTop2 (px 1) solid\n\n borderTop3 (px 1) solid (hex \"#f00\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"borderTopColor","comment":" Sets [`border-top-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) property.\n\n borderTopColor (rgb 0 0 0)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"borderTopLeftRadius","comment":" Sets [`border-top-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) property.\n\n borderTopLeftRadius (em 4)\n\n borderTopLeftRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderTopLeftRadius2","comment":" Sets [`border-top-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) property.\n\n borderTopLeftRadius (em 4)\n\n borderTopLeftRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderTopRightRadius","comment":" Sets [`border-top-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) property.\n\n borderTopRightRadius (em 4)\n\n borderTopRightRadius2 (em 4) (px 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderTopRightRadius2","comment":" Sets [`border-top-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) property.\n\n borderTopRightRadius (em 4)\n\n borderTopRightRadius2 (em 4) (px 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"borderTopStyle","comment":" Sets [`border-top-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) property.\n\n borderTopStyle solid\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"borderTopWidth","comment":" Sets [`border-top-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) property.\n\n borderTopWidth (px 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderWidth","comment":" Sets [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property.\n\n borderWidth (px 1)\n\n borderWidth2 (px 1) thin\n\n borderWidth3 (px 1) thin zero\n\n borderWidth4 (px 1) thin zero (em 1)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"borderWidth2","comment":" Sets [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property.\n\n borderWidth (px 1)\n\n borderWidth2 (px 1) thin\n\n borderWidth3 (px 1) thin zero\n\n borderWidth4 (px 1) thin zero (em 1)\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Style"},{"name":"borderWidth3","comment":" Sets [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property.\n\n borderWidth (px 1)\n\n borderWidth2 (px 1) thin\n\n borderWidth3 (px 1) thin zero\n\n borderWidth4 (px 1) thin zero (em 1)\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Style"},{"name":"borderWidth4","comment":" Sets [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property.\n\n borderWidth (px 1)\n\n borderWidth2 (px 1) thin\n\n borderWidth3 (px 1) thin zero\n\n borderWidth4 (px 1) thin zero (em 1)\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineWidth -> Css.Style"},{"name":"both","comment":" Sets `both` value for usage with [`clear`](#clear) and [`resize`](#resize).\n\n clear both\n\n resize both\n\n","type":"Css.Value.Value { provides | both : Css.Value.Supported }"},{"name":"bothEdges","comment":" The `both-edges` value used by [`scrollbarGutter`](#scrollbarGutter).\n\n scrollbarGutter2 stable bothEdges\n\n","type":"Css.Value.Value { provides | bothEdges : Css.Value.Supported }"},{"name":"bottom","comment":" Sets the [`bottom`](https://css-tricks.com/almanac/properties/b/bottom/) property.\n\n bottom (px 10)\n\n bottom (pct 50)\n\n bottom auto\n\n bottom zero\n\nIf you need to use `bottom` as a CSS _value_ instead of as a _property_,\nfor example in `vertical-align: bottom`, use [`bottom_`](#bottom_) instead of this.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"bottom_","comment":" The `bottom` value, used in the following properties:\n\n - [`backgroundPosition`](#backgroundPosition)\n - [`captionSide`](#captionSide)\n - [`objectPosition2`](#objectPosition2)\n - [`perspectiveOrigin2`](#perspectiveOrigin2)\n - [`strokePosition2`](#strokePosition2)\n - [`transformOrigin`](#transformOrigin)\n - [`verticalAlign`](#verticalAlign)\n\n```\nbackgroundPosition bottom_\n\ncaptionSide bottom_\n\nobjectPosition2 right_ bottom_\n\nperspectiveOrigin2 left_ bottom_\n\ntransformOrigin bottom_\n\nverticalAlign bottom_\n```\n\nThe value is called `bottom_` instead of `bottom` because [`bottom` is already a property function](#bottom).\n\n","type":"Css.Value.Value { provides | bottom_ : Css.Value.Supported }"},{"name":"boundingBox","comment":" A `boundingBox` value for the [`strokeBreak`](#strokeBreak) property.\n\n strokeBreak boundingBox\n\n","type":"Css.Value.Value { provides | boundingBox : Css.Value.Supported }"},{"name":"boxDecorationBreak","comment":" Sets [`box-decoration-break`](https://css-tricks.com/almanac/properties/b/box-decoration-break/)\n\n boxDecorationBreak slice\n\n boxDecorationBreak clone\n\n","type":"Css.BaseValue { slice : Css.Value.Supported, clone : Css.Value.Supported } -> Css.Style"},{"name":"boxShadow","comment":" The [`box-shadow`](https://css-tricks.com/almanac/properties/b/box-shadow/) property.\n\n boxShadow initial\n\n boxShadow none\n\nFor defining shadows look at [`boxShadowsMany`](#boxShadowsMany).\n\n","type":"Css.BaseValue { none : Css.Value.Supported } -> Css.Style"},{"name":"boxShadowMany","comment":" Sets [`box-shadow`](https://css-tricks.com/almanac/properties/b/box-shadow/).\n\nIf you give an empty list, the value will be `none`. This is to make it impossible for it\nto have no values in the output.\n\n boxShadowMany [] -- \"box-shadow: none\"\n\n -- \"box-shadow: 3px 5px #aabbcc\"\n button\n [ css\n [ boxShadowMany\n [ { defaultBoxShadow\n | offsetX = px 3\n , offsetY = px 5\n , color = Just (hex \"#aabbcc\")\n }\n ]\n ]\n ]\n [ text \"Zap!\" ]\n\n","type":"List.List Css.BoxShadowConfig -> Css.Style"},{"name":"boxSizing","comment":" Sets [`box-sizing`](https://css-tricks.com/almanac/properties/b/box-sizing/) property.\n\n boxSizing contentBox\n\n boxSizing borderBox\n\n","type":"Css.BaseValue { contentBox : Css.Value.Supported, borderBox : Css.Value.Supported } -> Css.Style"},{"name":"breakAfter","comment":" Sets [`break-after`](https://css-tricks.com/almanac/properties/b/break-after/).\n\n breakAfter auto\n","type":"Css.BaseValue { auto : Css.Value.Supported, avoid : Css.Value.Supported, avoidPage : Css.Value.Supported, page : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, avoidColumn : Css.Value.Supported, column : Css.Value.Supported } -> Css.Style"},{"name":"breakAll","comment":" A `breakAll` value for the [`word-break`](https://css-tricks.com/almanac/properties/w/word-break/) property.\n\n wordBreak breakAll\n\n","type":"Css.Value.Value { provides | breakAll : Css.Value.Supported }"},{"name":"breakBefore","comment":" Sets [`break-before`](https://css-tricks.com/almanac/properties/b/break-before/).\n\n breakBefore auto\n","type":"Css.BaseValue { auto : Css.Value.Supported, avoid : Css.Value.Supported, avoidPage : Css.Value.Supported, page : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, avoidColumn : Css.Value.Supported, column : Css.Value.Supported } -> Css.Style"},{"name":"breakInside","comment":" Sets [`break-inside`](https://css-tricks.com/almanac/properties/b/break-inside/)\n\n breakInside auto\n\n breakInside avoid\n\n breakInside avoidPage\n\n breakInside avoidColumn\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, avoid : Css.Value.Supported, avoidPage : Css.Value.Supported, avoidColumn : Css.Value.Supported } -> Css.Style"},{"name":"breakSpaces","comment":" A `break-spaces` value for the [`white-space`](#whiteSpace) property.\n\n whiteSpace breakSpaces\n\n","type":"Css.Value.Value { provides | breakSpaces : Css.Value.Supported }"},{"name":"breakWord","comment":" The `break-word` value, which can be used with such properties as\n[`overflow-wrap`](https://css-tricks.com/almanac/properties/o/overflow-wrap/)\nand [`word-break`](https://css-tricks.com/almanac/properties/w/word-break/).\n\n overflowWrap breakWord\n\n wordBreak breakWord\n\n","type":"Css.Value.Value { provides | breakWord : Css.Value.Supported }"},{"name":"brightness","comment":" Provides a [`brightness()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness).\n\n filter <| brightness (pct 20)\n -- backdrop-filter: brightness(20%);\n\n filter <| brightness zero -- completely black\n \n backdropFilter <| contrast (num 1) -- no effect\n\n filter <| brightness (num 0.4)\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | brightness : Css.Value.Supported }"},{"name":"butt","comment":" A `butt` value for the [`strokeLinecap`](#strokeLinecap) property.\n\n strokeLinecap butt\n\n","type":"Css.Value.Value { provides | butt : Css.Value.Supported }"},{"name":"calc","comment":" The css [`calc`](https://css-tricks.com/a-couple-of-use-cases-for-calc) function.\n\n almostPct100 =\n calc (pct 100) (minus (px 2))\n\n -- The following compiles to: calc(100vh - (2px + 2rem))\n screenMinusBorderAndFooter =\n calc (vh 100) (minus (calc (px 2) (plus (rem 2))))\n\n myWidth =\n width almostPct100\n\n myHeight =\n height screenMinusBorderAndFooter\n\n**CAUTION:** `calc` can easily be used to create invalid CSS values! For example,\n`zIndex (calc (pct 100) (minus (px 5)))` compiles to `z-index: calc(100% - 5px);`\nwhich is invalid. According to the spec, `calc` may return values that have no\nrelation to its arguments, so unfortunately there's not much `elm-css` can do\nto make `calc` more reliable. Use with caution!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, int : Css.Value.Supported }) -> Css.CalcOperation -> Css.Value.Value { provides | calc : Css.Value.Supported }"},{"name":"cambodian","comment":" The `cambodian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType cambodian\n\n","type":"Css.Value.Value { provides | cambodian : Css.Value.Supported }"},{"name":"capitalize","comment":" A `capitalize` value for the [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Syntax) property.\n\n textTransform capitalize\n\n","type":"Css.Value.Value { provides | capitalize : Css.Value.Supported }"},{"name":"captionSide","comment":" Sets [`caption-side`](https://css-tricks.com/almanac/properties/c/caption-side/).\n\n captionSide top_\n\n captionSide bottom_\n\n captionSide blockStart\n\n captionSide inlineEnd\n\n","type":"Css.BaseValue { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, blockStart : Css.Value.Supported, blockEnd : Css.Value.Supported, inlineStart : Css.Value.Supported, inlineEnd : Css.Value.Supported } -> Css.Style"},{"name":"caretColor","comment":" Sets [`caret-color`](https://css-tricks.com/almanac/properties/c/caret-color/)\n\n caretColor (hex \"#60b5cc\")\n\n caretColor (rgb 96 181 204)\n\n caretColor (rgba 96 181 204 0.5)\n\n","type":"Css.BaseValue (Css.ColorSupported { auto : Css.Value.Supported, transparent : Css.Value.Supported }) -> Css.Style"},{"name":"cell","comment":" The `cell` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | cell : Css.Value.Supported }"},{"name":"center","comment":" The `center` value, used in many properties such as:\n\n - [`alignContent`](#alignContent)\n - [`alignItems`](#alignItems)\n - [`alignSelf`](#alignSelf)\n - [`backgroundPosition`](#backgroundPosition)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n - [`scrollSnapAlign`](#scrollSnapAlign)\n\n```\nbackgroundPosition enter\n\njustifyContent center\n```\n\n","type":"Css.Value.Value { provides | center : Css.Value.Supported }"},{"name":"ch","comment":" [`ch`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (ch 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | ch : Css.Value.Supported }"},{"name":"checked","comment":" A [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\nThis pseudo-class is for any checkbox, option or radio input that is checked or toggled on.\n\n checked\n [ backgroundColor (rgb 0 0 255)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"circle","comment":" Provides a one-argument `circle()` value.\n\n clipPath (circle (pct 10))\n\n clipPath (circle closestSide)\n\n clipPath (circleAt (pct 10) left)\n\n clipPath (circleAt closestSide (rem 5))\n\n clipPath (circleAt2 closestSide (rem 5) (rem 1))\n\nNote: This is not to be confused with [`circle_`](#circle_),\nwhich is a keyword value for properties such as `listStyleType`.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value { provides | circle : Css.Value.Supported }"},{"name":"circleAt","comment":" Provides a 2-argument `circle( at )` value.\n\n clipPath (circleAt (pct 10) left_)\n\n clipPath (circleAt closestSide (rem 5))\n\n clipPath (circleAt2 closestSide (rem 5) (rem 1))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value { provides | circleAt : Css.Value.Supported }"},{"name":"circleAt2","comment":" Provides a 3-argument `circle( at )` value.\n\n clipPath (circleAt2 closestSide (rem 5) (rem 1))\n\n clipPath (circleAt2 (pct 10) top_ left_)\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value { provides | circleAt2 : Css.Value.Supported }"},{"name":"circle_","comment":" The `circle` value used by properties such as [`listStyle`](#listStyle),\n[`listStyleType`](#listStyleType), [`textEmphasis`](#textEmphasis) and [`textEmphasisStyle`](#textEmphasisStyle).\n\n listStyleType circle_\n\n textEmphasis2 circle_ (hex \"ff0000\")\n\n textEmphasisStyle circle_\n\nNote: This is not to be confused with [`circle`](#circle),\n[`circleAt`](#circleAt) or [`circleAt2`](#circleAt2), which are\n`` data types.\n\n","type":"Css.Value.Value { provides | circle_ : Css.Value.Supported }"},{"name":"cjkDecimal","comment":" The `cjk-decimal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType cjkDecimal\n\n","type":"Css.Value.Value { provides | cjkDecimal : Css.Value.Supported }"},{"name":"cjkEarthlyBranch","comment":" The `cjk-earthly-branch` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType cjkEarthlyBranch\n\n","type":"Css.Value.Value { provides | cjkEarthlyBranch : Css.Value.Supported }"},{"name":"cjkHeavenlyStem","comment":" The `cjk-heavenly-stem` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType cjkHeavenlyStem\n\n","type":"Css.Value.Value { provides | cjkHeavenlyStem : Css.Value.Supported }"},{"name":"cjkIdeographic","comment":" The `cjk-ideographic` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType cjkIdeographic\n\n","type":"Css.Value.Value { provides | cjkIdeographic : Css.Value.Supported }"},{"name":"clear","comment":" Sets [`clear`](https://css-tricks.com/almanac/properties/c/clear/) property.\n\n clear none\n\n clear both\n\n clear left_\n\n clear right_\n\n clear inlineStart\n\n clear inlineEnd\n\n","type":"Css.BaseValue { none : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, both : Css.Value.Supported, inlineStart : Css.Value.Supported, inlineEnd : Css.Value.Supported } -> Css.Style"},{"name":"clip","comment":" The `clip` value used by [`overflow`](#overflow) and [`textOverflow`](#textOverflow).\n\n overflow clip\n\n overflowX clip\n\n overflowY clip\n\n textOverflow clip\n\n","type":"Css.Value.Value { provides | clip : Css.Value.Supported }"},{"name":"clipPath","comment":" The 1-argument variant of the\n[`clip-path`](https://css-tricks.com/almanac/properties/c/clip-path/) property.\n\n clipPath marginBox\n\n clipPath inherit\n\n clipPath (circle (pct 2))\n\n clipPath (url \"test-img.svg\")\n\n clipPath2 marginBox (circleAt2 farthestSide left top)\n \n","type":"Css.BaseValue (Css.BasicShapeSupported { none : Css.Value.Supported, url : Css.Value.Supported, marginBox : Css.Value.Supported, borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, viewBox : Css.Value.Supported }) -> Css.Style"},{"name":"clipPath2","comment":" The 2-argument variant of the\n[`clip-path`](https://css-tricks.com/almanac/properties/c/clip-path/) property.\n\n clipPath2 marginBox (circleAt2 farthestSide left top)\n","type":"Css.Value.Value { marginBox : Css.Value.Supported, borderBox : Css.Value.Supported, paddingBox : Css.Value.Supported, contentBox : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, viewBox : Css.Value.Supported } -> Css.Value.Value Css.BasicShape -> Css.Style"},{"name":"clone","comment":" A `clone` value for the [`strokeBreak`](#strokeBreak) and [`boxDecorationBreak`](#boxDecorationBreak) properties.\n\n strokeBreak clone\n\n boxDecorationBreak clone\n\n","type":"Css.Value.Value { provides | clone : Css.Value.Supported }"},{"name":"closestSide","comment":" The `closest-side` value for use in [circle](#circle) and [ellipse](#ellipse) shapes.\n\n clipPath (circle closestSide)\n\n clipPath (ellipse farthestSide (px 20))\n\n","type":"Css.Value.Value { provides | closestSide : Css.Value.Supported }"},{"name":"cm","comment":" [`cm`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (cm 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | cm : Css.Value.Supported }"},{"name":"colResize","comment":" The `col-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | colResize : Css.Value.Supported }"},{"name":"collapse","comment":" A `collapse` value for the [`border-collapse`](https://css-tricks.com/almanac/properties/b/border-collapse/) and\n[`visibility`](https://css-tricks.com/almanac/properties/v/visibility/) property.\n\n borderCollapse collapse\n\n visibility collapse\n\n","type":"Css.Value.Value { provides | collapse : Css.Value.Supported }"},{"name":"color","comment":" Sets [`color`](https://css-tricks.com/almanac/properties/c/color/).\n\n color (hex \"#60b5cc\")\n\n color (rgb 96 181 204)\n\n color (rgba 96 181 204 0.5)\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"colorBurn","comment":" The `color-burn` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode colorBurn\n\n","type":"Css.Value.Value { provides | colorBurn : Css.Value.Supported }"},{"name":"colorDodge","comment":" The `color-dodge` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode color - colorDodge\n\n","type":"Css.Value.Value { provides | colorDodge : Css.Value.Supported }"},{"name":"color_","comment":" The `color` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode color_\n\nNot to be confused with [`color`](#color).\n\n","type":"Css.Value.Value { provides | color_ : Css.Value.Supported }"},{"name":"column","comment":" The `column` value, used in [`flex-direction`](#flexDirection),\n[`break-before`](#breakBefore) and [`break-after`](#breakAfter) properties.\n\n flexDirection column\n\n breakBefore column\n\n breakAfter column\n\n","type":"Css.Value.Value { provides | column : Css.Value.Supported }"},{"name":"columnCount","comment":" Sets [`column-count`](https://css-tricks.com/almanac/properties/c/column-count/)\n\n columnCount auto\n\n columnCount (num 3)\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, int : Css.Value.Supported } -> Css.Style"},{"name":"columnFill","comment":" Sets [`column-fill`](https://css-tricks.com/almanac/properties/c/column-fill/)\n\n columnFill auto\n\n columnFill balance\n\n columnFill balanceAll\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, balance : Css.Value.Supported, balanceAll : Css.Value.Supported } -> Css.Style"},{"name":"columnGap","comment":" Sets the [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) property.\n\n`column-gap` specifies the size of spacing between column of items within grid, flex\nand multi-column layouts.\n\n columnGap normal\n\n columnGap (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { normal : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"columnReverse","comment":" The `column-reverse` [`flex-direction` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Values).\n\n flexDirection columnReverse\n\n","type":"Css.Value.Value { provides | columnReverse : Css.Value.Supported }"},{"name":"columnRule","comment":" Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/).\nThis is a shorthand for the [`columnRuleWidth`](#columnRuleWidth),\n[`columnRuleStyle`](#columnRuleStyle), and [`columnRuleColor`](#columnRuleColor)\nproperties.\n\n columnRule thin\n\n columnRule2 thin solid\n\n columnRule3 thin solid (hex \"#000000\")\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"columnRule2","comment":" Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/).\nThis is a shorthand for the [`columnRuleWidth`](#columnRuleWidth),\n[`columnRuleStyle`](#columnRuleStyle), and [`columnRuleColor`](#columnRuleColor)\nproperties.\n\n columnRule thin\n\n columnRule2 thin solid\n\n columnRule3 thin solid (hex \"#000000\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Style"},{"name":"columnRule3","comment":" Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/).\nThis is a shorthand for the [`columnRuleWidth`](#columnRuleWidth),\n[`columnRuleStyle`](#columnRuleStyle), and [`columnRuleColor`](#columnRuleColor)\nproperties.\n\n columnRule thin\n\n columnRule2 thin solid\n\n columnRule3 thin solid (hex \"#000000\")\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value Css.LineStyle -> Css.Value.Value Css.Color -> Css.Style"},{"name":"columnRuleColor","comment":" Sets [`column-rule-color`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-color)\n\n columnRuleColor (rgb 0 0 0)\n\n columnRuleColor (hex \"#fff\")\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"columnRuleStyle","comment":" Sets [`column-rule-style`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-style)\n\n columnRuleStyle solid\n\n columnRuleStyle dotted\n\n columnRuleStyle dashed\n\n","type":"Css.BaseValue Css.LineStyle -> Css.Style"},{"name":"columnRuleWidth","comment":" Sets [`column-rule-width`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-width)\n\n columnRuleWidth thin\n\n columnRuleWidth (px 2)\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"columnSpan","comment":" Sets [`column-span`](https://css-tricks.com/almanac/properties/c/column-span/)\n\n columnSpan all_\n\n columnSpan none\n\n","type":"Css.BaseValue { none : Css.Value.Supported, all_ : Css.Value.Supported } -> Css.Style"},{"name":"columnWidth","comment":" Sets [`column-width`](https://css-tricks.com/almanac/properties/c/column-width/)\n\n columnWidth auto\n\n columnWidth (px 200)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported }) -> Css.Style"},{"name":"columns","comment":" Sets [`columns`](https://css-tricks.com/almanac/properties/c/columns/)\n\n columns (px 300)\n\n columns (num 2)\n\n columns2 (px 300) (num 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"columns2","comment":" Sets [`columns`](https://css-tricks.com/almanac/properties/c/columns/)\n\n columns (px 300)\n\n columns (num 2)\n\n columns2 (px 300) (num 2)\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported }) -> Css.Value.Value { auto : Css.Value.Supported, num : Css.Value.Supported } -> Css.Style"},{"name":"commonLigatures","comment":" The `common-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures commonLigatures\n\n","type":"Css.Value.Value { provides | commonLigatures : Css.Value.Supported }"},{"name":"compress","comment":" Sets `compress` value for usage with [`strokeDashJustify`](#strokeDashJustify).\n\n strokeDashJustify compress\n\n","type":"Css.Value.Value { provides | compress : Css.Value.Supported }"},{"name":"condensed","comment":" Sets `condensed` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay Condensed\n\n","type":"Css.Value.Value { provides | condensed : Css.Value.Supported }"},{"name":"contain","comment":" The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property.\n\n contain none\n\n contain content\n\n contain2 size layout\n\n contain3 size layout style\n\n contain4 -- all multiple choice values in use, no value entry needed\n\n","type":"Css.BaseValue { none : Css.Value.Supported, strict : Css.Value.Supported, content : Css.Value.Supported, size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Style"},{"name":"contain2","comment":" The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property.\n\nThis two-argument version lets you use 2 of the 4 multiple choice values you\ncan use for this property.\n\n contain2 size layout\n\n","type":"Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Style"},{"name":"contain3","comment":" The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property.\n\nThis two-argument version lets you use 3 of the 4 multiple choice values you\ncan use for this property.\n\n contain3 size layout style\n\n","type":"Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Style"},{"name":"contain4","comment":" The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property.\n\nThis 4-argument version lets you use all 4 multiple choice values you\ncan use for this property.\n\n contain4 size layout style paint\n\n**Note: The `style` value is considered at-risk from being depreciated.**\n\n","type":"Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Value.Value { size : Css.Value.Supported, inlineSize_ : Css.Value.Supported, layout : Css.Value.Supported, style : Css.Value.Supported, paint : Css.Value.Supported } -> Css.Style"},{"name":"containIntrinsicBlockSize","comment":" The [`contain-intrinsic-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-block-size)\nproperty.\n\nThis 1-argument variant lets you use global values, `none` and lengths.\n\n containIntrinsicBlockSize revert\n\n containIntrinsicBlockSize none\n\n -- specified block size\n containIntrinsicBlockSize (px 500)\n\n -- specified block size w/ auto\n containIntrinsicBlockSize2 auto (px 800)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"containIntrinsicBlockSize2","comment":" The [`contain-intrinsic-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-block-size)\nproperty.\n\nThis 2-argument variant lets you use lengths with `auto`.\n\nNote: The 1st argument can only be `auto`.\n\n containIntrinsicBlockSize revert\n\n containIntrinsicBlockSize none\n\n -- specified block size\n containIntrinsicBlockSize (px 500)\n\n -- specified block size w/ auto\n containIntrinsicBlockSize2 auto (px 800)\n\n","type":"Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Style"},{"name":"containIntrinsicHeight","comment":" The [`contain-intrinsic-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height)\nproperty.\n\nThis 1-argument variant lets you use global values, `none` and lengths.\n\n containIntrinsicHeight revert\n\n containIntrinsicHeight none\n\n -- specified height\n containIntrinsicHeight (px 500)\n\n -- specified height w/ auto\n containIntrinsicHeight2 auto (px 800)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"containIntrinsicHeight2","comment":" The [`contain-intrinsic-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height)\nproperty.\n\nThis 2-argument variant lets you use lengths with `auto`.\n\nNote: The 1st argument can only be `auto`.\n\n containIntrinsicHeight revert\n\n containIntrinsicHeight none\n\n -- specified height\n containIntrinsicHeight (px 500)\n\n -- specified height w/ auto\n containIntrinsicHeight2 auto (px 800)\n\n","type":"Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Style"},{"name":"containIntrinsicInlineSize","comment":" The [`contain-intrinsic-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size)\nproperty.\n\nThis 1-argument variant lets you use global values, `none` and lengths.\n\n containIntrinsicInlineSize revert\n\n containIntrinsicInlineSize none\n\n -- specified inline size\n containIntrinsicInlineSize (px 500)\n\n -- specified inline size w/ auto\n containIntrinsicInlineSize2 auto (px 800)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"containIntrinsicInlineSize2","comment":" The [`contain-intrinsic-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size)\nproperty.\n\nThis 2-argument variant lets you use lengths with `auto`.\n\nNote: The 1st argument can only be `auto`.\n\n containIntrinsicInlineSize revert\n\n containIntrinsicInlineSize none\n\n -- specified inline size\n containIntrinsicInlineSize (px 500)\n\n -- specified inline size w/ auto\n containIntrinsicInlineSize2 auto (px 800)\n\n","type":"Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Style"},{"name":"containIntrinsicSize","comment":" The [`contain-intrinsic-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)\nproperty.\n\nThis 1-argument variant lets you use global values, `none` and lengths for width and height.\n\n containIntrinsicSize revert\n\n containIntrinsicSize none\n\n -- width + height\n containIntrinsicSize (px 500)\n\n -- width | height\n containIntrinsicSize2 (rem 5) (px 800)\n\n -- width + height w/ auto\n containIntrinsicSize2 auto (px 800)\n\n -- width w/ auto | height w/ auto\n containIntrinsicSize4 auto (rem 50) auto (px 250)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"containIntrinsicSize2","comment":" The [`contain-intrinsic-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)\nproperty.\n\nThis 2-argument variant lets you use separate lengths for\nwidth and height or joined with and height with `auto`.\n\n containIntrinsicSize revert\n\n containIntrinsicSize none\n\n -- width + height\n containIntrinsicSize (px 500)\n\n -- width | height\n containIntrinsicSize2 (rem 5) (px 800)\n\n -- width + height w/ auto\n containIntrinsicSize2 auto (px 800)\n\n -- width w/ auto | height w/ auto\n containIntrinsicSize4 auto (rem 50) auto (px 250)\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported }) -> Css.Value.Value Css.Length -> Css.Style"},{"name":"containIntrinsicSize4","comment":" The [`contain-intrinsic-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)\nproperty.\n\nThis 4-argument variant lets you use separate lengths for\nwidth and height with `auto`.\n\nNote: The 1st and 3rd argument can only be `auto`.\n\n containIntrinsicSize revert\n\n containIntrinsicSize none\n\n -- width + height\n containIntrinsicSize (px 500)\n\n -- width | height\n containIntrinsicSize2 (rem 5) (px 800)\n\n -- width + height w/ auto\n containIntrinsicSize2 auto (px 800)\n\n -- width w/ auto | height w/ auto\n containIntrinsicSize4 auto (rem 50) auto (px 250)\n\n","type":"Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Style"},{"name":"containIntrinsicWidth","comment":" The [`contain-intrinsic-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width)\nproperty.\n\nThis 1-argument variant lets you use global values, `none` and lengths.\n\n containIntrinsicWidth revert\n\n containIntrinsicWidth none\n\n -- specified width\n containIntrinsicWidth (px 500)\n\n -- specified width w/ auto\n containIntrinsicWidth2 auto (px 800)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"containIntrinsicWidth2","comment":" The [`contain-intrinsic-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width)\nproperty.\n\nThis 2-argument variant lets you use lengths with `auto`.\n\nNote: The 1st argument can only be `auto`.\n\n containIntrinsicWidth revert\n\n containIntrinsicWidth none\n\n -- specified width\n containIntrinsicWidth (px 500)\n\n -- specified width w/ auto\n containIntrinsicWidth2 auto (px 800)\n\n","type":"Css.Value.Value { auto : Css.Value.Supported } -> Css.Value.Value Css.Length -> Css.Style"},{"name":"contain_","comment":" Sets `contain` for the following properties:\n\n - [`backgroundSize`](#backgroundSize) (It always show the whole background\n image, even if it leaves empty spaces on the sides.)\n - [`objectFit`](#objectFit) (Replaced content is scaled to maintain proportions within the element's content box.)\n - [`userSelect`](#userSelect) (Lets selection start within the element but that selection will be contained within that element's bounds.)\n - [`overscrollBehavior`](#overscrollBehavior) (This means that default scroll overflow behavior\n is observed inside the element, but scroll chaining will not happen to neighbouring elements.)\n\n```\nbackgroundSize contain_\n\noverscrollBehavior contain_\n```\n\nThe value is called `contain_` instead of `contain` because [`contain`](#contain) is already a property function.\n\n","type":"Css.Value.Value { provides | contain_ : Css.Value.Supported }"},{"name":"content","comment":" The `content` value used in the following properties:\n\n - [`flex`](#flex)\n - [`flex-basis`](#flexBasis)\n - [`contain`](#contain)\n\n```\nflexBasis content\n\ncontain content\n```\n\n","type":"Css.Value.Value { provides | content : Css.Value.Supported }"},{"name":"contentBox","comment":" The `content-box` value, used in the following properties:\n\n - [`boxSizing`](#boxSizing)\n - [`backgroundClip`](#backgroundClip)\n - [`backgroundOrigin`](#backgroundOrigin)\n - [`strokeOrigin`](#strokeOrigin)\n\n```\nboxSizing contentBox\n\nbackgroundClip contentBox\n\nbackgroundOrigin contentBox\n\nstrokeOrigin contentBox\n```\n\n","type":"Css.Value.Value { provides | contentBox : Css.Value.Supported }"},{"name":"contents","comment":" The `contents` value used by [`display`](#display).\n\n display contents\n\n","type":"Css.Value.Value { provides | contents : Css.Value.Supported }"},{"name":"contextMenu","comment":" The `context-menu` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | contextMenu : Css.Value.Supported }"},{"name":"contextual","comment":" The `contextual` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures contextual\n\n","type":"Css.Value.Value { provides | contextual : Css.Value.Supported }"},{"name":"contrast","comment":" Provides a [`contrast()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast).\n\n backdropFilter <| contrast (pct 20)\n -- backdrop-filter: contrast(20%);\n\n backdropFilter <| contrast zero -- completely gray\n\n backdropFilter <| contrast (num 1) -- no effect\n\n backdropFilter <| contrast (num 0.4)\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | contrast : Css.Value.Supported }"},{"name":"copy","comment":" The `copy` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | copy : Css.Value.Supported }"},{"name":"cover","comment":" Sets `cover` for the following properties:\n\n - [`backgroundSize`](#backgroundSize)\n - [`objectFit`](#objectFit)\n - [`strokeDashCorner`](#strokeDashCorner)\n - [`strokeSize`](#strokeSize)\n\n```\nbackgroundSize cover\n\nstrokeSize cover\n```\n\n","type":"Css.Value.Value { provides | cover : Css.Value.Supported }"},{"name":"crispEdges","comment":" Sets `crisp-edges` value for usage with [`imageRendering`](#imageRendering).\n\n imageRendering crispEdges\n\n","type":"Css.Value.Value { provides | crispEdges : Css.Value.Supported }"},{"name":"crop","comment":" Sets `crop` value for usage with [`strokeLinejoin`](#strokeLinejoin).\n\n strokeLinejoin crop\n\n","type":"Css.Value.Value { provides | crop : Css.Value.Supported }"},{"name":"crosshair","comment":" The `crosshair` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | crosshair : Css.Value.Supported }"},{"name":"cubicBezier","comment":" Produces the `cubic-bezier()` value used for properties such as [`animationTimingFunction`](#animationTimingFunction)\n\n animationTimingFunction (cubicBezier 0.2 0 0.5 1)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | cubicBezier : Css.Value.Supported }"},{"name":"cue","comment":" A [`::cue`](https://developer.mozilla.org/en-US/docs/Web/CSS/::cue)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n cue\n [ color (rgba 255 255 0 1)\n , fontWeight (int 600)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"currentcolor","comment":" The [`currentcolor`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword)\nvalue used by properties such as [`color`](#color), [`backgroundColor`](#backgroundColor)\n\n color currentcolor\n\n","type":"Css.Value.Value { provides | currentcolor : Css.Value.Supported }"},{"name":"cursive","comment":" The `cursive` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#3Cgeneric-name%3E).\n\n fontFamily cursive\n\n fontFamilyMany [ \"Brush Script Std\", \"Lucida Calligraphy\" ] cursive\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | cursive : Css.Value.Supported }"},{"name":"cursor","comment":" The [`cursor`](https://css-tricks.com/almanac/properties/c/cursor/)\nproperty.\n\n cursor notAllowed\n\n","type":"Css.BaseValue Css.CursorKeyword -> Css.Style"},{"name":"cursor2","comment":" The [`cursor`](https://css-tricks.com/almanac/properties/c/cursor/)\nproperty.\n\n cursor2 (url \"https://example.com\") move\n\n","type":"Css.Value.Value { url : Css.Value.Supported } -> Css.Value.Value Css.CursorKeyword -> Css.Style"},{"name":"cursor4","comment":" The [`cursor`](https://css-tricks.com/almanac/properties/c/cursor/)\nproperty.\n\n cursor4 (url \"https://example.com\") (num 34) zero move\n\n","type":"Css.Value.Value { url : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, zero : Css.Value.Supported, default_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, zero : Css.Value.Supported } -> Css.Value.Value Css.CursorKeyword -> Css.Style"},{"name":"customIdent","comment":" Produces an [`custom-ident`](https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident)\nvalue used by properties such as (but not limited to) [`listStyle`](#listStyle) and\n[`listStyleType`](#listStyleType).\n\n listStyleType (customIdent \"hello-world\")\n\n**Note:** This method does not do any checking if the identifierer supplied is valid.\n\n","type":"String.String -> Css.Value.Value { provides | customIdent : Css.Value.Supported }"},{"name":"darken","comment":" The `darken` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode darken\n\n","type":"Css.Value.Value { provides | darken : Css.Value.Supported }"},{"name":"dashed","comment":" The `dashed` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\n borderStyle dashed\n\n columnRuleStyle dashed\n\n textDecorationStyle dashed\n\nIt represents a line that consists of dashes.\n\n","type":"Css.Value.Value { provides | dashed : Css.Value.Supported }"},{"name":"dashes","comment":" Sets `dashes` value for usage with [`strokeDashJustify`](#strokeDashJustify).\n\n strokeDashJustify dashes\n\n","type":"Css.Value.Value { provides | dashes : Css.Value.Supported }"},{"name":"decimal","comment":" The `decimal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType decimal\n\n","type":"Css.Value.Value { provides | decimal : Css.Value.Supported }"},{"name":"decimalLeadingZero","comment":" The `decimal-leading-zero` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType decimalLeadingZero\n\n","type":"Css.Value.Value { provides | decimalLeadingZero : Css.Value.Supported }"},{"name":"default","comment":" A [`:default`](https://developer.mozilla.org/en-US/docs/Web/CSS/:default)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n default [ color (hex \"#ff0000\") ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"defaultBoxShadow","comment":" Default [`boxShadow`](#boxShadow) configuration.\n\nIt is equivalent to the following CSS:\n\n box-shadow: 0 0;\n\n","type":"Css.BoxShadowConfig"},{"name":"defaultTextShadow","comment":" Default [`textShadow`](#textShadow) configuration.\n\nIt is equivalent to the following CSS:\n\n text-shadow: 0 0;\n\n","type":"Css.TextShadowConfig"},{"name":"default_","comment":" The `default` value for the [`cursor`](#cursor) property.\n\nThis value is called `default_` instead of `default` because\n[`default` is already a pseudo-class function](#default).\n","type":"Css.Value.Value { provides | default_ : Css.Value.Supported }"},{"name":"defined","comment":" A [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n defined [ fontStyle italic ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"deg","comment":" A [`deg` angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)\n\n deg 360 -- one full circle\n\n deg 14.23\n\n","type":"Basics.Float -> Css.Value.Value { provides | deg : Css.Value.Supported }"},{"name":"dense","comment":" The `dense` value for the [`grid-auto-flow`](#gridAutoFlow) property.\n\n gridAutoFlow dense\n\n gridAutoFlow2 row dense\n\n","type":"Css.Value.Value { provides | dense : Css.Value.Supported }"},{"name":"devanagari","comment":" The `devanagari` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType devanagari\n\n","type":"Css.Value.Value { provides | devanagari : Css.Value.Supported }"},{"name":"diagonalFractions","comment":" The `diagonal-fractions` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric diagonalFractions\n\n","type":"Css.Value.Value { provides | diagonalFractions : Css.Value.Supported }"},{"name":"difference","comment":" The `difference` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode difference\n\n","type":"Css.Value.Value { provides | difference : Css.Value.Supported }"},{"name":"dir","comment":" A [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n dir rtl\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"Css.Value.Value { ltr : Css.Value.Supported, rtl : Css.Value.Supported } -> List.List Css.Style -> Css.Style"},{"name":"direction","comment":" Sets [`direction`](https://css-tricks.com/almanac/properties/d/direction/)\n\n direction ltr\n\n direction rtl\n\n","type":"Css.BaseValue { rtl : Css.Value.Supported, ltr : Css.Value.Supported } -> Css.Style"},{"name":"disabled","comment":" A [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n button [ disabled [ color (rgb 194 194 194) ] ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"disc","comment":" The `disc` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType disc\n\n","type":"Css.Value.Value { provides | disc : Css.Value.Supported }"},{"name":"disclosureClosed","comment":" The `disclosure-closed` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType disclosureClosed\n\n","type":"Css.Value.Value { provides | disclosureClosed : Css.Value.Supported }"},{"name":"disclosureOpen","comment":" The `disclosure-open` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType disclosureOpen\n\n","type":"Css.Value.Value { provides | disclosureOpen : Css.Value.Supported }"},{"name":"discretionaryLigatures","comment":" The `discretionary-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures discretionaryLigatures\n\n","type":"Css.Value.Value { provides | discretionaryLigatures : Css.Value.Supported }"},{"name":"display","comment":" Sets [`display`](https://css-tricks.com/almanac/properties/d/display/).\n\n display block\n\n**Note:** This function accepts `flex_` and `grid_` \nather than `flex` and `grid` because\n[`flex`](#flex) and [`grid`](#grid) are already property functions.\n\n","type":"Css.BaseValue { block : Css.Value.Supported, flex_ : Css.Value.Supported, flow : Css.Value.Supported, flowRoot : Css.Value.Supported, grid_ : Css.Value.Supported, listItem : Css.Value.Supported, inline : Css.Value.Supported, inlineBlock : Css.Value.Supported, inlineFlex : Css.Value.Supported, inlineGrid : Css.Value.Supported, inlineTable : Css.Value.Supported, none : Css.Value.Supported, contents : Css.Value.Supported, ruby : Css.Value.Supported, rubyBase : Css.Value.Supported, rubyBaseContainer : Css.Value.Supported, rubyText : Css.Value.Supported, rubyTextContainer : Css.Value.Supported, runIn : Css.Value.Supported, table : Css.Value.Supported, tableCaption : Css.Value.Supported, tableCell : Css.Value.Supported, tableColumn : Css.Value.Supported, tableColumnGroup : Css.Value.Supported, tableFooterGroup : Css.Value.Supported, tableHeaderGroup : Css.Value.Supported, tableRow : Css.Value.Supported, tableRowGroup : Css.Value.Supported } -> Css.Style"},{"name":"display2","comment":" Sets [`display`](https://css-tricks.com/almanac/properties/d/display/).\n\n display2 block flex_\n\n**Note:** This function accepts `flex_` and `grid_` \nather than `flex` and `grid` because\n[`flex`](#flex) and [`grid`](#grid) are already property functions.\n\nFor `display: inline list-item` and similar property values that include `list-item`\nlook at [`displayListItem2`](#displayListItem2) and [`displayListItem3`](#displayListItem3).\n\n","type":"Css.Value.Value { block : Css.Value.Supported, inline : Css.Value.Supported, runIn : Css.Value.Supported } -> Css.Value.Value { flow : Css.Value.Supported, flowRoot : Css.Value.Supported, table : Css.Value.Supported, flex_ : Css.Value.Supported, grid_ : Css.Value.Supported, ruby : Css.Value.Supported } -> Css.Style"},{"name":"displayListItem2","comment":" The [`display`](https://css-tricks.com/almanac/properties/d/display/) property.\nThis function is used to generate complex `display: list-item` properties\nsuch as `display: block list-item`.\n\n displayListItem2 block\n\n","type":"Css.Value.Value { block : Css.Value.Supported, inline : Css.Value.Supported, runIn : Css.Value.Supported, flow : Css.Value.Supported, flowRoot : Css.Value.Supported } -> Css.Style"},{"name":"displayListItem3","comment":" The [`display`](https://css-tricks.com/almanac/properties/d/display/) property.\nThis function is used to generate complex `display: list-item` properties\nsuch as `display: block flow-root list-item`.\n\n displayListItem3 block flowRoot\n\n","type":"Css.Value.Value { block : Css.Value.Supported, inline : Css.Value.Supported, runIn : Css.Value.Supported } -> Css.Value.Value { flow : Css.Value.Supported, flowRoot : Css.Value.Supported } -> Css.Style"},{"name":"dividedBy","comment":" Use with [`calc`](#calc) to divide a value by a unitless number.\n\n calc (pct 100) (dividedBy (int 2))\n -- calc: (100% / 2px)\n\n","type":"Css.Value.Value { num : Css.Value.Supported, int : Css.Value.Supported, zero : Css.Value.Supported } -> Css.CalcOperation"},{"name":"dot","comment":" The `dot` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis dot\n\n","type":"Css.Value.Value { provides | dot : Css.Value.Supported }"},{"name":"dotted","comment":" The `dotted` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\nIt represents a line that consists of dots.\n\n borderStyle dotted\n\n columnRuleStyle dotted\n\n textDecorationStyle dotted\n\n","type":"Css.Value.Value { provides | dotted : Css.Value.Supported }"},{"name":"double","comment":" The `double` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\n borderStyle double\n\n columnRuleStyle double\n\n textDecorationStyle double\n\nIt represents a double line: two lines side by side.\n\n","type":"Css.Value.Value { provides | double : Css.Value.Supported }"},{"name":"doubleCircle","comment":" The `doubleCircle` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis doubleCircle\n\n","type":"Css.Value.Value { provides | doubleCircle : Css.Value.Supported }"},{"name":"dropShadow","comment":" Provides a [`drop-shadow()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow).\n\n filter <| dropShadow (px 20) (px 3) (Just <| px 30) (Just <| hex \"#fff\")\n -- filter: drop-shadow(20px 4px 30px #fff);\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Maybe.Maybe (Css.Value.Value Css.Length) -> Maybe.Maybe (Css.Value.Value Css.Color) -> Css.Value.Value { provides | dropShadow : Css.Value.Supported }"},{"name":"eResize","comment":" The `e-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | eResize : Css.Value.Supported }"},{"name":"eachLine","comment":" The `each-line` value used for properties such as [`textIdent2`](#textIdent2).\n\n textIdent2 (px 20) eachLine\n\n","type":"Css.Value.Value { provides | eachLine : Css.Value.Supported }"},{"name":"ease","comment":" The `ease` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction ease\n\n","type":"Css.Value.Value { provides | ease : Css.Value.Supported }"},{"name":"easeIn","comment":" The `ease-in` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction easeIn\n\n","type":"Css.Value.Value { provides | easeIn : Css.Value.Supported }"},{"name":"easeInOut","comment":" The `ease-in-out` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction easeInOut\n\n","type":"Css.Value.Value { provides | easeInOut : Css.Value.Supported }"},{"name":"easeOut","comment":" The `ease-out` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction easeOut\n\n","type":"Css.Value.Value { provides | easeOut : Css.Value.Supported }"},{"name":"ellipse","comment":" Provides a one-argument `ellipse()` value.\n\n clipPath (ellipse (px 20) (px 10))\n\n clipPath (ellipse closestSide farthestSide)\n\n clipPath (ellipseAt closestSide (pct 10) left_)\n\n clipPath (ellipseAt (pct 20) (pct 10) (rem 5))\n\n clipPath (ellipseAt2 (rem 5) closestSide (rem 5) (rem 1))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value { provides | ellipse : Css.Value.Supported }"},{"name":"ellipseAt","comment":" Provides a 3-argument `ellipse( at )` value.\n\n clipPath (ellipseAt (pct 50) (pct 10) left_)\n\n clipPath (ellipseAt (rem 5) closestSide (rem 5))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value { provides | ellipseAt : Css.Value.Supported }"},{"name":"ellipseAt2","comment":" Provides a 4-argument `ellipse( at )` value.\n\n clipPath (ellipseAt2 (rem 6) closestSide (rem 5) (rem 1))\n\n clipPath (ellipseAt2 farthestSide (pct 10) left_ top_)\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, closestSide : Css.Value.Supported, farthestSide : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value { provides | ellipseAt2 : Css.Value.Supported }"},{"name":"ellipsis","comment":" Sets `ellipsis` value for usage with [`textOverflow`](#textOverflow).\n\n textOverflow ellipsis\n\n","type":"Css.Value.Value { provides | ellipsis : Css.Value.Supported }"},{"name":"em","comment":" [`em`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (em 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | em : Css.Value.Supported }"},{"name":"embed","comment":" Sets `embed` value for usage with [`unicodeBidi`](#unicodeBidi).\n\n unicodeBidi embed\n\n","type":"Css.Value.Value { provides | embed : Css.Value.Supported }"},{"name":"emoji","comment":" The `emoji` value used with [`fontFamily`](#fontFamily), [`fontFamilyMany`](#fontFamilyMany) and [`fontVariantEmoji`](#fontVariantEmoji).\n\n fontFamily emoji\n\n fontVariantEmoji emoji\n","type":"Css.Value.Value { provides | emoji : Css.Value.Supported }"},{"name":"empty","comment":" An [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n empty\n [ backgroundColor (rgb 20 20 20)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"emptyCells","comment":" Sets [`empty-cells`](https://css-tricks.com/almanac/properties/e/empty-cells/).\n\n emptyCells show\n\n emptyCells hide\n\n","type":"Css.BaseValue { show : Css.Value.Supported, hide : Css.Value.Supported } -> Css.Style"},{"name":"enabled","comment":" An [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n enabled\n [ borderColor (rgba 150 150 0 0.5)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"end","comment":" The `end` value.\n\nIt's used in the following properties as a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/):\n\n - [`alignItems`](#alignItems)\n - [`alignContent`](#alignContent)\n - [`alignSelf`](#alignSelf)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n\n\n```\nalignContent end\n\njustifyItems end\n\n```\n\nIt's also used as an animation keyword used in [`steps2`](#steps2).\n\n```\nsteps2 3 end\n```\n\n","type":"Css.Value.Value { provides | end : Css.Value.Supported }"},{"name":"ethiopicNumeric","comment":" The `ethiopic-numeric` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType ethiopicNumeric\n\n","type":"Css.Value.Value { provides | ethiopicNumeric : Css.Value.Supported }"},{"name":"ewResize","comment":" The `ew-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | ewResize : Css.Value.Supported }"},{"name":"ex","comment":" [`ex`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (ex 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | ex : Css.Value.Supported }"},{"name":"exclude","comment":" Sets `exclude` value for usage with [`maskComposite`](#maskComposite).\n\n maskComposite exclude\n\n","type":"Css.Value.Value { provides | exclude : Css.Value.Supported }"},{"name":"exclusion","comment":" The `exclusion` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode exclusion\n\n","type":"Css.Value.Value { provides | exclusion : Css.Value.Supported }"},{"name":"expanded","comment":" Sets `expanded` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay Expanded\n\n","type":"Css.Value.Value { provides | expanded : Css.Value.Supported }"},{"name":"extraCondensed","comment":" Sets `extra-condensed` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay extraCondensed\n\n","type":"Css.Value.Value { provides | extraCondensed : Css.Value.Supported }"},{"name":"extraExpanded","comment":" Sets `extra-expanded` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay extraExpanded\n\n","type":"Css.Value.Value { provides | extraExpanded : Css.Value.Supported }"},{"name":"fallback","comment":" Sets `fallback` value for usage with [`fontDisplay`](#fontDisplay) or [`strokeLinejoin`](#strokeLinejoin2).\n\n fontDisplay fallback\n\n strokeLinejoin2 miter fallback\n\n","type":"Css.Value.Value { provides | fallback : Css.Value.Supported }"},{"name":"fangsong","comment":" The `fangsong` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily fangsong\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | fangsong : Css.Value.Supported }"},{"name":"fantasy","comment":" The `fantasy` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#3Cgeneric-name%3E).\n\n fontFamily fantasy\n fontFamilyMany [ \"Herculanum\", \"Harrington\" ] fantasy\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | fantasy : Css.Value.Supported }"},{"name":"farthestSide","comment":" The `farthest-side` value for use in [circle](#circle) and [ellipse](#ellipse) shapes.\n\n clipPath (circleAt farthestSide (pct 20))\n\n clipPath (ellipseAt farthestSide (px 2) (pct 20))\n\n","type":"Css.Value.Value { provides | farthestSide : Css.Value.Supported }"},{"name":"featureTag","comment":" Creates a [feature-tag-value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings#feature-tag-value)\nfor use with [`fontFeatureSettings`](#fontFeatureSettings)\nand [`fontFeatureSettingsMany`](#fontFeatureSettingsMany)\n\n featureTag \"smcp\"\n\n","type":"String.String -> Css.Value.Value { provides | featureTag : Css.Value.Supported }"},{"name":"featureTag2","comment":" Creates a [feature-tag-value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings#feature-tag-value)\nwith an specific value\nfor use with [`fontFeatureSettings`](#fontFeatureSettings)\nand [`fontFeatureSettingsMany`](#fontFeatureSettingsMany)\n\n featureTag2 \"swsh\" 2\n\n","type":"String.String -> Basics.Int -> Css.Value.Value { provides | featureTag : Css.Value.Supported }"},{"name":"fill","comment":" Sets [`fill`](https://css-tricks.com/almanac/properties/f/fill/)\n**Note:** `fill` also accepts the patterns of SVG shapes that are defined inside of a [`defs`](https://css-tricks.com/snippets/svg/svg-patterns/) element.\n\n fill (hex \"#60b5cc\")\n\n fill (rgb 96 181 204)\n\n fill (rgba 96 181 204 0.5)\n\n fill (url \"#pattern\")\n\n","type":"Css.BaseValue (Css.ColorSupported { url : Css.Value.Supported }) -> Css.Style"},{"name":"fillBox","comment":" The `fill-box` value used by [`strokeOrigin`](#strokeOrigin)\nand [`transformBox`](#transformBox).\n\n strokeOrigin fillBox\n\n transformBox fillBox\n\n","type":"Css.Value.Value { provides | fillBox : Css.Value.Supported }"},{"name":"fill_","comment":" The `fill` value used in properties such as [`objectFit`](#objectFit),\n[`pointerEvents`](#pointerEvents), [`paintOrder`](#paintOrder) and [`maskBorderSlice`](#maskBorderSlice).\n\n objectFit fill_\n\n pointerEvents fill_\n\n paintOrder2 fill_ markers\n\n maskBorderSlice4 fill_ (num 20) (pct 10) (num 45)\n\n\nThe value is called `fill_` instead of `fill` because [`fill`](#fill) is already a property function.\n","type":"Css.Value.Value { provides | fill_ : Css.Value.Supported }"},{"name":"filled","comment":" The `filled` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis filled\n\n","type":"Css.Value.Value { provides | filled : Css.Value.Supported }"},{"name":"filter","comment":" The [`filter`](https://css-tricks.com/almanac/properties/f/filter/) property.\n\nThis single-argument version lets you use global value keywords, as\nwell as `none`, URLs to SVG filters and single filter functions.\n\nIf you want to stack filter functions, use [`filterMany`](#filterMany).\n\n filter <| blur (px 6)\n\n filter <| grayscale (pct 60)\n\n filter <| url \"thing.svg#filter1\"\n\n filter none\n\n filter inherit\n\n filterMany [] -- unset\n\n filterMany [ invert (pct 70), sepia(pct 50) ]\n","type":"Css.BaseValue (Css.FilterFunctionSupported { url : Css.Value.Supported, none : Css.Value.Supported }) -> Css.Style"},{"name":"filterMany","comment":" The [`filter`](https://css-tricks.com/almanac/properties/b/backdrop-filter/) property.\n\nThis multi-argument version lets you stack multiple filter functions and URLs to SVG filters.\nAn empty list will create an `unset` value.\n\n filterMany [] -- unset\n\n filterMany [ invert (pct 70), sepia(pct 50) ]\n\n","type":"List.List (Css.Value.Value (Css.FilterFunctionSupported { url : Css.Value.Supported })) -> Css.Style"},{"name":"first","comment":" A [`:first`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n first\n [ marginTop (pct 30)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"firstBaseline","comment":" The `first baseline` value used for properties such as [`alignContent`](#alignContent),\n[`alignItems`](#alignItems),\nand [`alignSelf`](#alignSelf).\n\n alignItems firstBaseline\n\n","type":"Css.Value.Value { provides | firstBaseline : Css.Value.Supported }"},{"name":"firstChild","comment":" A [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n firstChild\n [ fontWeight bold\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"firstLetter","comment":" A [`::first-letter`](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n firstLetter\n [ fontSize (rem 2)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"firstLine","comment":" A [`::first-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n firstLine\n [ fontWeight (int 600)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"firstOfType","comment":" A [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n firstOfType\n [ color (rgb 255 0 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"first_","comment":" Sets `first` value for usage with [`hangingPunctuation`](#hangingPunctuation).\n\n hangingPunctuation first_\n\n\nThis is called `first_` instead of `first` because\n[`first` is already a pseudo-class function](#first).\n\n","type":"Css.Value.Value { provides | first_ : Css.Value.Supported }"},{"name":"fitContent","comment":" The `fit-content` value used for properties such as:\n\n - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize))\n\n - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth))\n\n - [`flexBasis`](#flexBasis)\n\n```\nwidth fitContent\n```\n\n","type":"Css.Value.Value { provides | fitContent : Css.Value.Supported }"},{"name":"fitContentTo","comment":" The [`fit-content()`](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function)\nvalue that can have a length or percentage value that you want the property to be clamped to.\n\nNot to be confused with the [`fitContent`](#fitContent) value for flex properties.\n\n gridAutoColumns (fitContentTo (pct 100))\n\n height (fitContentTo (rem 20))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | fitContentTo : Css.Value.Supported }"},{"name":"fixed","comment":" A [`fixed` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values)\nor [`fixed` `background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#Values)\nor [`fixed` `table-layout`](https://css-tricks.com/almanac/properties/t/table-layout/).\n\n position fixed\n\n backgroundAttachment fixed\n\n tableLayout fixed\n\nThe default `position` value is [`static`](#static). See also [`position: sticky`](#sticky), and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)\n\n","type":"Css.Value.Value { provides | fixed : Css.Value.Supported }"},{"name":"fixedRepeat","comment":" Performs the `repeat()` function used in CSS Grid track lists. This lets you\nrepeat a pattern of grid lines in CSS Grid without duplicating code.\n\nThis is the fixed variant of the repeat() function. In this variant, you must\nspecify a `num` before specifying the track list pattern you want to repeat.\n\n gridTemplate <|\n templateRowsColumns\n ( trackList\n ( lineNames [\"line1\", \"line2\"] )\n [ px 300\n , lineNames [\"line3\"]\n ]\n )\n \n ( autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n )\n","type":"Css.Value.Value { num : Css.Value.Supported } -> List.List (Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, fr : Css.Value.Supported, minmax : Css.Value.Supported, lineNames : Css.Value.Supported })) -> Css.Value.Value { provides | fixedRepeat : Css.Value.Supported }"},{"name":"flat","comment":" The `flat` value used in the [`transformStyle`](#transformStyle) property.\n\n transformStyle flat\n\n","type":"Css.Value.Value { provides | flat : Css.Value.Supported }"},{"name":"flex","comment":" The [`flex`](https://css-tricks.com/almanac/properties/f/flex/) shorthand property.\n\n flex none\n\n flex auto\n\n flex (num 1)\n\n","type":"Css.BaseValue (Css.WidthSupported { none : Css.Value.Supported, content : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"flex2","comment":" The [`flex`](https://css-tricks.com/almanac/properties/f/flex/) shorthand property.\n\n flex2 zero auto\n\n","type":"Css.Value.Value { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Value.Value (Css.WidthSupported { content : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"flex3","comment":" The [`flex`](https://css-tricks.com/almanac/properties/f/flex/) shorthand property.\n\n flex3 (num 1) zero (pct 50)\n\n","type":"Css.Value.Value { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Value.Value (Css.WidthSupported { content : Css.Value.Supported }) -> Css.Style"},{"name":"flexBasis","comment":" Sets [`flex-basis`](https://css-tricks.com/almanac/properties/f/flex-basis/).\n\n flexBasis (em 10)\n\n flexBasis (px 3)\n\n flexBasis (pct 100)\n\n flexBasis auto\n\n","type":"Css.BaseValue (Css.WidthSupported { content : Css.Value.Supported }) -> Css.Style"},{"name":"flexDirection","comment":" Sets [`flex-direction`](https://css-tricks.com/almanac/properties/f/flex-direction/).\n\n flexDirection column\n\n","type":"Css.BaseValue { row : Css.Value.Supported, rowReverse : Css.Value.Supported, column : Css.Value.Supported, columnReverse : Css.Value.Supported } -> Css.Style"},{"name":"flexEnd","comment":" The `flex-end` value used by [`alignItems`](#alignItems),\n[`justifyContent`](#justifyContent),\nand [`alignContent`](#alignContent).\n\n alignItems flexEnd\n\n justifyContent flexEnd\n\n alignContent flexEnd\n\n","type":"Css.Value.Value { provides | flexEnd : Css.Value.Supported }"},{"name":"flexFlow","comment":" The [`flex-flow`](https://css-tricks.com/almanac/properties/f/flex-flow/) shorthand property.\n\n flexFlow rowReverse\n\n flexFlow wrap\n\n flexFlow inherit\n\n flexFlow2 column wrapReverse\n\n","type":"Css.BaseValue { row : Css.Value.Supported, rowReverse : Css.Value.Supported, column : Css.Value.Supported, columnReverse : Css.Value.Supported, nowrap : Css.Value.Supported, wrap : Css.Value.Supported, wrapReverse : Css.Value.Supported } -> Css.Style"},{"name":"flexFlow2","comment":" The [`flex-flow`](https://css-tricks.com/almanac/properties/f/flex-flow/) shorthand property.\n\n flexFlow rowReverse\n\n flexFlow wrap\n\n flexFlow inherit\n\n flexFlow2 column wrapReverse\n\n","type":"Css.Value.Value { row : Css.Value.Supported, rowReverse : Css.Value.Supported, column : Css.Value.Supported, columnReverse : Css.Value.Supported } -> Css.Value.Value { nowrap : Css.Value.Supported, wrap : Css.Value.Supported, wrapReverse : Css.Value.Supported } -> Css.Style"},{"name":"flexGrow","comment":" Sets [`flex-grow`](https://css-tricks.com/almanac/properties/f/flex-grow/).\n\n flexGrow (num 3)\n\n flexGrow (num 0.6)\n\n","type":"Css.BaseValue { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Style"},{"name":"flexShrink","comment":" Sets [`flex-shrink`](https://css-tricks.com/almanac/properties/f/flex-shrink/).\n\n flexShrink (num 2)\n\n flexShrink (num 0.6)\n\n","type":"Css.BaseValue { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported } -> Css.Style"},{"name":"flexStart","comment":" The `flex-start` value used by [`alignItems`](#alignItems),\n[`justifyContent`](#justifyContent),\nand [`alignContent`](#alignContent).\n\n alignItems flexStart\n\n justifyContent flexStart\n\n alignContent flexStart\n\n","type":"Css.Value.Value { provides | flexStart : Css.Value.Supported }"},{"name":"flexWrap","comment":" Sets [`flex-wrap`](https://css-tricks.com/almanac/properties/f/flex-wrap/).\n\n flexWrap wrap\n\n flexWrap wrapReverse\n\n flexWrap nowrap\n\n","type":"Css.BaseValue { nowrap : Css.Value.Supported, wrap : Css.Value.Supported, wrapReverse : Css.Value.Supported } -> Css.Style"},{"name":"flex_","comment":" The `flex` value used by [`display`](#display).\n\n display flex_\n\nThe value is called `flex_` instead of `flex` because [`flex` is already a property function](#flex).\n\n","type":"Css.Value.Value { provides | flex_ : Css.Value.Supported }"},{"name":"float","comment":" Sets [`float`](https://css-tricks.com/almanac/properties/f/float/).\n\n float none\n\n float left_\n\n float right_\n\n float inlineStart\n\n","type":"Css.BaseValue { none : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, inlineStart : Css.Value.Supported, inlineEnd : Css.Value.Supported } -> Css.Style"},{"name":"flow","comment":" The `flow` value used by [`display`](#display).\n\n display flow\n\n","type":"Css.Value.Value { provides | flow : Css.Value.Supported }"},{"name":"flowRoot","comment":" The `flow-root` value used by [`display`](#display).\n\n display flowRoot\n\n","type":"Css.Value.Value { provides | flowRoot : Css.Value.Supported }"},{"name":"focus","comment":" A [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n focus\n [ border3 (px 2) solid (rgb 0 0 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"fontDisplay","comment":" Sets [`font-display`](https://css-tricks.com/almanac/properties/f/font-display/)\n\n fontDisplay auto\n\n fontDisplay block\n\n fontDisplay swap\n\n fontDisplay fallback\n\n fontDisplay optional\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, block : Css.Value.Supported, swap : Css.Value.Supported, fallback : Css.Value.Supported, optional : Css.Value.Supported } -> Css.Style"},{"name":"fontFamily","comment":" For when your font is one of the six [generic font family names](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E) - [`serif`](#serif), [`sansSerif`](#sansSerif), [`monospace`](#monospace), [`cursive`](#cursive), [`fantasy`](#fantasy), or [`systemUi`](#systemUi).\n\nIf you want to refer to a font by its name (like Helvetica or Arial), use [`fontFamilyMany`](#fontFamilyMany) instead.\n\n","type":"Css.BaseValue { serif : Css.Value.Supported, sansSerif : Css.Value.Supported, monospace : Css.Value.Supported, cursive : Css.Value.Supported, fantasy : Css.Value.Supported, systemUi : Css.Value.Supported, uiSerif : Css.Value.Supported, uiSansSerif : Css.Value.Supported, uiMonospace : Css.Value.Supported, uiRounded : Css.Value.Supported, emoji : Css.Value.Supported, math : Css.Value.Supported, fangsong : Css.Value.Supported } -> Css.Style"},{"name":"fontFamilyMany","comment":" Define multiple [font families](https://css-tricks.com/almanac/properties/f/font-family/).\n\nPer the CSS spec, a [generic name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E) must always be at the end of this list. (The generic names are [`serif`](#serif), [`sansSerif`](#sansSerif), [`monospace`](#monospace), [`cursive`](#cursive) or [`fantasy`](#fantasy).)\n\n fontFamilyMany [ \"Gill Sans Extrabold\", \"Helvetica\", \"Arial\" ] sansSerif\n\nThis function will automatically wrap each font family in quotation marks unless it is one of the six [generic names]((https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E)) (like `sans-serif`), which must never be quoted.\n\n","type":"List.List String.String -> Css.Value.Value { serif : Css.Value.Supported, sansSerif : Css.Value.Supported, monospace : Css.Value.Supported, cursive : Css.Value.Supported, fantasy : Css.Value.Supported, systemUi : Css.Value.Supported, uiSerif : Css.Value.Supported, uiSansSerif : Css.Value.Supported, uiMonospace : Css.Value.Supported, uiRounded : Css.Value.Supported, emoji : Css.Value.Supported, math : Css.Value.Supported, fangsong : Css.Value.Supported } -> Css.Style"},{"name":"fontFeatureSettings","comment":" Sets [`font-feature-settings`](https://css-tricks.com/almanac/properties/f/font-feature-settings/)\n\n fontFeatureSettings normal\n\n fontFeatureSettings (featureTag \"liga\")\n\n fontFeatureSettings (featureTag2 \"swsh\" 2)\n\n","type":"Css.BaseValue { featureTag : Css.Value.Supported, normal : Css.Value.Supported } -> Css.Style"},{"name":"fontFeatureSettingsMany","comment":" Sets [`font-feature-settings`](https://css-tricks.com/almanac/properties/f/font-feature-settings/)\nin a way that lets you add a list of [`featureTag`](#featureTag)s.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n fontFeatureSettingsMany featureTag \"liga\" [ featureTag2 \"swsh\" 2 ]\n\n fontFeatureSettingsMany [] -- font-feature-settings: unset;\n\n","type":"List.List (Css.Value.Value { featureTag : Css.Value.Supported }) -> Css.Style"},{"name":"fontKerning","comment":" The [`font-kerning`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) property.\n\n fontKerning none\n\n","type":"Css.BaseValue { none : Css.Value.Supported, auto : Css.Value.Supported, normal : Css.Value.Supported } -> Css.Style"},{"name":"fontLanguageOverride","comment":" The [`font-language-override`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override) property.\n\n fontLanguageOverride normal\n\n fontLanguageOverride (string \"ENG\")\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, string : Css.Value.Supported } -> Css.Style"},{"name":"fontOpticalSizing","comment":" The [`font-optical-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) property.\n\n fontOpticalSizing none\n\n","type":"Css.BaseValue { none : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"fontSize","comment":" Sets [`font-size`](https://css-tricks.com/almanac/properties/f/font-size/)\n\n fontSize xxSmall\n\n fontSize (px 12)\n\nCheck out [fluid typography](https://css-tricks.com/snippets/css/fluid-typography/) for some cool stuff you can do with this.\n\n","type":"Css.BaseValue (Css.LengthSupported { xxSmall : Css.Value.Supported, xSmall : Css.Value.Supported, small : Css.Value.Supported, medium : Css.Value.Supported, large : Css.Value.Supported, xLarge : Css.Value.Supported, xxLarge : Css.Value.Supported, xxxLarge : Css.Value.Supported, smaller : Css.Value.Supported, larger : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"fontSizeAdjust","comment":" Sets [`font-size-adjust`](https://css-tricks.com/almanac/properties/f/font-size-adjust/)\n\n fontSizeAdjust zero\n\n fontSizeAdjust none\n\n fontSizeAdjust (num 0.5)\n\n","type":"Css.BaseValue { none : Css.Value.Supported, zero : Css.Value.Supported, num : Css.Value.Supported } -> Css.Style"},{"name":"fontStretch","comment":" Sets [`font-stretch`](https://css-tricks.com/almanac/properties/f/font-stretch/)\n\n fontStretch ultraCondensed\n\n fontStretch extraCondensed\n\n fontStretch condensed\n\n fontStretch semiCondensed\n\n fontStretch normal\n\n fontStretch semiExpanded\n\n fontStretch expanded\n\n fontStretch extraExpanded\n\n fontStretch ultraExpanded\n\n fontStretch (pct 100)\n\n","type":"Css.BaseValue { ultraCondensed : Css.Value.Supported, extraCondensed : Css.Value.Supported, condensed : Css.Value.Supported, semiCondensed : Css.Value.Supported, normal : Css.Value.Supported, semiExpanded : Css.Value.Supported, expanded : Css.Value.Supported, extraExpanded : Css.Value.Supported, ultraExpanded : Css.Value.Supported, pct : Css.Value.Supported } -> Css.Style"},{"name":"fontStyle","comment":" Sets [`font-style`](https://css-tricks.com/almanac/properties/f/font-style/)\n\n fontStyle italic\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, italic : Css.Value.Supported, oblique : Css.Value.Supported } -> Css.Style"},{"name":"fontSynthesis","comment":" The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property.\n\n fontSynthesis none\n\n fontSynthesis smallCaps\n\n fontSynthesis2 smallCaps weight\n\n fontSynthesis3 weight style smallCaps\n\n","type":"Css.BaseValue { none : Css.Value.Supported, weight : Css.Value.Supported, style : Css.Value.Supported, smallCaps : Css.Value.Supported } -> Css.Style"},{"name":"fontSynthesis2","comment":" The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property.\n\nThis is the two-argument variant, in which you can indicate\ntwo different font properties to be synthesised by the browser.\n\n fontSynthesis2 smallCaps weight\n\n","type":"Css.Value.Value { weight : Css.Value.Supported, style : Css.Value.Supported, smallCaps : Css.Value.Supported } -> Css.Value.Value { weight : Css.Value.Supported, style : Css.Value.Supported, smallCaps : Css.Value.Supported } -> Css.Style"},{"name":"fontSynthesis3","comment":" The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property.\n\nThis is the three-argument variant, in which you can indicate\nall three different font properties to be synthesised by the browser.\n\n fontSynthesis3 weight style smallCaps\n\n","type":"Css.Value.Value { weight : Css.Value.Supported } -> Css.Value.Value { style : Css.Value.Supported } -> Css.Value.Value { smallCaps : Css.Value.Supported } -> Css.Style"},{"name":"fontVariant","comment":" The [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)\nCSS property.\n\nThis is a shorthand property, encapsulating the following:\n- [`fontVariantCaps`](#fontVariantCaps)\n- [`fontVariantEastAsian`](#fontVariantEastAsian)\n- [`fontVariantLigatures`](#fontVariantLigatures)\n- [`fontVariantNumeric`](#fontVariantNumeric)\n- [`fontVariantEmoji`](#fontVariantEmoji)\n- [`fontVariantPosition`](#fontVariantPosition)\n\n```\nfontVariant inherit\n\nfontVariant normal\n\nfontVariant jis83\n\nfontVariant2 commonLigatures smallCaps\n\nfontVariant2 noCommonLigatures slashedZero\n```\n","type":"Css.BaseValue (Css.AllFontVariantsSupported { none : Css.Value.Supported, normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariant2","comment":" The [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)\nCSS property.\n\nThis is a shorthand property, encapsulating the following:\n- [`fontVariantCaps`](#fontVariantCaps)\n- [`fontVariantEastAsian`](#fontVariantEastAsian)\n- [`fontVariantLigatures`](#fontVariantLigatures)\n- [`fontVariantNumeric`](#fontVariantNumeric)\n- [`fontVariantEmoji`](#fontVariantEmoji)\n- [`fontVariantPosition`](#fontVariantPosition)\n\n```\nfontVariant inherit\n\nfontVariant normal\n\nfontVariant jis83\n\nfontVariant2 commonLigatures smallCaps\n\nfontVariant2 noCommonLigatures slashedZero\n```\n","type":"Css.Value.Value Css.AllFontVariants -> Css.Value.Value Css.AllFontVariants -> Css.Style"},{"name":"fontVariantCaps","comment":" Sets [`font-variant-caps`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps).\n\n fontVariantCaps normal\n\n fontVariantCaps smallCaps\n\n fontVariantCaps allSmallCaps\n\n fontVariantCaps petiteCaps\n\n fontVariantCaps allPetiteCaps\n\n fontVariantCaps unicase\n\n fontVariantCaps titlingCaps\n\n","type":"Css.BaseValue (Css.FontVariantCapsSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantEastAsian","comment":" The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property.\n\nThis property controls the use of alternative glyphs for East Asian scripts.\n\n fontVariantEastAsian normal\n\n fontVariantEastAsian2 ruby jis83\n\n fontVariantEastAsian3 ruby jis90 fullWidth\n\n","type":"Css.BaseValue (Css.FontVariantEastAsianSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantEastAsian2","comment":" The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property.\n\nThis property controls the use of alternative glyphs for East Asian scripts.\n\n fontVariantEastAsian2 ruby jis83\n\n","type":"Css.Value.Value Css.FontVariantEastAsian -> Css.Value.Value Css.FontVariantEastAsian -> Css.Style"},{"name":"fontVariantEastAsian3","comment":" The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property.\n\nThis property controls the use of alternative glyphs for East Asian scripts.\n\n fontVariantEastAsian3 ruby jis90 fullWidth\n\n","type":"Css.Value.Value { ruby : Css.Value.Supported } -> Css.Value.Value { jis78 : Css.Value.Supported, jis83 : Css.Value.Supported, jis90 : Css.Value.Supported, jis04 : Css.Value.Supported, simplified : Css.Value.Supported, traditional : Css.Value.Supported } -> Css.Value.Value { fullWidth : Css.Value.Supported, proportionalWidth : Css.Value.Supported } -> Css.Style"},{"name":"fontVariantEmoji","comment":" The [`font-variant-emoji`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji)\nproperty.\n\n fontVariantEmoji unset\n\n fontVariantEmoji emoji\n\n fontVariantEmoji normal\n","type":"Css.BaseValue (Css.FontVariantEmojiSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantLigatures","comment":" Sets [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures).\n\n fontVariantLigatures discretionaryLigatures\n\n fontVariantLigatures none\n\n","type":"Css.BaseValue (Css.FontVariantLigaturesSupported { normal : Css.Value.Supported, none : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantNumeric","comment":" Sets [`font-variant-numeric`](https://css-tricks.com/almanac/properties/f/font-variant-numeric/).\n\n fontVariantNumeric ordinal\n\n fontVariantNumericMany [ slashedZero liningNums ]\n\n","type":"Css.BaseValue (Css.FontVariantNumericSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantNumeric4","comment":" Sets [`font-variant-numeric`](https://css-tricks.com/almanac/properties/f/font-variant-numeric/).\n\nThis one can be tricky to use because many of the options are mutually exclusive.\nFor example, `normal` cannot be used with any of the others, so the only way\nto get it from this function is to pass `Nothing` for everything. The other\narguments are chosen such that you can choose between the mutually exclusive\nvalues, or leave that value off.\n\n fontVariantNumeric ordinal\n\n fontVariantNumeric4 Nothing Nothing Nothing Nothing -- \"normal\"\n\n fontVariantNumeric4\n (Just ordinal)\n Nothing\n (Just tabularNums)\n Nothing\n -- \"ordinal tabular-nums\"\n\n","type":"Maybe.Maybe (Css.Value.Value { ordinal : Css.Value.Supported, slashedZero : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { liningNums : Css.Value.Supported, oldstyleNums : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { proportionalNums : Css.Value.Supported, tabularNums : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { diagonalFractions : Css.Value.Supported, stackedFractions : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariantPosition","comment":" The [`font-variant-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position) property.\n\n fontVariantPosition sub\n\n fontVariantPosition normal\n\n","type":"Css.BaseValue (Css.FontVariantPositionSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"fontVariationSettings","comment":" The 1-argument variant of the [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)\nproperty.\n\nFor controlling aspects of variable fonts.\nUse [`fontVariationSettingsMany`](#fontVariationSettingsMany) to work with variable font tags.\n\n fontVariationSettings normal\n\n fontVariationSettings inherit\n\n fontVariationSettingsMany [ (\"XHGT\", 0.7) ]\n","type":"Css.BaseValue { normal : Css.Value.Supported } -> Css.Style"},{"name":"fontVariationSettingsMany","comment":" The multi-argument variant of the [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)\nproperty.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\nFor using single keywords with this property, use [`fontVariationSettings`](#fontVariationSettings).\n\n fontVariationSettingsMany [ (\"XHGT\", 0.7) ]\n\n fontVariationSettingsMany [] -- font-variation-settings: unset;\n","type":"List.List ( String.String, Basics.Float ) -> Css.Style"},{"name":"fontWeight","comment":" Sets [`font-weight`](https://css-tricks.com/almanac/properties/f/font-weight/)\n\n fontWeight bold\n\n fontWeight (int 300)\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, bold : Css.Value.Supported, bolder : Css.Value.Supported, lighter : Css.Value.Supported, int : Css.Value.Supported } -> Css.Style"},{"name":"forceEnd","comment":" Sets `force-end` value for usage with [`hangingPunctuation`](#hangingPunctuation).\n\n hangingPunctuation forceEnd\n\n","type":"Css.Value.Value { provides | forceEnd : Css.Value.Supported }"},{"name":"forwards","comment":" The `forwards` value used for functions like [`animationFillMode`](#animationFillMode)\n\n animationFillMode forwards\n\n","type":"Css.Value.Value { provides | forwards : Css.Value.Supported }"},{"name":"fr","comment":" [`fr`](https://css-tricks.com/introduction-fr-css-unit/) flex units.\n\n gridAutoColumns (fr 1)\n","type":"Basics.Float -> Css.Value.Value { provides | fr : Css.Value.Supported }"},{"name":"fromFont","comment":" Sets the `from-font` value for usage with [`textDecorationThickness`](#textDecorationThickness).\n\n textDecorationThickness fromFont\n\n","type":"Css.Value.Value { provides | fromFont : Css.Value.Supported }"},{"name":"fullSizeKana","comment":" The `full-size-kana` value used by [`textTransform`](#textTransform)\n\ntextTransform fullSizeKana\n\n","type":"Css.Value.Value { provedes | fullSizeKana : Css.Value.Supported }"},{"name":"fullWidth","comment":" A `full-width` value for:\n\n\n### [`textTransform`](#textTransform)\n\nForces the writing of characters in a square so they can be aligned in East Asian scripts.\n\n\n### [`fontVariantEastAsian`](#fontVariantEastAsian)\n\nActivates the East Asian characters that are roughly be the same width.\n\n textTransform fullWidth\n\n fontVariantEastAsian fullWidth\n\n","type":"Css.Value.Value { provides | fullWidth : Css.Value.Supported }"},{"name":"fullscreen","comment":" A [`:fullscreen`](https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n fullscreen\n [ backgroundColor (rgb 0 0 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"gap","comment":" Sets the [`gap`](https://css-tricks.com/almanac/properties/g/gap/) property.\n\nThe `gap` property is a shorthand for setting `row-gap` and `column-gap`\nin a single declaration.\n\n`gap` specifies the size of spacing between items within grid, flex\nand multi-column layouts.\n\n gap initial\n\n gap (px 20) -- 20px gap between all items.\n\n gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"gap2","comment":" Sets the [`gap`](https://css-tricks.com/almanac/properties/g/gap/) property.\n\nThe `gap` property is a shorthand for setting `row-gap` and `column-gap`\nin a single declaration.\n\n`gap` specifies the size of spacing between items within grid, flex\nand multi-column layouts.\n\n gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"gaps","comment":" Sets `gaps` value for usage with [`strokeDashJustify`](#strokeDashJustify).\n\n strokeDashJustify gaps\n\n","type":"Css.Value.Value { provides | gaps : Css.Value.Supported }"},{"name":"geometricPrecision","comment":" A `geometricPrecision` value for the [`text-rendering`](https://css-tricks.com/almanac/properties/t/text-rendering/) property.\n\n textRendering geometricPrecision\n\n","type":"Css.Value.Value { provides | geometricPrecision : Css.Value.Supported }"},{"name":"georgian","comment":" The `georgian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType georgian\n\n","type":"Css.Value.Value { provides | georgian : Css.Value.Supported }"},{"name":"grab","comment":" The `grab` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | grab : Css.Value.Supported }"},{"name":"grabbing","comment":" The `grabbing` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | grabbing : Css.Value.Supported }"},{"name":"grad","comment":" A [`grad` angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)\n\n grad 400 -- one full circle\n\n grad 38.8\n\n","type":"Basics.Float -> Css.Value.Value { provides | grad : Css.Value.Supported }"},{"name":"grayscale","comment":" Provides a [`grayscale()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale).\n\n backdropFilter <| grayscale (pct 20)\n -- backdrop-filter: grayscale(20%);\n\n backdropFilter <| grayscale zero -- no effect\n\n backdropFilter <| grayscale (num 1) -- completely grayscale\n\n backdropFilter <| grayscale (num 0.4) -- 40% grayscale\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | grayscale : Css.Value.Supported }"},{"name":"gridArea","comment":" The [`grid-area`](https://css-tricks.com/almanac/properties/g/grid-area/)\nproperty.\n\nThis variant is for keywords or for 1 `` ([`GridLine`](#GridLine)) that determines\nthe start and end positions of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridArea auto\n\n gridArea inherit\n\n gridArea <| gridLineSpanNum 4\n \n gridArea <| gridLineIdent \"big-grid\" (Just 4)\n\n gridArea2\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n\n gridArea3\n ( gridLineIdent \"big-grid\" (Just 4))\n ( gridLineSpanIdent \"other-grid\" Nothing)\n ( num 7 )\n\n gridArea4\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n ( num 7 )\n ( gridLineSpanIdent \"another-grid\" (Just 12) )\n\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridArea2","comment":" The [`grid-area`](https://css-tricks.com/almanac/properties/g/grid-area/)\nproperty.\n\nThis variant specifies 2 ``s ([`GridLine`](#GridLine)) that determines\nthe start and end positions of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridArea auto\n\n gridArea inherit\n\n gridArea <| gridLineSpanNum 4\n \n gridArea <| gridLineIdent \"big-grid\" (Just 4)\n\n gridArea2\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n\n gridArea3\n ( gridLineIdent \"big-grid\" (Just 4))\n ( gridLineSpanIdent \"other-grid\" Nothing)\n ( num 7 )\n\n gridArea4\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n ( num 7 )\n ( gridLineSpanIdent \"another-grid\" (Just 12) )\n\n","type":"Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Style"},{"name":"gridArea3","comment":" The [`grid-area`](https://css-tricks.com/almanac/properties/g/grid-area/)\nproperty.\n\nThis variant specifies 3 ``s ([`GridLine`](#GridLine)) that determines\nthe start and end positions of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridArea auto\n\n gridArea inherit\n\n gridArea <| gridLineSpanNum 4\n \n gridArea <| gridLineIdent \"big-grid\" (Just 4)\n\n gridArea2\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n\n gridArea3\n ( gridLineIdent \"big-grid\" (Just 4))\n ( gridLineSpanIdent \"other-grid\" Nothing)\n ( num 7 )\n\n gridArea4\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n ( num 7 )\n ( gridLineSpanIdent \"another-grid\" (Just 12) )\n\n","type":"Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Style"},{"name":"gridArea4","comment":" The [`grid-area`](https://css-tricks.com/almanac/properties/g/grid-area/)\nproperty.\n\nThis variant specifies 4 ``s ([`GridLine`](#GridLine)) that determines\nthe start and end positions of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridArea auto\n\n gridArea inherit\n\n gridArea <| gridLineSpanNum 4\n \n gridArea <| gridLineIdent \"big-grid\" (Just 4)\n\n gridArea2\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n\n gridArea3\n ( gridLineIdent \"big-grid\" (Just 4))\n ( gridLineSpanIdent \"other-grid\" Nothing)\n ( num 7 )\n\n gridArea4\n ( gridLineIdent \"big-grid\" (Just 4) )\n ( gridLineSpanIdent \"other-grid\" Nothing )\n ( num 7 )\n ( gridLineSpanIdent \"another-grid\" (Just 12) )\n\n","type":"Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Style"},{"name":"gridAutoColumns","comment":" The 1-argument version of the [`grid-auto-columns`](https://css-tricks.com/almanac/properties/g/grid-auto-columns/)\nproperty.\n\n gridAutoColumns (px 100)\n\n gridAutoColumns (vmax 30)\n\n gridAutoColumns (fr 1)\n\n gridAutoColumns (minmax (fr 2) (pct 20))\n\n gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]\n\n gridAutoColumnsMany [] -- unset\n","type":"Css.BaseValue Css.TrackSize -> Css.Style"},{"name":"gridAutoColumnsMany","comment":" The many-argument version of the [`grid-auto-columns`](https://css-tricks.com/almanac/properties/g/grid-auto-columns/)\nproperty.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n gridAutoColumns (px 100)\n\n gridAutoColumns (vmax 30)\n\n gridAutoColumns (fr 1)\n\n gridAutoColumns (minmax (fr 2) (pct 20))\n\n gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]\n\n gridAutoColumnsMany [] -- unset\n\n","type":"List.List (Css.Value.Value Css.TrackSize) -> Css.Style"},{"name":"gridAutoFlow","comment":" The 1-argument version of the [`grid-auto-flow`](https://css-tricks.com/almanac/properties/g/grid-auto-flow/)\nproperty.\n\n gridAutoFlow dense\n \n gridAutoFlow column\n\n gridAutoFlow2 row dense\n","type":"Css.BaseValue { row : Css.Value.Supported, column : Css.Value.Supported, dense : Css.Value.Supported } -> Css.Style"},{"name":"gridAutoFlow2","comment":" The 1-argument version of the [`grid-auto-flow`](https://css-tricks.com/almanac/properties/g/grid-auto-flow/)\nproperty.\n\n gridAutoFlow2 row dense\n\n(The last argument can only be `dense` but I thought this\nwould be the most natural way to make it fit into Elm,\neven if it's a bit redundant.)\n","type":"Css.Value.Value { row : Css.Value.Supported, column : Css.Value.Supported } -> Css.Value.Value { dense : Css.Value.Supported } -> Css.Style"},{"name":"gridAutoRows","comment":" The 1-argument version of the [`grid-auto-rows`](https://css-tricks.com/almanac/properties/g/grid-auto-rows/)\n property.\n\n gridAutoRows (px 100)\n\n gridAutoRows (vmax 30)\n\n gridAutoRows (fr 1)\n\n gridAutoRows (minmax (fr 2) (pct 20))\n","type":"Css.BaseValue Css.TrackSize -> Css.Style"},{"name":"gridAutoRowsMany","comment":" The many-argument version of the [`grid-auto-rows`](https://css-tricks.com/almanac/properties/g/grid-auto-rows/)\nproperty.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n gridAutoRows (px 100)\n\n gridAutoRows (vmax 30)\n\n gridAutoRows (fr 1)\n\n gridAutoRows (minmax (fr 2) (pct 20))\n\n gridAutoRowsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]\n\n gridAutoRowsMany [] -- unset\n\n","type":"List.List (Css.Value.Value Css.TrackSize) -> Css.Style"},{"name":"gridColumn","comment":" The [`grid-column`](https://css-tricks.com/almanac/properties/g/grid-column/)\nproperty.\n\nThis variant is for single keyword arguments and\nspecifying 1 `` ([`GridLine`](#GridLine)), which determines\nthe start and end position of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridColumn auto\n\n gridColumn inherit\n\n gridColumn <| gridLineIdent \"main-grid\" (Just 3)\n -- grid-column: main-grid 3\n\n gridColumn2 auto ( gridLineSpanIdent \"grid-thing\") (Just 5) )\n -- grid-column: auto / span grid-thing 5\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridColumn2","comment":" The [`grid-column`](https://css-tricks.com/almanac/properties/g/grid-column/)\nproperty.\n\nThis variant specifies 2 ``s ([`GridLine`](#GridLine)) that determine\nthe start and end position of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridColumn auto\n\n gridColumn inherit\n\n gridColumn <| gridLineIdent \"main-grid\" (Just 3)\n -- grid-column: main-grid 3\n\n gridColumn2 auto ( gridLineSpanIdent \"grid-thing\") (Just 5) )\n -- grid-column: auto / span grid-thing 5\n","type":"Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Style"},{"name":"gridColumnEnd","comment":" The 1-argument version of the [`grid-column-end`](https://css-tricks.com/almanac/properties/g/grid-column-end/)\nproperty.\n\n gridColumnEnd inherit\n\n gridColumnEnd auto\n\n gridColumnEnd <| gridLineSpanIdent \"big-grid\") Nothing\n\n gridColumnEnd <| int 3\n\n gridColumnEnd <| gridLineIdent \"big-grid\" (Just 2)\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridColumnStart","comment":" The 1-argument version of the [`grid-column-start`](https://css-tricks.com/almanac/properties/g/grid-column-start/)\nproperty.\n\n gridColumnStart inherit\n\n gridColumnStart auto\n\n gridColumnStart <| gridLineSpanIdent \"big-grid\") Nothing\n\n gridColumnStart <| int 3\n\n gridColumnStart <| gridLineIdent \"big-grid\" (Just 2)\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridLineIdent","comment":" Creates a grid line value with a value\nand an optional integer.\n\n gridLineIdent \"footer\" Nothing -- footer\n\n gridLineIdent \"header\" (Just 1) -- header 1\n\n gridLineSpanNum 4 -- span 4\n\n gridLineSpanIdent \"header\" Nothing -- span header\n\n gridLineSpanIdent \"footer\" (Just 1) -- span header 1\n\n","type":"String.String -> Maybe.Maybe Basics.Int -> Css.Value.Value { provides | gridLineIdent : Css.Value.Supported }"},{"name":"gridLineSpanIdent","comment":" Creates a grid line value with a 'span' keyword value followed by\nan ident and an optional integer.\n\n gridLineIdent \"footer\" Nothing -- footer\n\n gridLineIdent \"header\" (Just 1) -- header 1\n\n gridLineSpanNum 4 -- span 4\n\n gridLineSpanIdent \"header\" Nothing -- span header\n\n gridLineSpanIdent \"footer\" (Just 1) -- span header 1\n\n","type":"String.String -> Maybe.Maybe Basics.Int -> Css.Value.Value { provides | gridLineSpanIdent : Css.Value.Supported }"},{"name":"gridLineSpanNum","comment":" Creates a grid line value with a 'span' keyword value followed by\nan integer.\n\n gridLineIdent \"footer\" Nothing -- footer\n\n gridLineIdent \"header\" (Just 1) -- header 1\n\n gridLineSpanNum 4 -- span 4\n\n gridLineSpanIdent \"header\" Nothing -- span header\n\n gridLineSpanIdent \"footer\" (Just 1) -- span header 1\n \n","type":"Basics.Int -> Css.Value.Value { provides | gridLineSpanNum : Css.Value.Supported }"},{"name":"gridRow","comment":" The [`grid-row`](https://css-tricks.com/almanac/properties/g/grid-row/)\nproperty.\n\nThis variant is for single keyword arguments and\nspecifying 1 `` ([`GridLine`](#GridLine)), which determines\nthe start and end position of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridRow auto\n\n gridRow inherit\n\n gridRow <| gridLineIdent \"main-grid\" (Just 3)\n -- grid-row: main-grid 3\n\n gridRow2 auto ( gridLineSpanIdent \"grid-thing\" (Just 5) )\n -- grid-row: auto / span grid-thing 5\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridRow2","comment":" The [`grid-row`](https://css-tricks.com/almanac/properties/g/grid-row/)\nproperty.\n\nThis variant specifies 2 ``s ([`GridLine`](#GridLine)) that determine\nthe start and end position of this grid item.\n\nNumbers used in this should not be zero, else they won't work.\n\n gridRow auto\n\n gridRow inherit\n\n gridRow <| gridLineIdent \"main-grid\" (Just 3)\n -- grid-row: main-grid 3\n\n gridRow2 auto ( gridLineSpanIdent \"grid-thing\" (Just 5) )\n -- grid-row: auto / span grid-thing 5\n","type":"Css.Value.Value Css.GridLine -> Css.Value.Value Css.GridLine -> Css.Style"},{"name":"gridRowEnd","comment":" The 1-argument version of the [`grid-row-end`](https://css-tricks.com/almanac/properties/g/grid-row-end/)\nproperty.\n\n gridRowEnd inherit\n\n gridRowEnd auto\n\n gridRowEnd <| gridLineSpanIdent \"big-grid\" Nothing\n\n gridRowEnd <| int 3\n\n gridRowEnd <| gridLineIdent \"big-grid\" (Just 2)\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridRowStart","comment":" The 1-argument version of the [`grid-row-start`](https://css-tricks.com/almanac/properties/g/grid-row-start/)\nproperty.\n\n gridRowStart inherit\n\n gridRowStart auto\n\n gridRowStart <| gridLineSpanIdent \"big-grid\" Nothing\n\n gridRowStart <| int 3\n\n gridRowStart <| gridLineIdent \"big-grid\" (Just 2)\n","type":"Css.BaseValue Css.GridLine -> Css.Style"},{"name":"gridTemplate","comment":" The[`grid-template`](https://css-tricks.com/almanac/properties/g/grid-template/)\nproperty.\n\n gridTemplate initial\n\n gridTemplate none\n\n gridTemplate <|\n templateAreasRowsColumns\n [ templateAreaRow\n ( Just <| lineNames [\"header-left\"] )\n \"head head\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"header-right\"] )\n \n , templateAreaRow\n ( Just <| lineNames [\"main-left\"] )\n \"nav main\"\n ( Just <| fr 1 )\n ( Just <| lineNames [\"main-right\"])\n\n , templateAreaRow\n ( Just <| lineNames [\"footer-left\"] )\n \"nav foot\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"footer-right\"])\n ]\n ( Just <| templateColumns\n ( px 120 )\n [ fr 120\n ]\n )\n\n gridTemplate <|\n templateRowsColumns\n ( trackList\n ( lineNames [\"line1\", \"line2\"] )\n [ px 300\n , lineNames [\"line3\"]\n ]\n )\n \n ( autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n )\n","type":"Css.BaseValue { none : Css.Value.Supported, templateRowsColumns : Css.Value.Supported, templateAreasRowsColumns : Css.Value.Supported } -> Css.Style"},{"name":"gridTemplateAreas","comment":" The [`grid-template-areas`](https://css-tricks.com/almanac/properties/g/grid-template-areas/)\nproperty. Use the [`gridTemplateAreasMany`](#gridTemplateAreasMany) function if you want\nto use multiple strings as a value.\n\n gridTemplateAreas none\n\n gridTemplateAreas inherit\n\n gridTemplateAreasCells\n [ \"c c b\"\n , \"c a b\"\n , \"c d e\"\n ]\n\n","type":"Css.BaseValue { none : Css.Value.Supported } -> Css.Style"},{"name":"gridTemplateAreasCells","comment":" A version of [`gridTemplateAreas`](#gridTemplateAreas) that\nlets you input a list of strings as values, representing grid cells.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n gridTemplateAreasCells\n [ \"c c b\"\n , \"c a b\"\n , \"c d e\"\n ]\n\n gridTemplateAreasCells [] -- unset\n","type":"List.List String.String -> Css.Style"},{"name":"gridTemplateColumns","comment":" The [`grid-template-columns`](https://css-tricks.com/almanac/properties/g/grid-template-columns/)\nproperty.\n\n gridTemplateColumns inherit\n\n gridTemplateColumns none\n\n gridTemplateColumns <|\n trackList (px 200) [fr 1, px 180]\n\n gridTemplateColumns <|\n trackList \n ( lineNames [\"line1\", \"line2\"] )\n [ px 300\n , lineNames [\"line3\"]\n ]\n\n gridTemplateColumns <|\n trackList [ fixedRepeat (num 4) [px 520] ]\n\n gridTemplateColumns <|\n autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n","type":"Css.BaseValue { none : Css.Value.Supported, trackList : Css.Value.Supported, autoTrackList : Css.Value.Supported } -> Css.Style"},{"name":"gridTemplateRows","comment":" The [`grid-template-rows`](https://css-tricks.com/almanac/properties/g/grid-template-rows/)\nproperty.\n\n gridTemplateRows inherit\n\n gridTemplateRows none\n\n gridTemplateRows <|\n trackList (px 200) [fr 1, px 180]\n\n gridTemplateRows <|\n trackList \n ( lineNames [\"line1\", \"line2\"] )\n [ px 300\n , lineNames [\"line3\"]\n ]\n\n gridTemplateRows <|\n trackList [ fixedRepeat (num 4) [px 520] ]\n\n gridTemplateRows <|\n autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n","type":"Css.BaseValue { none : Css.Value.Supported, trackList : Css.Value.Supported, autoTrackList : Css.Value.Supported } -> Css.Style"},{"name":"grid_","comment":" The `grid` value used by [`display`](#display).\n\nThe value is called `grid_` instead of `grid` because\n[`grid` is already a property function](#grid).\n\n\n display grid_\n\n","type":"Css.Value.Value { provides | grid_ : Css.Value.Supported }"},{"name":"groove","comment":" The `groove` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\n borderStyle groove\n\n columnRuleStyle groove\n\n textDecorationStyle groove\n\nAdds a bevel based on the color value, which makes things appear pressed into the document.\n\n","type":"Css.Value.Value { provides | groove : Css.Value.Supported }"},{"name":"gujarati","comment":" The `gujarati` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType gujarati\n\n","type":"Css.Value.Value { provides | gujarati : Css.Value.Supported }"},{"name":"gurmukhi","comment":" The `gurmukhi` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType gurmukhi\n\n","type":"Css.Value.Value { provides | gurmukhi : Css.Value.Supported }"},{"name":"hanging","comment":" The `hanging` value used for properties such as [`textIdent2`](#textIdent2).\n\n textIdent2 (px 20) hanging\n\n","type":"Css.Value.Value { provides | hanging : Css.Value.Supported }"},{"name":"hangingPunctuation","comment":" Sets [`hanging-punctuation`](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)\n\n hangingPunctuation none\n\n hangingPunctuation first_\n\n hangingPunctuation2 first_ forceEnd\n\n hangingPunctuation3 first_ allowEnd last\n\n","type":"Css.BaseValue { none : Css.Value.Supported, first_ : Css.Value.Supported, forceEnd : Css.Value.Supported, allowEnd : Css.Value.Supported, last : Css.Value.Supported } -> Css.Style"},{"name":"hangingPunctuation2","comment":" Sets [`hanging-punctuation`](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)\n\n`first_ first_`, `last first` and `last last` are invalid combinations.\n\n hangingPunctuation2 first_ forceEnd\n\n","type":"Css.Value.Value { first_ : Css.Value.Supported, last : Css.Value.Supported } -> Css.Value.Value { first_ : Css.Value.Supported, forceEnd : Css.Value.Supported, allowEnd : Css.Value.Supported, last : Css.Value.Supported } -> Css.Style"},{"name":"hangingPunctuation3","comment":" Sets [`hanging-punctuation`](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)\n\n hangingPunctuation3 first_ allowEnd last\n\n","type":"Css.Value.Value { first_ : Css.Value.Supported } -> Css.Value.Value { forceEnd : Css.Value.Supported, allowEnd : Css.Value.Supported } -> Css.Value.Value { last : Css.Value.Supported } -> Css.Style"},{"name":"hardLight","comment":" The `hard-light` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode hardLight\n\n","type":"Css.Value.Value { provides | hardLight : Css.Value.Supported }"},{"name":"hebrew","comment":" The `hebrew` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType hebrew\n\n","type":"Css.Value.Value { provides | hebrew : Css.Value.Supported }"},{"name":"height","comment":" The [`height`](https://css-tricks.com/almanac/properties/h/height/) property.\n\n height (px 34)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"help","comment":" The `help` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | help : Css.Value.Supported }"},{"name":"hex","comment":" [RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in hexadecimal notation.\n\nYou can optionally include `#` as the first character, for benefits like syntax highlighting in editors, ease of copy/pasting from tools which express these as e.g. `#abcdef0`, etc.\n\n color (hex \"#60b5cc\")\n\n color (hex \"60b5cc\")\n\n","type":"String.String -> Css.Value.Value { provides | hex : Css.Value.Supported }"},{"name":"hidden","comment":" The `hidden` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`borderStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style).\n\n visibility hidden\n\n overflow hidden\n\n borderStyle hidden\n\n","type":"Css.Value.Value { provides | hidden : Css.Value.Supported }"},{"name":"hide","comment":" A `hide` value for the [`empty-cells`](https://css-tricks.com/almanac/properties/e/empty-cells/) property.\n\n emptyCells hide\n\n","type":"Css.Value.Value { provides | hide : Css.Value.Supported }"},{"name":"hiragana","comment":" The `hiragana` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType hiragana\n\n","type":"Css.Value.Value { provides | hiragana : Css.Value.Supported }"},{"name":"hiraganaIroha","comment":" The `hiragana-iroha` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType hiraganaIroha\n\n","type":"Css.Value.Value { provides | hiraganaIroha : Css.Value.Supported }"},{"name":"historicalLigatures","comment":" The `historical-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures historicalLigatures\n\n","type":"Css.Value.Value { provides | historicalLigatures : Css.Value.Supported }"},{"name":"horizontal","comment":" The `horizontal` value used by [`resize`](#resize).\n\n resize horizontal\n\n","type":"Css.Value.Value { provides | horizontal : Css.Value.Supported }"},{"name":"horizontalTb","comment":" Sets `horizontal-tb` value for usage with [`writingMode`](#writingMode).\n\n writingMode horizontalTb\n\n","type":"Css.Value.Value { provides | horizontalTb : Css.Value.Supported }"},{"name":"hover","comment":" A [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n hover\n [ fontWeight bold\n , color (rgb 255 50 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"hsl","comment":" [HSL color value](https://css-tricks.com/mother-effing-hsl/).\n\nThe `s` and `l` values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.\n\n color (hsl 193 0.51 0.59) -- hsl(193, 51%, 59%)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | hsl : Css.Value.Supported }"},{"name":"hsla","comment":" [HSLA color value](https://css-tricks.com/yay-for-hsla/)\n\nThe `s` and `l` values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.\n\n color (hsla 193 0.51 0.59 0.25) -- hsl(193, 51%, 59%, 0.25)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | hsla : Css.Value.Supported }"},{"name":"hue","comment":" The `hue` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode hue\n\n","type":"Css.Value.Value { provides | hue : Css.Value.Supported }"},{"name":"hueRotate","comment":" Provides a [`hue-rotate()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate).\n\n backdropFilter <| hueRotate (deg -180)\n -- backdrop-filter: hue-rotate(-180deg);\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | hueRotate : Css.Value.Supported }"},{"name":"hyphens","comment":" Sets [`hyphens`](https://css-tricks.com/almanac/properties/h/hyphens/)\n\n hyphens none\n\n hyphens manual\n\n hyphens auto\n\n","type":"Css.BaseValue { none : Css.Value.Supported, manual : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"imageRendering","comment":" Sets [`image-rendering`](https://css-tricks.com/almanac/properties/i/image-rendering/)\n\n imageRendering auto\n\n imageRendering crispEdges\n\n imageRendering pixelated\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, crispEdges : Css.Value.Supported, pixelated : Css.Value.Supported } -> Css.Style"},{"name":"important","comment":" Transforms the given property by adding !important to the end of its\ndeclaration.\n","type":"Css.Style -> Css.Style"},{"name":"inRange","comment":" An [`:in-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n inRange\n [ backgroundColor (rgb 0 255 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"inch","comment":" [`in`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (inch 5)\n\n(This is `inch` instead of `in` because `in` is a reserved keyword in Elm.)\n\n","type":"Basics.Float -> Css.Value.Value { provides | inch : Css.Value.Supported }"},{"name":"indeterminate","comment":" An [`:indeterminate`](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n indeterminate\n [ backgroundColor (rgb 100 100 100)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"infinite","comment":" The `infinite` value used for functions like [`animationIterationCount`](#animationIterationCount)\n\n animationIterationCount infinite\n\n","type":"Css.Value.Value { provides | infinite : Css.Value.Supported }"},{"name":"inherit","comment":" The [`inherit`](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit) value.\nAny CSS property can be set to this value.\n\n display inherit\n\n","type":"Css.Value.Value { provides | inherit : Css.Value.Supported }"},{"name":"initial","comment":" The [`initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/initial) value.\nAny CSS property can be set to this value.\n\n display initial\n\n borderStyle initial\n\n","type":"Css.Value.Value { provides | initial : Css.Value.Supported }"},{"name":"inline","comment":" The `inline` value.\n\nThis is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/) used by [`display`](#display) and [`resize`](#resize).\n\n display inline\n\n resize inline\n\n","type":"Css.Value.Value { provides | inline : Css.Value.Supported }"},{"name":"inlineBlock","comment":" The `inline-block` value used by [`display`](#display).\n\n display inlineBlock\n\n","type":"Css.Value.Value { provides | inlineBlock : Css.Value.Supported }"},{"name":"inlineEnd","comment":" Sets `inline-end`, which is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/).\nIt can be used with the following properties:\n\n- [`captionSide`](#captionSide)\n- [`clear`](#clear)\n- [`float`](#float)\n\n```\n clear inlineEnd\n\n captionSide inlineEnd\n\n float inlineEnd\n```\n","type":"Css.Value.Value { provides | inlineEnd : Css.Value.Supported }"},{"name":"inlineFlex","comment":" The `inline-flex` value used by [`display`](#display).\n\n display inlineFlex\n\n","type":"Css.Value.Value { provides | inlineFlex : Css.Value.Supported }"},{"name":"inlineGrid","comment":" The `inline-grid` value used by [`display`](#display).\n\n display inlineGrid\n\n","type":"Css.Value.Value { provides | inlineGrid : Css.Value.Supported }"},{"name":"inlineSize","comment":" The [`inline-size`](https://css-tricks.com/almanac/properties/i/inline-size/) property.\n\n inlineSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"inlineSize_","comment":" Sets the `inline-size` value for [`contain`](#contain).\n\nIndicates that inline size containment is applied to the element.\n\n contain inlineSize_\n\nNote: This is named `inlineSize_` instead of `inlineSize` because\n[it is already a property function](#inlineSize).\n\n","type":"Css.Value.Value { provides | inlineSize_ : Css.Value.Supported }"},{"name":"inlineStart","comment":" Sets `inline-start`, which is a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/).\nIt can be used with the following properties:\n\n- [`captionSide`](#captionSide)\n- [`clear`](#clear)\n- [`float`](#float)\n\n```\n clear inlineStart\n\n captionSide inlineStart\n\n float inlineStart\n```\n","type":"Css.Value.Value { provides | inlineStart : Css.Value.Supported }"},{"name":"inlineTable","comment":" The `inline-table` value used by [`display`](#display).\n\n display inlineTable\n\n","type":"Css.Value.Value { provides | inlineTable : Css.Value.Supported }"},{"name":"inset","comment":" Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property.\n\n`inset` sets the `top`, `bottom`, `left` and `right` properties.\n\n inset (px 10) -- top, bottom, left and right are all 10px.\n\n inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%\n\n inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px\n\n inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"inset2","comment":" Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property.\n\n`inset` sets the `top`, `bottom`, `left` and `right` properties.\n\n inset (px 10) -- top, bottom, left and right are all 10px.\n\n inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%\n\n inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px\n\n inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"inset3","comment":" Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property.\n\n`inset` sets the `top`, `bottom`, `left` and `right` properties.\n\n inset (px 10) -- top, bottom, left and right are all 10px.\n\n inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%\n\n inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px\n\n inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"inset4","comment":" Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property.\n\n`inset` sets the `top`, `bottom`, `left` and `right` properties.\n\n inset (px 10) -- top, bottom, left and right are all 10px.\n\n inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%\n\n inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px\n\n inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetBlock","comment":" Sets the [`inset-block`](https://css-tricks.com/almanac/properties/i/inset-block/) property.\n\n`inset-block` sets the `inset-block-start` and `inset-block-end` properties.\n\n insetBlock (px 10) -- block start and block end are both 10px.\n\n insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetBlock2","comment":" Sets the [`inset-block`](https://css-tricks.com/almanac/properties/i/inset-block/) property.\n\n`inset-block` sets the `inset-block-start` and `inset-block-end` properties.\n\n insetBlock (px 10) -- block start and block end are both 10px.\n\n insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetBlockEnd","comment":" Sets the [`inset-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) property.\n\n insetBlockEnd (px 10)\n\n insetBlockEnd (pct 50)\n\n insetBlockEnd auto\n\n insetBlockEnd zero\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetBlockStart","comment":" Sets the [`inset-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) property.\n\n insetBlockStart (px 10)\n\n insetBlockStart (pct 50)\n\n insetBlockStart auto\n\n insetBlockStart zero\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetInline","comment":" Sets the [`inset-inline`](https://css-tricks.com/almanac/properties/i/inset-inline) property.\n\n`inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties.\n\n insetInline (px 10) -- inline start and inline end are both 10px.\n\n insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetInline2","comment":" Sets the [`inset-inline`](https://css-tricks.com/almanac/properties/i/inset-inline) property.\n\n`inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties.\n\n insetInline (px 10) -- inline start and inline end are both 10px.\n\n insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetInlineEnd","comment":" Sets the [`inset-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) property.\n\n insetInlineEnd (px 10)\n\n insetInlineEnd (pct 50)\n\n insetInlineEnd auto\n\n insetInlineEnd zero\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetInlineStart","comment":" Sets the [`inset-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) property.\n\n insetInlineStart (px 10)\n\n insetInlineStart (pct 50)\n\n insetInlineStart auto\n\n insetInlineStart zero\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"insetRect","comment":" Provides a one-argument `inset()` value. (Which creates an\ninset rectangle shape.)\n\n clipPath <| insetRect (px 20) Nothing, \"inset(20px)\" )\n\n clipPath <| insetRect (px 20) (Just <| insetRound (px 2))\n\n clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))\n\n clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))\n\n clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing\n\n clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))\n\n clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))\n\nNote: This is called `insetRect` instead of `inset` because [`inset`](#inset) and [`inset_`](#inset_)\nare already property and value functions handling other areas of CSS.\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { insetRound : Css.Value.Supported, insetRound2 : Css.Value.Supported, insetRound3 : Css.Value.Supported, insetRound4 : Css.Value.Supported }) -> Css.Value.Value { provides | insetRect : Css.Value.Supported }"},{"name":"insetRect2","comment":" Provides a 2-argument `inset()` value. (Which creates an\ninset rectangle shape.)\n\n clipPath <| insetRect (px 20) Nothing, \"inset(20px)\" )\n\n clipPath <| insetRect (px 20) (Just <| insetRound (px 2))\n\n clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))\n\n clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))\n\n clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing\n\n clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))\n \n clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))\n\nNote: This is called `insetRect2` instead of `inset2` because [`inset`](#inset) and [`inset_`](#inset_)\nare already property and value functions handling other areas of CSS.\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { insetRound : Css.Value.Supported, insetRound2 : Css.Value.Supported, insetRound3 : Css.Value.Supported, insetRound4 : Css.Value.Supported }) -> Css.Value.Value { provides | insetRect : Css.Value.Supported }"},{"name":"insetRect3","comment":" Provides a 2-argument `inset()` value. (Which creates an\ninset rectangle shape.)\n\n clipPath <| insetRect (px 20) Nothing, \"inset(20px)\" )\n\n clipPath <| insetRect (px 20) (Just <| insetRound (px 2))\n\n clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))\n\n clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))\n\n clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing\n\n clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))\n \n clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))\n\nNote: This is called `insetRect3` instead of `inset3` because [`inset`](#inset) and [`inset_`](#inset_)\nare already property and value functions handling other areas of CSS.\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { insetRound : Css.Value.Supported, insetRound2 : Css.Value.Supported, insetRound3 : Css.Value.Supported, insetRound4 : Css.Value.Supported }) -> Css.Value.Value { provides | insetRect : Css.Value.Supported }"},{"name":"insetRect4","comment":" Provides a 2-argument `inset()` value. (Which creates an\ninset rectangle shape.)\n\n clipPath <| insetRect (px 20) Nothing, \"inset(20px)\" )\n\n clipPath <| insetRect (px 20) (Just <| insetRound (px 2))\n\n clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))\n\n clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))\n\n clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing\n\n clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))\n \n clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))\n\nNote: This is called `insetRect4` instead of `inset4` because [`inset`](#inset) and [`inset_`](#inset_)\nare already property and value functions handling other areas of CSS.\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { insetRound : Css.Value.Supported, insetRound2 : Css.Value.Supported, insetRound3 : Css.Value.Supported, insetRound4 : Css.Value.Supported }) -> Css.Value.Value { provides | insetRect : Css.Value.Supported }"},{"name":"insetRound","comment":" Provides a 1-value border radius for use with `insetRect`(#insetRect) (`inset()`).\n\n insetRect (px 40) (Just <| insetRound (px 2))\n\n insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))\n\n insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))\n\n insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | insetRound : Css.Value.Supported }"},{"name":"insetRound2","comment":" Provides a 2-value border radius for use with `insetRect`(#insetRect) (`inset()`).\n\n insetRect (px 40) (Just <| insetRound (px 2))\n\n insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))\n\n insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))\n\n insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | insetRound2 : Css.Value.Supported }"},{"name":"insetRound3","comment":" Provides a 3-value border radius for use with `insetRect`(#insetRect) (`inset()`).\n\n insetRect (px 40) (Just <| insetRound (px 2))\n\n insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))\n\n insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))\n\n insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | insetRound3 : Css.Value.Supported }"},{"name":"insetRound4","comment":" Provides a 4-value border radius for use with `insetRect`(#insetRect) (`inset()`).\n\n insetRect (px 40) (Just <| insetRound (px 2))\n\n insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))\n\n insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))\n\n insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | insetRound3 : Css.Value.Supported }"},{"name":"inset_","comment":" The `inset` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\nThis is called `inset_` rather than `inset` because [`inset` is already a property function](#inset).\n\n borderStyle inset_\n\n columnRuleStyle inset_\n\n textDecorationStyle inset_\n\nAdds a split tone to the line that makes it appear slightly depressed.\n\nContrast with [`outset`](#outset)\n\n","type":"Css.Value.Value { provides | inset_ : Css.Value.Supported }"},{"name":"inside","comment":" The `inside` value used for properties such as [`list-style-position`](#listStylePosition),\nand [`listStyle`](#listStyle).\n\n listStylePosition inside\n\n","type":"Css.Value.Value { provides | inside : Css.Value.Supported }"},{"name":"int","comment":" A unitless integer. Useful with properties like [`zIndex`](#zIndex) which accept unitless integers.\n\n zIndex (int 3)\n\n","type":"Basics.Int -> Css.Value.Value { provides | int : Css.Value.Supported }"},{"name":"interCharacter","comment":" A `inter-character` value for the [`textJustify`](#textJustify) property.\n\n textJustify interCharacter\n\n","type":"Css.Value.Value { provides | interCharacter : Css.Value.Supported }"},{"name":"interWord","comment":" A `inter-word` value for the [`textJustify`](#textJustify) property.\n\n textJustify interWord\n\n","type":"Css.Value.Value { provides | interWord : Css.Value.Supported }"},{"name":"intersect","comment":" Sets `intersect` value for usage with [`maskComposite`](#maskComposite).\n\n maskComposite intersect\n\n","type":"Css.Value.Value { provides | intersect : Css.Value.Supported }"},{"name":"invalid","comment":" An [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n invalid\n [ color (rgb 255 0 0)\n , fontWeight bold\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"invert","comment":" Provides a [`invert()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert).\n\n backdropFilter <| invert (pct 20)\n -- backdrop-filter: invert(20%);\n\n backdropFilter <| invert zero -- no effect\n\n backdropFilter <| invert (num 1) -- completely inverted\n\n backdropFilter <| invert (num 0.4) -- 40% inversion\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | invert : Css.Value.Supported }"},{"name":"invert_","comment":" The `invert` value used by properties such as [`outlineColor`](#outlineColor)\n\n outlineColor invert_\n\nNote: This is called `invert_` instead of `invert` because [`invert`](#invert) is already used as a filter-function value.\n\n","type":"Css.Value.Value { provides | invert_ : Css.Value.Supported }"},{"name":"isolate","comment":" Sets `isolate` value for usage with [`isolation`](#isolation), and\n[`unicodeBidi`](#unicodeBidi).\n\n isolation isolate\n\n unicodeBidi isolate\n\n","type":"Css.Value.Value { provides | isolate : Css.Value.Supported }"},{"name":"isolateOverride","comment":" Sets `isolate-override` value for usage with [`unicodeBidi`](#unicodeBidi).\n\n unicodeBidi isolateOverride\n\n","type":"Css.Value.Value { provides | isolateOverride : Css.Value.Supported }"},{"name":"isolation","comment":" Sets [`isolation`](https://css-tricks.com/almanac/properties/i/isolation/)\n\n isolation auto\n\n isolation isolate\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, isolate : Css.Value.Supported } -> Css.Style"},{"name":"italic","comment":" ","type":"Css.Value.Value { provides | italic : Css.Value.Supported }"},{"name":"japaneseFormal","comment":" The `japanese-formal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType japaneseFormal\n\n","type":"Css.Value.Value { provides | japaneseFormal : Css.Value.Supported }"},{"name":"japaneseInformal","comment":" The `japanese-informal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType japaneseInformal\n\n","type":"Css.Value.Value { provides | japaneseInformal : Css.Value.Supported }"},{"name":"jis04","comment":" Sets the [`jis04`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that the JIS X 0208:2004 standard for East Asian logographic glyphs\nshould be used.\n\n fontVariantEastAsian jis04\n\n","type":"Css.Value.Value { provides | jis04 : Css.Value.Supported }"},{"name":"jis78","comment":" Sets the [`jis78`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that the JIS X 0208:1978 standard for East Asian logographic glyphs\nshould be used.\n\n fontVariantEastAsian jis78\n\n","type":"Css.Value.Value { provides | jis78 : Css.Value.Supported }"},{"name":"jis83","comment":" Sets the [`jis83`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that the JIS X 0208:1983 standard for East Asian logographic glyphs\nshould be used.\n\n fontVariantEastAsian jis83\n\n","type":"Css.Value.Value { provides | jis83 : Css.Value.Supported }"},{"name":"jis90","comment":" Sets the [`jis90`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that the JIS X 0208:1990 standard for East Asian logographic glyphs\nshould be used.\n\n fontVariantEastAsian jis90\n\n","type":"Css.Value.Value { provides | jis90 : Css.Value.Supported }"},{"name":"jumpBoth","comment":" The `jump-both` value used for functions like [`step2`](#step2)\n\n steps2 3 jumpBoth\n\n","type":"Css.Value.Value { provides | jumpBoth : Css.Value.Supported }"},{"name":"jumpEnd","comment":" The `jump-end` value used for functions like [`step2`](#step2)\n\n steps2 3 jumpEnd\n\n","type":"Css.Value.Value { provides | jumpEnd : Css.Value.Supported }"},{"name":"jumpNone","comment":" The `jump-none` value used for functions like [`step2`](#step2)\n\n steps2 3 jumpNone\n\n","type":"Css.Value.Value { provides | jumpNone : Css.Value.Supported }"},{"name":"jumpStart","comment":" The `jump-start` value used for functions like [`step2`](#step2)\n\n steps2 3 jumpStart\n\n","type":"Css.Value.Value { provides | jumpStart : Css.Value.Supported }"},{"name":"justify","comment":" A `justify` value for the [`text-align`](https://css-tricks.com/almanac/properties/t/text-align/)\n\n textAlign justify\n\n","type":"Css.Value.Value { provides | justify : Css.Value.Supported }"},{"name":"justifyContent","comment":" Sets [`justify-content`](https://css-tricks.com/almanac/properties/j/justify-content/).\n\n justifyContent flexStart\n\n**Note:** This function takes [`left_`](#left_) and [`right_`](#right_) values.\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, spaceBetween : Css.Value.Supported, spaceAround : Css.Value.Supported, spaceEvenly : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"justifyContent2","comment":" Sets [`justify-content`](https://css-tricks.com/almanac/properties/j/justify-content/).\n\n justifyContent2 safe flexStart\n\n**Note:** This function takes [`left_`](#left_) and [`right_`](#right_) values.\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"justifyItems","comment":" The [`justify-items`](https://css-tricks.com/almanac/properties/j/justify-items/) property.\n\n justifyItems center\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, legacy : Css.Value.Supported, legacyLeft : Css.Value.Supported, legacyRight : Css.Value.Supported, legacyCenter : Css.Value.Supported } -> Css.Style"},{"name":"justifyItems2","comment":" The [`justify-items`](https://css-tricks.com/almanac/properties/j/justify-items/) property.\n\n justifyItems2 unsafe right_\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"justifySelf","comment":" The [`justify-self`](https://css-tricks.com/almanac/properties/j/justify-self/) property.\n\n jusitfySelf left_\n\n**Note:** This function takes [`left_`](#left_) and [`right_`](#right_) values.\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"justifySelf2","comment":" The [`justify-self`](https://css-tricks.com/almanac/properties/j/justify-self/) property.\n\n justifySelf2 unsafe left_\n\n**Note:** This function takes [`left_`](#left_) and [`right_`](#right_) values.\n\n","type":"Css.Value.Value { safe : Css.Value.Supported, unsafe : Css.Value.Supported } -> Css.Value.Value { center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"kannada","comment":" The `kannada` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType kannada\n\n","type":"Css.Value.Value { provides | kannada : Css.Value.Supported }"},{"name":"katakana","comment":" The `katakana` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType katakana\n\n","type":"Css.Value.Value { provides | katakana : Css.Value.Supported }"},{"name":"katakanaIroha","comment":" The `katakana-iroha` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType katakanaIroha\n\n","type":"Css.Value.Value { provides | katakanaIroha : Css.Value.Supported }"},{"name":"keepAll","comment":" A `keepAll` value for the [`word-break`](https://css-tricks.com/almanac/properties/w/word-break/) property.\n\n wordBreak keepAll\n\n","type":"Css.Value.Value { provides | keepAll : Css.Value.Supported }"},{"name":"khmer","comment":" The `khmer` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType khmer\n\n","type":"Css.Value.Value { provides | khmer : Css.Value.Supported }"},{"name":"koreanHangulFormal","comment":" The `korean-hangul-formal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType koreanHangulFormal\n\n","type":"Css.Value.Value { provides | koreanHangulFormal : Css.Value.Supported }"},{"name":"koreanHanjaFormal","comment":" The `korean-hanja-formal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType koreanHanjaFormal\n\n","type":"Css.Value.Value { provides | koreanHanjaFormal : Css.Value.Supported }"},{"name":"koreanHanjaInformal","comment":" The `korean-hanja-informal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType koreanHanjaInformal\n\n","type":"Css.Value.Value { provides | koreanHanjaInformal : Css.Value.Supported }"},{"name":"lang","comment":" A [`:lang()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n lang \"en-GB\"\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"lao","comment":" The `lao` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lao\n\n","type":"Css.Value.Value { provides | lao : Css.Value.Supported }"},{"name":"large","comment":" The `large` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize large\n\n","type":"Css.Value.Value { provides | large : Css.Value.Supported }"},{"name":"larger","comment":" The `larger` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize larger\n\n","type":"Css.Value.Value { provides | larger : Css.Value.Supported }"},{"name":"last","comment":" Sets `last` value for usage with [`hangingPunctuation`](#hangingPunctuation).\n\n hangingPunctuation last\n\n","type":"Css.Value.Value { provides | last : Css.Value.Supported }"},{"name":"lastBaseline","comment":" The `last baseline` value used for properties such as [`alignContent`](#alignContent),\n[`alignItems`](#alignItems),\nand [`alignSelf`](#alignSelf).\n\n alignItems lastBaseline\n\n","type":"Css.Value.Value { provides | lastBaseline : Css.Value.Supported }"},{"name":"lastChild","comment":" A [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n lastChild\n [ backgroundColor (rgb 0 0 255)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"lastOfType","comment":" A [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n lastOfType\n [ color (rgb 100 100 100)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"layout","comment":" Sets the `layout` value for [`contain`](#contain).\n\nThis indicates that nothing outside the element\nmay affect its internal layout and vice versa.\n\n contain layout\n\n","type":"Css.Value.Value { provides | layout : Css.Value.Supported }"},{"name":"left","comment":" Sets the [`left`](https://css-tricks.com/almanac/properties/l/left/) property.\n\n left (px 10)\n\n left (pct 50)\n\n left auto\n\n left zero\n\nIf you need to use `left` as a CSS _value_ instead of as a _property_,\nfor example in `float: left`, use [`left_`](#left_) instead of this.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"leftHandPage","comment":" A [`:left`](https://developer.mozilla.org/en-US/docs/Web/CSS/:left)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n leftHandPage\n [ color (rgb 100 100 100)\n ]\n\nNote: This is called `leftHandPage` instead of `left` or `left_` is\nbecause both of those are taken by property and value keyword functions.\n","type":"List.List Css.Style -> Css.Style"},{"name":"left_","comment":" The `left` value, used in many properties such as:\n\n - [`backgroundPosition`](#backgroundPosition)\n - [`clear`](#clear)\n - [`float`](#float)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n - [`pageBreakAfter`](#pageBreakAfter)\n - [`textAlign`](#textAlign)\n\n```\nbackgroundPosition left_\n\nclear left_\n\nfloat left_\n\njustifyContent left_\n\njustifyItems left_\n\njustifySelf left_\n\npageBreakAfter left_\n\ntextAlign left_\n```\n\nThe value is called `left_` instead of `left` because [`left` is already a property function](#left).\n\n","type":"Css.Value.Value { provides | left_ : Css.Value.Supported }"},{"name":"legacy","comment":" The `legacy` value used for properties such as [`justifyItems`](#justifyItems).\n\n justifyItems legacy\n\n","type":"Css.Value.Value { provides | legacy : Css.Value.Supported }"},{"name":"legacyCenter","comment":" The `legacy center` value used for properties such as [`justifyItems`](#justifyItems).\n\n justifyItems legacyCenter\n\n","type":"Css.Value.Value { provides | legacyCenter : Css.Value.Supported }"},{"name":"legacyLeft","comment":" The `legacy left` value used for properties such as [`justifyItems`](#justifyItems).\n\n justifyItems legacyLeft\n\n","type":"Css.Value.Value { provides | legacyLeft : Css.Value.Supported }"},{"name":"legacyRight","comment":" The `legacy right` value used for properties such as [`justifyItems`](#justifyItems).\n\n justifyItems legacyRight\n\n","type":"Css.Value.Value { provides | legacyRight : Css.Value.Supported }"},{"name":"letterSpacing","comment":" Sets [`letter-spacing`](https://css-tricks.com/almanac/properties/l/letter-spacing/)\n\n letterSpacing (pct 150)\n\n letterSpacing (em 2)\n\n letterSpacing (num 1.5)\n\n letterSpacing normal\n\n","type":"Css.BaseValue (Css.LengthSupported { normal : Css.Value.Supported }) -> Css.Style"},{"name":"lighten","comment":" The `lighten` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode lighten\n\n","type":"Css.Value.Value { provides | lighten : Css.Value.Supported }"},{"name":"lighter","comment":" ","type":"Css.Value.Value { provides | lighter : Css.Value.Supported }"},{"name":"lineBreak","comment":" Sets the [`lineBreak`](https://css-tricks.com/almanac/properties/l/line-break/) property.\n\n lineBreak auto\n\n lineBreak strict\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, loose : Css.Value.Supported, normal : Css.Value.Supported, strict : Css.Value.Supported, anywhere : Css.Value.Supported } -> Css.Style"},{"name":"lineClamp","comment":" Sets [`lineClamp`](https://css-tricks.com/almanac/properties/l/line-clamp/)\n\n lineClamp none\n\n lineClamp zero\n\n lineClamp (int 3)\n\n","type":"Css.BaseValue { none : Css.Value.Supported, zero : Css.Value.Supported, int : Css.Value.Supported } -> Css.Style"},{"name":"lineHeight","comment":" Sets [`line-height`](https://css-tricks.com/almanac/properties/l/line-height/)\n\n lineHeight (pct 150)\n\n lineHeight (em 2)\n\n lineHeight (num 1.5)\n\n lineHeight normal\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, normal : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"lineNames","comment":" Custom ident(s) that are only used in grid area definitions,\nfor naming lines of a grid layout. A line may have multiple names.\n\nLine names are case sensitive.\n\n gridTemplateColumnsList\n [ lineNames[\"line1\", \"line2\"]\n , px 300\n , lineNames[\"line3\"]\n ]\n\n --- grid-template-colums: [line1 line2] 300px [line3];\n","type":"List.List String.String -> Css.Value.Value { provides | lineNames : Css.Value.Supported }"},{"name":"lineThrough","comment":" The `line-through` [`text-decoration-line`][text-decoration-line] value.\n\n textDecorationLine lineThrough\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/#article-header-id-0\n\n","type":"Css.Value.Value { provides | lineThrough : Css.Value.Supported }"},{"name":"linear","comment":" The `linear` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction linear\n\n","type":"Css.Value.Value { provides | linear : Css.Value.Supported }"},{"name":"linearGradient","comment":" Produces [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient())\nvalues used by properties such as [`backgroundImage`](#backgroundImage),\nand [`listStyleImage`](#listStyleImage)\n\n linearGradient (stop red) (stop blue) []\n\n linearGradient (stop red) (stop blue) [ stop green ]\n\n","type":"Css.Value.Value { colorStop : Css.Value.Supported } -> Css.Value.Value { colorStop : Css.Value.Supported } -> List.List (Css.Value.Value { colorStop : Css.Value.Supported }) -> Css.Value.Value { provides | linearGradient : Css.Value.Supported }"},{"name":"linearGradient2","comment":" Produces [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient())\nvalues used by properties such as [`backgroundImage`](#backgroundImage),\nand [`listStyleImage`](#listStyleImage)\n\n linearGradient2 toTop (stop red) (stop blue) []\n\n linearGradient2 toTop (stop red) (stop blue) [ stop green ]\n\n","type":"Css.Value.Value (Css.AngleSupported { toBottom : Css.Value.Supported, toBottomLeft : Css.Value.Supported, toBottomRight : Css.Value.Supported, toLeft : Css.Value.Supported, toRight : Css.Value.Supported, toTop : Css.Value.Supported, toTopLeft : Css.Value.Supported, toTopRight : Css.Value.Supported }) -> Css.Value.Value { colorStop : Css.Value.Supported } -> Css.Value.Value { colorStop : Css.Value.Supported } -> List.List (Css.Value.Value { colorStop : Css.Value.Supported }) -> Css.Value.Value { provides | linearGradient : Css.Value.Supported }"},{"name":"liningNums","comment":" The `lining-nums` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric liningNums\n\n","type":"Css.Value.Value { provides | liningNums : Css.Value.Supported }"},{"name":"link","comment":" A [`:link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:link)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n link\n [ color (rgb 0 0 255)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"listItem","comment":" The `list-item` value used by [`display`](#display).\n\n display listItem\n\n","type":"Css.Value.Value { provides | listItem : Css.Value.Supported }"},{"name":"listStyle","comment":" The [`list-style`](https://css-tricks.com/almanac/properties/l/list-style/) shorthand property.\n\n listStyle lowerAlpha\n\n listStyle outside\n\n listStyle (url \"https://example.com\")\n\n","type":"Css.BaseValue (Css.ListStyleTypeSupported (Css.ImageSupported { inside : Css.Value.Supported, outside : Css.Value.Supported })) -> Css.Style"},{"name":"listStyle2","comment":" The [`list-style`](https://css-tricks.com/almanac/properties/l/list-style/) shorthand property.\n\n listStlye2 lowerAlpha inside\n\nFor other combinations of two values please use the dedicated functions:\n[`listStyleType`](#listStyleType),\n[`listStlyePosition`](#listStlyePosition),\nand [`listStyleImage`](#listStyleImage)\n\n","type":"Css.Value.Value Css.ListStyleType -> Css.Value.Value { inside : Css.Value.Supported, outside : Css.Value.Supported } -> Css.Style"},{"name":"listStyle3","comment":" The [`list-style`](https://css-tricks.com/almanac/properties/l/list-style/) shorthand property.\n\n listStyle3 arabic outside (url \"https://example.com\")\n\n","type":"Css.Value.Value Css.ListStyleType -> Css.Value.Value { inside : Css.Value.Supported, outside : Css.Value.Supported } -> Css.Value.Value (Css.ImageSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"listStyleImage","comment":" The [`list-style-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image) property.\n\n listStyleImage (url \"https://example.com\")\n\n","type":"Css.BaseValue (Css.ImageSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"listStylePosition","comment":" The [`list-style-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position) property\n\n listStylePosition inside\n\n listStylePosition outside\n\n","type":"Css.BaseValue { inside : Css.Value.Supported, outside : Css.Value.Supported } -> Css.Style"},{"name":"listStyleType","comment":" The [`list-style-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) property.\n\n listStyleType decimalLeadingZero\n\n","type":"Css.BaseValue Css.ListStyleType -> Css.Style"},{"name":"local","comment":" The `local` [`background-attachment` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#Values)\n\n backgroundAttachment local\n\n","type":"Css.Value.Value { provides | local : Css.Value.Supported }"},{"name":"loose","comment":" Sets `loose` value for usage with [`lineBreak`](#lineBreak).\n\n lineBreak loose\n\n","type":"Css.Value.Value { provides | loose : Css.Value.Supported }"},{"name":"lowerAlpha","comment":" The `lower-alpha` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lowerAlpha\n\n","type":"Css.Value.Value { provides | lowerAlpha : Css.Value.Supported }"},{"name":"lowerArmenian","comment":" The `lower-armenian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lowerArmenian\n\n","type":"Css.Value.Value { provides | lowerArmenian : Css.Value.Supported }"},{"name":"lowerGreek","comment":" The `lower-greek` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lowerGreek\n\n","type":"Css.Value.Value { provides | lowerGreek : Css.Value.Supported }"},{"name":"lowerLatin","comment":" The `lower-latin` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lowerLatin\n\n","type":"Css.Value.Value { provides | lowerLatin : Css.Value.Supported }"},{"name":"lowerRoman","comment":" The `lower-roman` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType lowerRoman\n\n","type":"Css.Value.Value { provides | lowerRoman : Css.Value.Supported }"},{"name":"lowercase","comment":" A `lowercase` value for the [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Syntax) property.\n\n textTransform lowercase\n\n","type":"Css.Value.Value { provides | lowercase : Css.Value.Supported }"},{"name":"ltr","comment":" A `ltr` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property.\n\n direction ltr\n\n","type":"Css.Value.Value { provides | ltr : Css.Value.Supported }"},{"name":"luminance","comment":" Sets `luminance` value for usage with [`maskMode`](#maskMode), [`maskType`](#maskType) and [`maskBorderMode`](#maskBorderMode).\n\n maskMode luminance\n\n maskType luminance\n\n maskBorderMode luminance\n\n","type":"Css.Value.Value { provides | luminance : Css.Value.Supported }"},{"name":"luminosity","comment":" The `luminosity` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode luminosity\n\n","type":"Css.Value.Value { provides | luminosity : Css.Value.Supported }"},{"name":"malayalam","comment":" The `malayalam` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType malayalam\n\n","type":"Css.Value.Value { provides | malayalam : Css.Value.Supported }"},{"name":"mandatory","comment":" Sets `mandatory` value for usage with [`scrollSnapType2`](#scrollSnapType2).\n\n scrollSnapType2 x mandatory\n\n","type":"Css.Value.Value { provides | mandatory : Css.Value.Supported }"},{"name":"manipulation","comment":" The `manipulation` value used by [`touch-action`](#touchAction).\n\n touchAction manipulation\n\n","type":"Css.Value.Value { provides | manipulation : Css.Value.Supported }"},{"name":"manual","comment":" Sets `manual` value for usage with [`hyphens`](#hyphens).\n\n hyphens manual\n\n","type":"Css.Value.Value { provides | manual : Css.Value.Supported }"},{"name":"margin","comment":" Sets [`margin`](https://css-tricks.com/almanac/properties/m/margin/) property.\nThe `margin` property is a shorthand property for setting `margin-top`,\n`margin-right`, `margin-bottom`, and `margin-left` in a single declaration.\n\nIf there is only one argument value, it applies to all sides. If there are two\nvalues, the top and bottom margins are set to the first value and the right and\nleft margins are set to the second. If there are three values, the top is set\nto the first value, the left and right are set to the second, and the bottom is\nset to the third. If there are four values they apply to the top, right,\nbottom, and left, respectively.\n\n margin (em 4) -- set all margins to 4em\n\n margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\n margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"margin2","comment":" Sets [`margin`](https://css-tricks.com/almanac/properties/m/margin/) property.\nThe `margin2` property is a shorthand property for setting `margin-top`,\n`margin-right`, `margin-bottom`, and `margin-left` in a single declaration.\n\nThe top and bottom margins are set to the first value and the right and left\nmargins are set to the second.\n\n margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"margin3","comment":" Sets [`margin`](https://css-tricks.com/almanac/properties/m/margin/) property.\nThe `margin3` property is a shorthand property for setting `margin-top`,\n`margin-right`, `margin-bottom`, and `margin-left` in a single declaration.\n\nThe top margin is set to the first value, the left and right are set to the\nsecond, and the bottom is set to the third.\n\n margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"margin4","comment":" Sets [`margin`](https://css-tricks.com/almanac/properties/m/margin/) property.\nThe `margin4` property is a shorthand property for setting `margin-top`,\n`margin-right`, `margin-bottom`, and `margin-left` in a single declaration.\n\nThe four values apply to the top, right, bottom, and left margins.\n\n margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBlock","comment":" Sets [`margin-block`](https://css-tricks.com/almanac/properties/m/margin-block/) property.\nThe `margin-block` property is a shorthand property for setting `margin-block-start` and\n`margin-block-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the block start margin is set to the first value and the block end margin\nis set to the second.\n\n marginBlock (em 4) -- set both block margins to 4em\n\n marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBlock2","comment":" Sets [`margin-block`](https://css-tricks.com/almanac/properties/m/margin-block/) property.\nThe `margin-block` property is a shorthand property for setting `margin-block-start` and\n`margin-block-end` in a single declaration.\n\nThe block start margin is set to the first value and the block end margin\nis set to the second.\n\n marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBlockEnd","comment":" Sets [`margin-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end) property.\n\n marginBlockEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBlockStart","comment":" Sets [`margin-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start) property.\n\n marginBlockStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBottom","comment":" Sets [`margin-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) property.\n\n marginBottom (px 4)\n\nThis article on [`margin-top` versus `margin-bottom`](https://css-tricks.com/margin-bottom-margin-top/) may be useful.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginBox","comment":" The `margin-box` value, used in [`clipPath`](#clipPath).\n\n```\nclipPath marginBox\n```\n","type":"Css.Value.Value { provides | marginBox : Css.Value.Supported }"},{"name":"marginInline","comment":" Sets [`margin-inline`](https://css-tricks.com/almanac/properties/m/margin-inline/) property.\nThe `margin-inline` property is a shorthand property for setting `margin-inline-start` and\n`margin-inline-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the inline start margin is set to the first value and the inline end margin\nis set to the second.\n\n marginInline (em 4) -- set both inline margins to 4em\n\n marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginInline2","comment":" Sets [`margin-inline`](https://css-tricks.com/almanac/properties/m/margin-inline/) property.\nThe `margin-inline` property is a shorthand property for setting `margin-inline-start` and\n`margin-inline-end` in a single declaration.\n\nThe inline start margin is set to the first value and the inline end margin\nis set to the second.\n\n marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\nYou may want to check out [this article on collapsing margins](https://css-tricks.com/good-ol-margin-collapsing/)!\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginInlineEnd","comment":" Sets [`margin-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end) property.\n\n marginInlineEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginInlineStart","comment":" Sets [`margin-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start) property.\n\n marginInlineStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginLeft","comment":" Sets [`margin-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) property.\n\n marginLeft (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginRight","comment":" Sets [`margin-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) property.\n\n marginRight (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marginTop","comment":" Sets [`margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) property.\n\n marginTop (px 4)\n\nThis article on [`margin-top` versus `margin-bottom`](https://css-tricks.com/margin-bottom-margin-top/) may be useful.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"marker","comment":" A [`::marker`](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n marker\n [ color (rgba 255 255 0 1)\n , fontWeight (int 600)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"markers","comment":" Provides the `markers` value for [`paintOrder`](#paintOrder).\n\n paintOrder markers\n\n","type":"Css.Value.Value { provides | markers : Css.Value.Supported }"},{"name":"maskBorderMode","comment":" Sets the [`mask-border-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-mode)\nproperty.\n\n maskBorderMode inherit\n\n maskBorderMode luminance\n","type":"Css.BaseValue { luminance : Css.Value.Supported, alpha : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderOutset","comment":" Sets the 1-argument variant of the [`mask-border-outset`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset)\nproperty.\n\n maskBorderOutset revert\n\n maskBorderOutset (num 2.5)\n\n maskBorderOutset (px 30)\n\n -- top+bottom | left+right\n maskBorderOutset2 (px 30) (px 10)\n\n -- top | left+right | bottom\n maskBorderOutset3 (px 12) (px 16) (px 4)\n \n -- top | right | bottom | left\n maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)\n","type":"Css.BaseValue (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderOutset2","comment":" Sets the 2-argument variant of the [`mask-border-outset`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset)\nproperty.\n \n -- top+bottom | left+right\n maskBorderOutset2 (px 30) (px 10)\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderOutset3","comment":" Sets the 3-argument variant of the [`mask-border-outset`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset)\nproperty.\n\n -- top | left+right | bottom\n maskBorderOutset3 (px 12) (px 16) (px 4)\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderOutset4","comment":" Sets the 4-argument variant of the [`mask-border-outset`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset)\nproperty.\n\n -- top | right | bottom | left\n maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)\n","type":"Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderRepeat","comment":" Sets the 1-argument variant of the [`mask-border-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-repeat)\nproperty.\n\n maskBorderRepeat stretch\n\n maskBorderRepeat revert\n\n maskBorderRepeat2 stretch repeat\n","type":"Css.BaseValue { stretch : Css.Value.Supported, repeat : Css.Value.Supported, round_ : Css.Value.Supported, space : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderRepeat2","comment":" Sets the 2-argument variant of the [`mask-border-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-repeat)\nproperty.\n\n maskBorderRepeat2 stretch repeat\n","type":"Css.Value.Value { stretch : Css.Value.Supported, repeat : Css.Value.Supported, round_ : Css.Value.Supported, space : Css.Value.Supported } -> Css.Value.Value { stretch : Css.Value.Supported, repeat : Css.Value.Supported, round_ : Css.Value.Supported, space : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderSlice","comment":" Sets the 1-argument variant of the [`mask-border-slice`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice)\nproperty.\n\n maskBorderSlice initial\n\n maskBorderSlice (num 2.5)\n\n maskBorderSlice (rem 3)\n\n -- top+bottom | left+right\n maskBorderSlice2 (num 30) (pct 10)\n\n -- top | left+right | bottom\n maskBorderSlice3 (px 12) (num 2) fill_\n \n -- top | right | bottom | left\n maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)\n","type":"Css.BaseValue { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderSlice2","comment":" Sets the 2-argument variant of the [`mask-border-slice`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice)\nproperty.\n\n -- top+bottom | left+right\n maskBorderSlice2 (num 30) (pct 10)\n","type":"Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderSlice3","comment":" Sets the 3-argument variant of the [`mask-border-slice`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice)\nproperty.\n\n -- top | left+right | bottom\n maskBorderSlice3 (px 12) (num 2) fill_\n","type":"Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderSlice4","comment":" Sets the 4-argument variant of the [`mask-border-slice`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice)\nproperty.\n\n -- top | right | bottom | left\n maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)\n","type":"Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported, pct : Css.Value.Supported, fill_ : Css.Value.Supported } -> Css.Style"},{"name":"maskBorderWidth","comment":" Sets the 1-argument variant of the [`mask-border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width)\nproperty.\n\n maskBorderWidth initial\n\n maskBorderWidth auto\n\n maskBorderWidth (rem 3)\n\n -- top+bottom | left+right\n maskBorderWidth2 (num 30) (pct 10)\n\n -- top | left+right | bottom\n maskBorderWidth3 (px 12) auto (px 20)\n \n -- top | right | bottom | left\n maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderWidth2","comment":" Sets the 2-argument variant of the [`mask-border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width)\nproperty.\n\n -- top+bottom | left+right\n maskBorderWidth2 (num 30) (pct 10)\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderWidth3","comment":" Sets the 3-argument variant of the [`mask-border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width)\nproperty.\n\n -- top | left+right | bottom\n maskBorderWidth3 (px 12) auto (px 20)\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"maskBorderWidth4","comment":" Sets the 4-argument variant of the [`mask-border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width)\nproperty.\n\n -- top | right | bottom | left\n maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported }) -> Css.Style"},{"name":"maskClip","comment":" The 1-argument variant of the [`mask-clip`](https://css-tricks.com/almanac/properties/m/mask-clip/)\nproperty.\n\nThis does not support non-standard keyword values such as `border`.\n\n maskClip contentBox\n\n maskClip revert\n\n maskClipMany [contentBox, marginBox, noClip]\n\n","type":"Css.BaseValue { contentBox : Css.Value.Supported, paddingBox : Css.Value.Supported, borderBox : Css.Value.Supported, marginBox : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, viewBox : Css.Value.Supported, noClip : Css.Value.Supported } -> Css.Style"},{"name":"maskClipMany","comment":" The multi-argument variant of the [`mask-clip`](https://css-tricks.com/almanac/properties/m/mask-clip/)\nproperty.\n\nThis does not support non-standard keyword values such as `border`.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n maskClipMany [contentBox, marginBox, noClip]\n \n maskClipMany [] -- mask-clip: unset;\n","type":"List.List (Css.Value.Value { contentBox : Css.Value.Supported, paddingBox : Css.Value.Supported, borderBox : Css.Value.Supported, marginBox : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, viewBox : Css.Value.Supported, noClip : Css.Value.Supported }) -> Css.Style"},{"name":"maskComposite","comment":" The [`mask-composite`](https://css-tricks.com/almanac/properties/m/mask-composite/)\nproperty.\n\n maskComposite add\n\n maskComposite revert\n","type":"Css.BaseValue { add : Css.Value.Supported, subtract : Css.Value.Supported, intersect : Css.Value.Supported, exclude : Css.Value.Supported } -> Css.Style"},{"name":"maskMode","comment":" The 1-argument variant of the [`mask-mode`](https://css-tricks.com/almanac/properties/m/mask-mode/)\nproperty.\n\n maskMode inherit\n\n maskMode alpha\n\n maskModeMany [alpha, luminance, alpha, matchSource]\n","type":"Css.BaseValue { alpha : Css.Value.Supported, luminance : Css.Value.Supported, matchSource : Css.Value.Supported } -> Css.Style"},{"name":"maskModeMany","comment":" The multi-argument variant of the [`mask-mode`](https://css-tricks.com/almanac/properties/m/mask-mode/)\nproperty.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n maskModeMany [alpha, luminance, alpha, matchSource]\n\n maskModeMany [] -- mask-mode: unset;\n","type":"List.List (Css.Value.Value { alpha : Css.Value.Supported, luminance : Css.Value.Supported, matchSource : Css.Value.Supported }) -> Css.Style"},{"name":"maskOrigin","comment":" The 1-argument variant of the [`mask-origin`](https://css-tricks.com/almanac/properties/m/mask-origin/)\nproperty.\n\n maskOrigin inherit\n\n maskOrigin contentBox\n\n maskOriginMany [paddingBox, borderBox]\n","type":"Css.BaseValue { contentBox : Css.Value.Supported, paddingBox : Css.Value.Supported, borderBox : Css.Value.Supported, marginBox : Css.Value.Supported } -> Css.Style"},{"name":"maskOriginMany","comment":" The multi-argument variant of the [`mask-origin`](https://css-tricks.com/almanac/properties/m/mask-origin/)\nproperty.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n maskOriginMany [paddingBox, borderBox]\n\n maskOriginMany [] -- mask-origin: unset;\n","type":"List.List (Css.Value.Value { contentBox : Css.Value.Supported, paddingBox : Css.Value.Supported, borderBox : Css.Value.Supported, marginBox : Css.Value.Supported }) -> Css.Style"},{"name":"maskPosition","comment":" The 1-argument variant of the [`mask-position`](https://css-tricks.com/almanac/properties/m/mask-position/)\nproperty.\n\n maskPosition top_\n\n maskPosition inherit\n","type":"Css.BaseValue { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported } -> Css.Style"},{"name":"maskRepeat","comment":" The 1-argument variant of the [`mask-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat)\nproperty.\n\n maskRepeat revert\n\n maskRepeat repeatX\n\n maskRepeat Css.round\n\n maskRepeat2 repeat space\n\n","type":"Css.BaseValue { repeat : Css.Value.Supported, repeatX : Css.Value.Supported, repeatY : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"maskRepeat2","comment":" The 2-argument variant of the [`mask-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat)\nproperty.\n\n maskRepeat2 repeat space\n","type":"Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"maskSize","comment":" The 1-argument variant of the [`mask-size`](https://css-tricks.com/almanac/properties/m/mask-size/)\nproperty.\n\n maskSize auto\n\n maskSize (pct 20)\n\n maskSize (rem 200)\n\n maskSize2 auto (pct 10)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, cover : Css.Value.Supported, contain_ : Css.Value.Supported }) -> Css.Style"},{"name":"maskSize2","comment":" The 2-argument variant of the [`mask-size`](https://css-tricks.com/almanac/properties/m/mask-size/)\nproperty.\n\n maskSize auto\n\n maskSize (pct 20)\n\n maskSize (rem 200)\n\n maskSize2 auto (pct 10)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"maskType","comment":" Sets the [`mask-type`](https://css-tricks.com/almanac/properties/m/mask-type/)\nproperty.\n\n maskType inherit\n\n maskType luminance\n","type":"Css.BaseValue { luminance : Css.Value.Supported, alpha : Css.Value.Supported } -> Css.Style"},{"name":"matchParent","comment":" A `match-parent` value for the [`text-align`](https://css-tricks.com/almanac/properties/t/text-align/),\nand [`strokeOrigin`](#strokeOrigin) properties.\n\n textAlign matchParent\n\n strokeOrigin matchParent\n\n","type":"Css.Value.Value { provides | matchParent : Css.Value.Supported }"},{"name":"matchSource","comment":" Sets `match-source` value for usage with [`maskMode`](#maskMode).\n\n maskMode matchSource\n\n","type":"Css.Value.Value { provides | matchSource : Css.Value.Supported }"},{"name":"math","comment":" The `math` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily math\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | math : Css.Value.Supported }"},{"name":"matrix","comment":" Sets `matrix` value for usage with [`transform`](#transform).\nThe first four numeric values describe the linear transformation.\nThe last two numeric values describe the translation to apply.\n\n transform (matrix 1 2 -1 1 80 80)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | matrix : Css.Value.Supported }"},{"name":"matrix3d","comment":" Sets `matrix3d` value for usage with [`transform`](#transform).\nEvery fourth number describes the translation to apply. All other describe the\nlinear tranformation.\n\n transform (matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | matrix3d : Css.Value.Supported }"},{"name":"maxBlockSize","comment":" The [`max-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size) property.\n\n maxBlockSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, none : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"maxContent","comment":" The `max-content` value used for properties such as:\n\n - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize))\n\n - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth))\n\n - [`flexBasis`](#flexBasis)\n\n```\nwidth maxContent\n```\n\n","type":"Css.Value.Value { provides | maxContent : Css.Value.Supported }"},{"name":"maxHeight","comment":" The [`max-height`](https://css-tricks.com/almanac/properties/m/min-height/) property.\n\n maxHeight (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, none : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"maxInlineSize","comment":" The [`max-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size) property.\n\n maxInlineSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, none : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"maxWidth","comment":" The [`max-width`](https://css-tricks.com/almanac/properties/m/max-width/) property.\n\n maxWidth (px 150)\n\n maxWidth (em 1.5)\n\n maxWidth auto\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, none : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"medium","comment":" The `medium` value used by properties such as [`fontSize`](#fontSize),\n[`borderWidth`](#borderWidth),\n[`columnRuleWidth`](#columnRuleWidth).\n\n fontSize medium\n\n borderWidth medium\n\n columnRuleWidth medium\n\nThe value is equivalent of 3px when using for `border-width`.\n\n","type":"Css.Value.Value { provides | medium : Css.Value.Supported }"},{"name":"middle","comment":" A `middle` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property.\n\n verticalAlign middle\n\n","type":"Css.Value.Value { provides | middle : Css.Value.Supported }"},{"name":"minBlockSize","comment":" The [`min-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size) property.\n\n minBlockSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"minContent","comment":" The `min-content` value used for properties such as:\n\n - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize))\n\n - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth))\n\n - [`flexBasis`](#flexBasis)\n\n```\nwidth minContent\n```\n\n","type":"Css.Value.Value { provides | minContent : Css.Value.Supported }"},{"name":"minHeight","comment":" The [`min-height`](https://css-tricks.com/almanac/properties/m/min-height/) property.\n\n minHeight (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"minInlineSize","comment":" The [`min-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size) property.\n\n minInlineSize (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"minWidth","comment":" The [`min-width`](https://css-tricks.com/almanac/properties/m/min-width/) property.\n\n minWidth (px 150)\n\n minWidth (em 1.5)\n\n minWidth auto\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"minmax","comment":" The [`minmax()`](https://css-tricks.com/minmax-function-works/)\nvalue for grid properties.\n\n gridAutoRows (minmax (px 2) (pct 100))\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, fr : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, fr : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value { provides | minmax : Css.Value.Supported }"},{"name":"minus","comment":" Use with [`calc`](#calc) to subtract one value from another.\n\n calc (pct 100) (minus (px 2))\n -- calc: (100% - 2px)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, int : Css.Value.Supported }) -> Css.CalcOperation"},{"name":"miter","comment":" Sets `miter` value for usage with [`strokeLinejoin`](#strokeLinejoin).\n\n strokeLinejoin miter\n\n","type":"Css.Value.Value { provides | miter : Css.Value.Supported }"},{"name":"mixBlendMode","comment":" Sets [`mix-blend-mode`](https://css-tricks.com/almanac/properties/m/mix-blend-mode/)\n\n mixBlendMode multiply\n\n mixBlendMode saturation\n\n","type":"Css.BaseValue Css.BlendMode -> Css.Style"},{"name":"mixed","comment":" A `mixed` value for the\n[`textOrientation`](#textOrientation) property.\n\n textOrientation mixed\n\n","type":"Css.Value.Value { provides | mixed : Css.Value.Supported }"},{"name":"mm","comment":" [`mm`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (mm 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | mm : Css.Value.Supported }"},{"name":"monogolian","comment":" The `monogolian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType monogolian\n\n","type":"Css.Value.Value { provides | monogolian : Css.Value.Supported }"},{"name":"monospace","comment":" The `monospace` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#3Cgeneric-name%3E).\n\n fontFamily monospace\n\n fontFamilyMany [ \"Source Code Pro\", \"Lucida Console\" ] monospace\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | monospace : Css.Value.Supported }"},{"name":"move","comment":" The `move` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | move : Css.Value.Supported }"},{"name":"ms","comment":" The [`ms`](https://developer.mozilla.org/en-US/docs/Web/CSS/time) time unit.\n\n animationDuration (ms 120)\n\n","type":"Basics.Float -> Css.Value.Value { provides | ms : Css.Value.Supported }"},{"name":"multiply","comment":" The `multiply` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode multiply\n\n","type":"Css.Value.Value { provides | multiply : Css.Value.Supported }"},{"name":"myanmar","comment":" The `myanmar` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType myanmar\n\n","type":"Css.Value.Value { provides | myanmar : Css.Value.Supported }"},{"name":"nResize","comment":" The `n-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | nResize : Css.Value.Supported }"},{"name":"neResize","comment":" The `ne-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | neResize : Css.Value.Supported }"},{"name":"neswResize","comment":" The `nesw-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | neswResize : Css.Value.Supported }"},{"name":"noClip","comment":" Sets `no-clip` value for usage with [`maskClip`](#maskClip).\n\n maskClip noClip\n\n","type":"Css.Value.Value { provides | noClip : Css.Value.Supported }"},{"name":"noCommonLigatures","comment":" The `no-common-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures noCommonLigatures\n\n","type":"Css.Value.Value { provides | noCommonLigatures : Css.Value.Supported }"},{"name":"noContextual","comment":" The `no-contextual` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures noContextual\n\n","type":"Css.Value.Value { provides | noContextual : Css.Value.Supported }"},{"name":"noDiscretionaryLigatures","comment":" The `no-discretionary-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures noDiscretionaryLigatures\n\n","type":"Css.Value.Value { provides | noDiscretionaryLigatures : Css.Value.Supported }"},{"name":"noDrop","comment":" The `no-drop` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | noDrop : Css.Value.Supported }"},{"name":"noHistoricalLigatures","comment":" The `no-historical-ligatures` [`font-variant-ligatures` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Values).\n\n fontVariantLigatures noHistoricalLigatures\n\n","type":"Css.Value.Value { provides | noHistoricalLigatures : Css.Value.Supported }"},{"name":"noRepeat","comment":" The `no-repeat` value for [background properties](#backgroundRepeat)\nand [`strokeRepeat`](#strokeRepeat).\n\n backgroundRepeat noRepeat\n\n strokeRpeat noRepeat\n\n","type":"Css.Value.Value { provides | repeat : Css.Value.Supported }"},{"name":"none","comment":" The `none` value used in many properties such as (but not limited to) [`display`](#display),\n[`borderStyle`](#borderStyle),\n[`maxWidth`](#maxWidth),\n[`clear`](#clear),\n[`strokeDashJustify`](#strokeDashJustify),\nand [`flex`](#flex).\n\n display none\n\n borderStyle none\n\n strokeDashJustify none\n\n flex none\n\n","type":"Css.Value.Value { provides | none : Css.Value.Supported }"},{"name":"normal","comment":" The `normal` value, which can be used with such properties as:\n\n - [`fontVariantCaps`](#fontVariantCaps)\n - [`fontKerning`](#fontKerning)\n - [`fontLanguageOverride`](#fontLanguageOverride)\n - [`whiteSpace`](#whiteSpace)\n - [`wordBreak`](#wordBreak)\n - [`columnGap`](#columnGap)\n - [`zoom`](#zoom)\n - [`animationDirection`](#animationDirection)\n - [`alignItems`](#alignItems)\n - [`lineBreak`](#lineBreak)\n\n```\nalignItems normal\n\ncolumnGap normal\n\nfontVariantCaps normal\n\nwhiteSpace normal\n\nwordBreak normal\n\nzoom normal\n```\n\n","type":"Css.Value.Value { provides | normal : Css.Value.Supported }"},{"name":"not","comment":" A [`:not()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\nThe first argument is a list of selectors to not select.\n\n not [\"p.notthis\", \".notthat\"]\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"List.List String.String -> List.List Css.Style -> Css.Style"},{"name":"notAllowed","comment":" The `notAllowed` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | notAllowed : Css.Value.Supported }"},{"name":"nowrap","comment":" A `nowrap` value for the [`white-space`](#whiteSpace)\nand [`flex-wrap`](#flexWrap)properties.\n\n whiteSpace nowrap\n\n flexWrap nowrap\n\n","type":"Css.Value.Value { provides | nowrap : Css.Value.Supported }"},{"name":"nsResize","comment":" The `ns-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | nsResize : Css.Value.Supported }"},{"name":"nthChild","comment":" An [`:nth-child()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n nthChild \"3\"\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"nthLastChild","comment":" An [`:nth-last-child()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\nThis is the same as [`nthChild`](#nthChild), but counting from the end rather than the start.\n\n nthLastChild \"3n+4\"\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"nthLastOfType","comment":" An [`:nth-last-of-type()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n nthLastOfType \"0n+1\"\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"nthOfType","comment":" An [`:nth-of-type()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n nthOfType \"odd\"\n [ backgroundColor (hex \"#ff0000\")\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"num","comment":" A unitless number. Useful with properties like\n[`flexGrow`](#flexGrow),\nand [`order`](#order)\nwhich accept unitless numbers.\n\n flexGrow (num 2)\n\n order (num -2)\n\n","type":"Basics.Float -> Css.Value.Value { provides | num : Css.Value.Supported }"},{"name":"nwResize","comment":" The `nw-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | nwResize : Css.Value.Supported }"},{"name":"nwseResize","comment":" The `nwse-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | nwseResize : Css.Value.Supported }"},{"name":"objectFit","comment":" Sets [`object-fit`](https://css-tricks.com/almanac/properties/o/object-fit/)\n\n objectFit fill_\n\n objectFit contain_\n\n objectFit cover\n\n objectFit scaleDown\n\n objectFit none\n\n","type":"Css.BaseValue { fill_ : Css.Value.Supported, contain_ : Css.Value.Supported, cover : Css.Value.Supported, none : Css.Value.Supported, scaleDown : Css.Value.Supported } -> Css.Style"},{"name":"objectPosition","comment":" Sets [`object-position`](https://css-tricks.com/almanac/properties/o/object-position/).\n\n objectPosition left_\n\n objectPosition (px 45)\n\n`objectPosition` sets the horizontal direction. If you need the vertical\ndirection instead, use [`objectPosition2`](#objectPosition2) like this:\n\n objectPosition zero (px 45)\n\nIf you need to set the offsets from the right or bottom, use\n[`objectPosition4`](#objectPosition4) like this:\n\n objectPosition4 right_ (px 20) bottom_ (pct 25)\n\n","type":"Css.BaseValue (Css.LengthSupported { left_ : Css.Value.Supported, right_ : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Style"},{"name":"objectPosition2","comment":" Sets [`object-position`](https://css-tricks.com/almanac/properties/o/object-position/).\n\n objectPosition2 left_ top_\n\n objectPosition2 (px 45) (pct 50)\n\n`objectPosition2` sets both the horizontal and vertical directions (in that\norder, same as CSS.) If you need only the horizontal, you can use\n[`objectPosition`](#objectPosition) instead:\n\n objectPosition left_\n\nIf you need to set the offsets from the right or bottom, use\n[`objectPosition4`](#objectPosition4) like this:\n\n objectPosition4 right_ (px 20) bottom_ (pct 25)\n\n","type":"Css.Value.Value (Css.LengthSupported { left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"objectPosition4","comment":" Sets [`object-position`](https://css-tricks.com/almanac/properties/o/object-position/).\n\n objectPosition4 right_ (px 20) bottom_ (pct 30)\n\nThe four-argument form of object position alternates sides and offets. So the\nexample above would position the object image 20px from the right, and 30%\nfrom the bottom.\n\nSee also [`objectPosition`](#objectPosition) for horizontal alignment and\n[`objectPosition2`](#objectPosition2) for horizontal (from left) and\nvertical (from top) alignment.\n\n","type":"Css.Value.Value { left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"oblique","comment":" ","type":"Css.Value.Value { provides | oblique : Css.Value.Supported }"},{"name":"oldstyleNums","comment":" The `oldstyle-nums` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric oldstyleNums\n\n","type":"Css.Value.Value { provides | oldstyleNums : Css.Value.Supported }"},{"name":"onlyChild","comment":" An [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n onlyChild\n [ backgroundColor (rgb 255 255 255)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"onlyOfType","comment":" An [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n onlyOfType\n [ color (rgb 255 0 0)\n , fontStyle italic\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"opacity","comment":" Sets [`opacity`](https://css-tricks.com/almanac/properties/o/opacity/)\n\n opacity (num 0.5)\n\n opacity (num 1.0)\n\n opacity zero\n\n","type":"Css.BaseValue { num : Css.Value.Supported, zero : Css.Value.Supported, calc : Css.Value.Supported, pct : Css.Value.Supported } -> Css.Style"},{"name":"opacity_","comment":" Provides a [`opacity()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity).\n\n backdropFilter <| opacity_ (pct 20)\n -- backdrop-filter: opacity(20%);\n\n backdropFilter <| opacity_ zero -- completely transparent\n\n backdropFilter <| opacity_ (num 1) -- no effect\n\n backdropFilter <| opacity_ (num 0.4) -- 40% transparent\n\nNote: This is called `opacity_` instead of `opacity` because [`opacity`](#opacity) is already used as a property function.\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | opacity_ : Css.Value.Supported }"},{"name":"open","comment":" The `open` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis open\n\n","type":"Css.Value.Value { provides | open : Css.Value.Supported }"},{"name":"optimizeLegibility","comment":" An `optimizeLegibility` value for the [`text-rendering`](https://css-tricks.com/almanac/properties/t/text-rendering/) property.\n\n textRendering optimizeLegibility\n\n","type":"Css.Value.Value { provides | optimizeLegibility : Css.Value.Supported }"},{"name":"optimizeSpeed","comment":" An `optimizeSpeed` value for the [`text-rendering`](https://css-tricks.com/almanac/properties/t/text-rendering/) property.\n\n textRendering optimizeSpeed\n\n","type":"Css.Value.Value { provides | optimizeSpeed : Css.Value.Supported }"},{"name":"optional","comment":" Sets `optional` value for usage with [`fontDisplay`](#fontDisplay).\n\n fontDisplay optional\n\n","type":"Css.Value.Value { provides | optional : Css.Value.Supported }"},{"name":"order","comment":" Sets [`order`](https://css-tricks.com/almanac/properties/o/order/)\n\n order (num 2)\n\n order (num -2)\n\n","type":"Css.BaseValue { int : Css.Value.Supported, zero : Css.Value.Supported } -> Css.Style"},{"name":"ordinal","comment":" The `ordinal` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric ordinal\n\n","type":"Css.Value.Value { provides | ordinal : Css.Value.Supported }"},{"name":"oriya","comment":" The `oriya` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType oriya\n\n","type":"Css.Value.Value { provides | oriya : Css.Value.Supported }"},{"name":"orphans","comment":" Sets [`orphans`](https://css-tricks.com/almanac/properties/o/orphans/)\n**Note:** This function accepts only positive integers.\n\n orphans (int 2)\n\n","type":"Css.BaseValue { int : Css.Value.Supported } -> Css.Style"},{"name":"outOfRange","comment":" An [`:out-of-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n outOfRange\n [ color (rgb 255 0 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"outline","comment":" Sets [`outline`](https://css-tricks.com/almanac/properties/o/outline/).\n\n outline zero\n\n outline none\n\n","type":"Css.BaseValue (Css.LineWidthSupported (Css.LineStyleSupported (Css.ColorSupported { auto : Css.Value.Supported, invert_ : Css.Value.Supported }))) -> Css.Style"},{"name":"outline3","comment":" Sets [`outline`](https://css-tricks.com/almanac/properties/o/outline/).\n\n outline3 (em 0.25) auto (rgb 120 250 32)\n\n","type":"Css.Value.Value Css.LineWidth -> Css.Value.Value (Css.LineStyleSupported { auto : Css.Value.Supported }) -> Css.Value.Value (Css.ColorSupported { invert_ : Css.Value.Supported }) -> Css.Style"},{"name":"outlineColor","comment":" Sets [`outline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color).\n\n outlineColor (hex \"eee\")\n\n outlineColor invert_\n\n","type":"Css.BaseValue (Css.ColorSupported { invert_ : Css.Value.Supported }) -> Css.Style"},{"name":"outlineOffset","comment":" Sets [`outline-offset`](https://css-tricks.com/almanac/properties/o/outline-offset/).\n\n outlineOffset (px 2)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"outlineStyle","comment":" Sets [`outline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style).\n\n outlineStyle auto\n\n outlineStyle dashed\n\n","type":"Css.BaseValue (Css.LineStyleSupported { auto : Css.Value.Supported }) -> Css.Style"},{"name":"outlineWidth","comment":" Sets [`outline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width).\n\n outlineWidth (px 2)\n\n outlineWidth thin\n\n","type":"Css.BaseValue Css.LineWidth -> Css.Style"},{"name":"outset","comment":" The `outset` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle),\nand [`textDecorationStyle`](#textDecorationStyle),\nand [`strokeAlign`](#strokeAlign).\n\n borderStyle outset\n\n columnRuleStyle outset\n\n strokeAlign outset\n\n textDecorationStyle outset\n\nSimilar to [`inset_`](#inset_), but reverses the colors in a way that makes it appear slightly raised.\n\n","type":"Css.Value.Value { provides | outset : Css.Value.Supported }"},{"name":"outside","comment":" The `inside` value used for properties such as [`list-style-position`](#listStylePosition),\nand [`listStyle`](#listStyle).\n\n listStylePosition outside\n\n","type":"Css.Value.Value { provides | outside : Css.Value.Supported }"},{"name":"over","comment":" The `over` value used in [`textEmphasisPosition2`](#textEmphasisPosition2).\n\n textEmphasisPosition2 over left_\n\n","type":"Css.Value.Value { provides | over : Css.Value.Supported }"},{"name":"overflow","comment":" Sets [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/).\n\n overflow visible\n\n overflow hidden\n\n overflow scroll\n\n overflow auto\n\n overflow2 visible hidden -- x: visible, y: hidden\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported, clip : Css.Value.Supported } -> Css.Style"},{"name":"overflow2","comment":" Sets [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/).\n\n overflow visible\n\n overflow hidden\n\n overflow scroll\n\n overflow auto\n\n overflow2 visible hidden -- x: visible, y: hidden\n\n","type":"Css.Value.Value { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported, clip : Css.Value.Supported } -> Css.Value.Value { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported, clip : Css.Value.Supported } -> Css.Style"},{"name":"overflowAnchor","comment":" Sets [`overflow-anchor`](https://css-tricks.com/almanac/properties/o/overflow-anchor/)\n\n overflowAnchor auto\n\n overflowAnchor none\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overflowBlock","comment":" Sets [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block).\n\n overflowBlock visible\n\n overflowBlock hidden\n\n overflowBlock scroll\n\n overflowBlock auto\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"overflowInline","comment":" Sets [`overflow-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline).\n\n overflowInline visible\n\n overflowInline hidden\n\n overflowInline scroll\n\n overflowInline auto\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"overflowWrap","comment":" Sets [`overflow-wrap`](https://css-tricks.com/almanac/properties/o/overflow-wrap/)\n\n overflowWrap breakWord\n\n overflowWrap normal\n\n","type":"Css.BaseValue { anywhere : Css.Value.Supported, breakWord : Css.Value.Supported, normal : Css.Value.Supported } -> Css.Style"},{"name":"overflowX","comment":" Sets [`overflow-x`](https://css-tricks.com/almanac/properties/o/overflow/).\n\n overflowX visible\n\n overflowX hidden\n\n overflowX scroll\n\n overflowX auto\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported, clip : Css.Value.Supported } -> Css.Style"},{"name":"overflowY","comment":" Sets [`overflow-y`](https://css-tricks.com/almanac/properties/o/overflow/).\n\n overflowY visible\n\n overflowY hidden\n\n overflowY scroll\n\n overflowY auto\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, scroll : Css.Value.Supported, auto : Css.Value.Supported, clip : Css.Value.Supported } -> Css.Style"},{"name":"overlay","comment":" The `overlay` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode overlay\n\n","type":"Css.Value.Value { provides | overlay : Css.Value.Supported }"},{"name":"overline","comment":" The `overline` [`text-decoration-line`][text-decoration-line] value.\n\n textDecorationLine overline\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/#article-header-id-0\n\n","type":"Css.Value.Value { provides | overline : Css.Value.Supported }"},{"name":"overscrollBehavior","comment":" Sets the [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property.\n\nThis property is a shorthand for setting both `overscroll-behavior-x` and `overscroll-behavior-y`.\n\n overscrollBehavior auto -- sets both X and Y to auto\n\n overscrollBehavior2 auto contain -- X = auto, Y = contain.\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overscrollBehavior2","comment":" Sets the [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property.\n\nThis property is a shorthand for setting both `overscroll-behavior-x` and `overscroll-behavior-y`.\n\n overscrollBehavior2 auto contain_ -- X = auto, Y = contain.\n\n","type":"Css.Value.Value { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Value.Value { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overscrollBehaviorBlock","comment":" Sets the [`overscroll-behavior-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block) property.\n\n overscrollBehaviorBlock auto\n\n overscrollBehaviorBlock contain_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overscrollBehaviorInline","comment":" Sets the [`overscroll-behavior-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline) property.\n\n overscrollBehaviorInline auto\n\n overscrollBehaviorInline contain_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overscrollBehaviorX","comment":" Sets the [`overscroll-behavior-x`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property.\n\n overscrollBehaviorX auto\n\n overscrollBehaviorX contain_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"overscrollBehaviorY","comment":" Sets the [`overscroll-behavior-y`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property.\n\n overscrollBehaviorY auto\n\n overscrollBehaviorY contain_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, contain_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"padding","comment":" Sets [`padding`](https://css-tricks.com/almanac/properties/p/padding/) property.\nThe `padding` property is a shorthand property for setting `padding-top`,\n`padding-right`, `padding-bottom`, and `padding-left` in a single declaration.\n\nIf there is only one argument value, it applies to all sides. If there are two\nvalues, the top and bottom paddings are set to the first value and the right and\nleft paddings are set to the second. If there are three values, the top is set\nto the first value, the left and right are set to the second, and the bottom is\nset to the third. If there are four values they apply to the top, right,\nbottom, and left, respectively.\n\n padding (em 4) -- set all margins to 4em\n\n padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\n padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"padding2","comment":" Sets [`padding`](https://css-tricks.com/almanac/properties/p/padding/) property.\nThe `padding2` property is a shorthand property for setting `padding-top`,\n`padding-right`, `padding-bottom`, and `padding-left` in a single declaration.\n\nThe top and bottom margins are set to the first value and the right and left\nmargins are set to the second.\n\n padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"padding3","comment":" Sets [`padding`](https://css-tricks.com/almanac/properties/p/padding/) property.\nThe `padding3` property is a shorthand property for setting `padding-top`,\n`padding-right`, `padding-bottom`, and `padding-left` in a single declaration.\n\nThe top padding is set to the first value, the left and right are set to the\nsecond, and the bottom is set to the third.\n\n padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"padding4","comment":" Sets [`padding`](https://css-tricks.com/almanac/properties/p/padding/) property.\nThe `padding4` property is a shorthand property for setting `padding-top`,\n`padding-right`, `padding-bottom`, and `padding-left` in a single declaration.\n\nThe four values apply to the top, right, bottom, and left paddings.\n\n padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBlock","comment":" Sets [`padding-block`](https://css-tricks.com/almanac/properties/p/padding-block/) property.\nThe `padding-block` property is a shorthand property for setting `padding-block-start` and\n`padding-block-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the block start is set to the first value and the block end is set to the second.\n\n paddingBlock (em 4) -- set both block start and block end to 4em\n\n paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBlock2","comment":" Sets [`padding-block`](https://css-tricks.com/almanac/properties/p/padding-block/) property.\n\nThe `padding-block` property is a shorthand property for setting `padding-block-start` and\n`padding-block-end` in a single declaration.\n\nThe block start value is set to the first value and the block end value is set to the second.\n\n paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBlockEnd","comment":" Sets [`padding-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end) property.\n\n paddingBlockEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBlockStart","comment":" Sets [`padding-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start) property.\n\n paddingBlockStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBottom","comment":" Sets [`padding-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) property.\n\n paddingBottom (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingBox","comment":" The `padding-box` value, used with [`backgroundClip`](#backgroundClip),\n[`backgroundOrigin`](#backgroundOrigin),\nand [`strokeOrigin`](#strokeOrigin).\n\n backgroundClip paddingBox\n\n backgroundOrigin paddingBox\n\n strokeOrigin paddingBox\n\n","type":"Css.Value.Value { provides | paddingBox : Css.Value.Supported }"},{"name":"paddingInline","comment":" Sets [`padding-inline`](https://css-tricks.com/almanac/properties/p/padding-inline/) property.\n\nThe `padding-inline` property is a shorthand property for setting `padding-inline-start` and\n`padding-inline-end` and in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the inline start is set to the first value and the inline end is set to the second.\n\n paddingInline (em 4) -- set both inline start and inline end to 4em\n\n paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingInline2","comment":" Sets [`padding-inline`](https://css-tricks.com/almanac/properties/p/padding-inline/) property.\n\nThe `padding-inline` property is a shorthand property for setting `padding-inline-start` and\n`padding-inline-end` in a single declaration.\n\nThe inline start value is set to the first value and the inline end value is set to the second.\n\n paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingInlineEnd","comment":" Sets [`padding-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end) property.\n\n paddingInlineEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingInlineStart","comment":" Sets [`padding-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start) property.\n\n paddingInlineStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingLeft","comment":" Sets [`padding-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) property.\n\n paddingLeft (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingRight","comment":" Sets [`padding-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) property.\n\n paddingRight (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"paddingTop","comment":" Sets [`padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) property.\n\n paddingTop (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"page","comment":" Sets `page` value for usage with [`breakAfter`](#breakAfter) and\n[`breakBefore`](#breakBefore).\n\n breakBefore page\n\n breakAfter page\n\n","type":"Css.Value.Value { provides | page : Css.Value.Supported }"},{"name":"pageBreakAfter","comment":" Sets [`page-break-after`](https://css-tricks.com/almanac/properties/p/page-break/)\n\n**This property has been depreciated and replaced with\n[`breakAfter`](#breakAfter), but is still included for backwards\ncompatibility.**\n\n pageBreakAfter auto\n\n pageBreakAfter always\n\n pageBreakAfter avoid\n\n pageBreakAfter left_\n\n pageBreakAfter right_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, always : Css.Value.Supported, avoid : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"pageBreakBefore","comment":" Sets [`page-break-before`](https://css-tricks.com/almanac/properties/p/page-break/)\n\n**This property has been depreciated and replaced with\n[`breakBefore`](#breakBefore), but is still included for backwards\ncompatibility.**\n\n pageBreakBefore auto\n\n pageBreakBefore always\n\n pageBreakBefore avoid\n\n pageBreakBefore left_\n\n pageBreakBefore right_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, always : Css.Value.Supported, avoid : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"pageBreakInside","comment":" Sets [`page-break-inside`](https://css-tricks.com/almanac/properties/p/page-break/)\n\n pageBreakInside auto\n\n pageBreakInside avoid\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, avoid : Css.Value.Supported } -> Css.Style"},{"name":"paint","comment":" Sets the `paint` value for [`contain`](#contain).\n\nIndicates that descendants of the element will not\ndisplay outside its bounds and will not be painted\nby the browser if the containing box is offscreen.\n\n contain paint\n\n","type":"Css.Value.Value { provides | paint : Css.Value.Supported }"},{"name":"paintOrder","comment":" The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property.\n\nThis one-argument version indicates which parts of text and shape graphics are\npainted first, followed by the other two in their relative default order.\n\n paintOrder normal -- normal paint order.\n\n paintOrder2 fill_ stroke -- fill, stroke, then markers.\n\n paintOrder3 markers stroke fill_ -- markers, stroke, then fill.\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Style"},{"name":"paintOrder2","comment":" The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property.\n\nThis two-argument version indicates which parts of text and shape graphics are\npainted first, followed by the other remaining one.\n\n paintOrder2 fill_ stroke -- fill, stroke, then markers.\n\n","type":"Css.Value.Value { fill_ : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Value.Value { fill_ : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Style"},{"name":"paintOrder3","comment":" The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property.\n\nThis three-argument version explicitly indicates in which order should all the parts of text\nand shape graphics be painted.\n\n paintOrder3 markers stroke fill_ -- markers, stroke, then fill.\n\n","type":"Css.Value.Value { fill_ : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Value.Value { fill_ : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Value.Value { fill_ : Css.Value.Supported, stroke : Css.Value.Supported, markers : Css.Value.Supported } -> Css.Style"},{"name":"painted","comment":" The `painted` value used by [`pointerEvents`](#pointerEvents).\n\n pointerEvents painted\n\n","type":"Css.Value.Value { provides | painted : Css.Value.Supported }"},{"name":"panX","comment":" The `pan-x` value used by [`touch-action`](#touchAction).\n\n touchAction panX\n\n","type":"Css.Value.Value { provides | panX : Css.Value.Supported }"},{"name":"panY","comment":" The `pan-y` value used by [`touch-action`](#touchAction).\n\n touchAction panY\n\n","type":"Css.Value.Value { provides | panY : Css.Value.Supported }"},{"name":"path","comment":" Creates a `path()` value for CSS properties that accept a\n`` value.\n\nThe input string needs to be a valid SVG path string.\n\n clipPath <| path \"M161.693,39.249C94.047,39.249 39.127,94.169 39.127,161.816C39.127,229.462 94.047,284.382 161.693,284.382C229.34,284.382 284.26,229.462 284.26,161.816C284.26,94.169 229.34,39.249 161.693,39.249ZM161.693,71.382C211.605,71.382 211.605,252.249 161.693,252.249C111.782,252.249 71.26,211.727 71.26,161.816C71.26,111.904 111.782,71.382 161.693,71.382Z\"\n","type":"String.String -> Css.Value.Value { provides | path : Css.Value.Supported }"},{"name":"paused","comment":" The `paused` value used for functions like [`animationPlayState`](#animationPlayState)\n\n animationPlayState paused\n\n","type":"Css.Value.Value { provides | paused : Css.Value.Supported }"},{"name":"pc","comment":" [`pc`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (pc 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | pc : Css.Value.Supported }"},{"name":"pct","comment":" [`pct`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (pct 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | pct : Css.Value.Supported }"},{"name":"persian","comment":" The `persian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType persian\n\n","type":"Css.Value.Value { provides | persian : Css.Value.Supported }"},{"name":"perspective","comment":" The [`perspective`](https://css-tricks.com/almanac/properties/p/perspective/) property.\n\nNegative values are not supported and any value smaller than 1px is clamped to 1px.\n\n perspective none\n\n perspective (px 100)\n\n perspective (rem 50)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"perspectiveOrigin","comment":" The [`perspective-origin`](https://css-tricks.com/almanac/properties/p/perspective-origin/) property.\n\nThis one-argument version either supports a global value or the x-position.\n\n perspectiveOrigin inherit\n\n perspectiveOrigin left_\n\n perspectiveOrigin (pct 50)\n\n perspectiveOrigin2 left_ center\n\n perspectiveOrigin2 (rem 50) (pct 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, center : Css.Value.Supported, right_ : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported }) -> Css.Style"},{"name":"perspectiveOrigin2","comment":" The [`perspective-origin`](https://css-tricks.com/almanac/properties/p/perspective-origin/) property.\n\nThis two-argument version takes an X position and then a Y position.\n\n pperspectiveOrigin2 left_ center\n\n perspectiveOrigin2 (rem 50) (pct 20)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, center : Css.Value.Supported, right_ : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, center : Css.Value.Supported, bottom_ : Css.Value.Supported }) -> Css.Style"},{"name":"perspective_","comment":" Sets `perspective` value for usage with [`transform`](#transform).\n\n transform (perspective_ (px 17))\n\nThe value is called `perspective_` instead of `perspective` because\n[`perspective`](#perspective) is already a property function.\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value { provides | perspective_ : Css.Value.Supported }"},{"name":"petiteCaps","comment":" The `petite-caps` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values).\n\n fontVariantCaps petiteCaps\n\n","type":"Css.Value.Value { provides | petiteCaps : Css.Value.Supported }"},{"name":"pinchZoom","comment":" The `pinch-zoom` value used by [`touch-action`](#touchAction).\n\n touchAction pinchZoom\n\n","type":"Css.Value.Value { provides | pinchZoom : Css.Value.Supported }"},{"name":"pixelated","comment":" Sets `pixelated` value for usage with [`imageRendering`](#imageRendering).\n\n imageRendering pixelated\n\n","type":"Css.Value.Value { provides | pixelated : Css.Value.Supported }"},{"name":"placeContent","comment":" The [`place-content`](https://css-tricks.com/almanac/properties/p/place-content) property.\n\n`placeContent` is a shorthand for the [`alignContent`](#alignContent) and\n[`justifyContent`](#justifyContent) properties in a single declaration.\n\nThis one-argument version only accepts global values.\n\n placeContent inherit\n\n placeContent2 flexStart flexEnd\n\n","type":"Css.BaseValue {} -> Css.Style"},{"name":"placeContent2","comment":" The [`place-content`](https://css-tricks.com/almanac/properties/p/place-content) property.\n\n`placeContent` is a shorthand for the [`alignContent`](#alignContent) and\n[`justifyContent`](#justifyContent) properties in a single declaration.\n\nThis two-argumant version accepts `alignContent` and `justifyContent` values.\n\n placeContent inherit\n\n placeContent2 flexStart flexEnd\n\n","type":"Css.Value.Value { normal : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, spaceBetween : Css.Value.Supported, spaceAround : Css.Value.Supported, spaceEvenly : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported } -> Css.Value.Value { normal : Css.Value.Supported, spaceBetween : Css.Value.Supported, spaceAround : Css.Value.Supported, spaceEvenly : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"placeItems","comment":" The [`place-items`](https://css-tricks.com/almanac/properties/p/place-items) property.\n\n`placeItems` is a shorthand for the [`alignItems`](#alignItems) and\n[`justifyItems`](#justifyItems) properties in a single declaration.\n\nThis one-argument version only accepts global values.\n\n placeItems inherit\n\n placeItems2 center selfEnd\n\n","type":"Css.BaseValue {} -> Css.Style"},{"name":"placeItems2","comment":" The [`place-items`](https://css-tricks.com/almanac/properties/p/place-items) property.\n\n`placeItems` is a shorthand for the [`alignItems`](#alignItems) and\n[`justifyItems`](#justifyItems) properties in a single declaration.\n\nThis one-argument version only accepts global values.\n\n placeItems inherit\n\n placeItems2 center selfEnd\n\n","type":"Css.Value.Value { normal : Css.Value.Supported, stretch : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported } -> Css.Value.Value { normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, legacy : Css.Value.Supported, legacyLeft : Css.Value.Supported, legacyRight : Css.Value.Supported, legacyCenter : Css.Value.Supported } -> Css.Style"},{"name":"placeSelf","comment":" The [`place-self`](https://css-tricks.com/almanac/properties/p/place-self) property.\n\n`placeSelf` is a shorthand for the [`alignSelf`](#alignSelf) and\n[`justifySelf`](#justifySelf) properties in a single declaration.\n\nThis one-argument version only accepts global values.\n\n placeSelf inherit\n\n placeSelf2 flexStart flexEnd\n\n","type":"Css.BaseValue {} -> Css.Style"},{"name":"placeSelf2","comment":" The [`place-self`](https://css-tricks.com/almanac/properties/p/place-self) property.\n\n`placeSelf` is a shorthand for the [`alignSelf`](#alignSelf) and\n[`justifySelf`](#justifySelf) properties in a single declaration.\n\nThis one-argument version only accepts global values.\n\n placeSelf inherit\n\n placeSelf2 flexStart flexEnd\n\n","type":"Css.Value.Value { auto : Css.Value.Supported, normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported } -> Css.Value.Value { auto : Css.Value.Supported, normal : Css.Value.Supported, stretch : Css.Value.Supported, baseline : Css.Value.Supported, firstBaseline : Css.Value.Supported, lastBaseline : Css.Value.Supported, center : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, flexStart : Css.Value.Supported, flexEnd : Css.Value.Supported, selfStart : Css.Value.Supported, selfEnd : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"placeholder","comment":" A [`::placeholder`](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\nBe careful when using placeholders as they can negatively impact accessibility.\n\n placeholder\n [ opacity (num 1) <| important\n , color (rgb 90 90 90)\n , fontWeight (int 400)\n ]\n\n]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"plaintext","comment":" Sets `plaintext` value for usage with [`unicodeBidi`](#unicodeBidi).\n\n unicodeBidi plaintext\n\n","type":"Css.Value.Value { provides | plaintext : Css.Value.Supported }"},{"name":"plus","comment":" Use with [`calc`](#calc) to add one numeric value to another.\n\n calc (pct 100) (plus (px 2))\n -- calc: (100% + 2px)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, num : Css.Value.Supported, int : Css.Value.Supported }) -> Css.CalcOperation"},{"name":"pointer","comment":" The `pointer` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | pointer : Css.Value.Supported }"},{"name":"pointerEvents","comment":" Sets [`pointer-events`](https://css-tricks.com/almanac/properties/b/pointer-events/)\n\n pointerEvents none\n\n pointerEvents auto\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, none : Css.Value.Supported, visiblePainted : Css.Value.Supported, visibleFill : Css.Value.Supported, visibleStroke : Css.Value.Supported, visible : Css.Value.Supported, painted : Css.Value.Supported, fill_ : Css.Value.Supported, stroke : Css.Value.Supported, all_ : Css.Value.Supported } -> Css.Style"},{"name":"polygon","comment":" Creates a `polygon()` value for CSS\nproperties that accept a `` value.\n\nEach numerical argument is a Float that represents a\npercentage.\n\n clipPath <| polygon [ (20, 30), (40, 80.3), (14, 50) ]\n","type":"List.List ( Basics.Float, Basics.Float ) -> Css.Value.Value { provides | polygon : Css.Value.Supported }"},{"name":"position","comment":" Sets the [`position`](https://css-tricks.com/almanac/properties/p/position/) of an element.\n\n position absolute\n\n position relative\n\n","type":"Css.BaseValue { absolute : Css.Value.Supported, fixed : Css.Value.Supported, relative : Css.Value.Supported, static : Css.Value.Supported, sticky : Css.Value.Supported } -> Css.Style"},{"name":"pre","comment":" A `pre` value for the [`white-space`](#whiteSpace) property.\n\n whiteSpace pre\n\n","type":"Css.Value.Value { provides | pre : Css.Value.Supported }"},{"name":"preLine","comment":" A `pre-line` value for the [`white-space`](#whiteSpace) property.\n\n whiteSpace preLine\n\n","type":"Css.Value.Value { provides | preLine : Css.Value.Supported }"},{"name":"preWrap","comment":" A `pre-wrap` value for the [`white-space`](#whiteSpace) property.\n\n whiteSpace preWrap\n\n","type":"Css.Value.Value { provides | preWrap : Css.Value.Supported }"},{"name":"preserve3d","comment":" The `preserve-3d` value used in the [`transformStyle`](#transformStyle) property.\n\n transformStyle preserve3d\n\n","type":"Css.Value.Value { provides | preserve3d : Css.Value.Supported }"},{"name":"progress","comment":" The `progress` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | progress : Css.Value.Supported }"},{"name":"property","comment":" Define a custom property.\n\n css [ property \"-webkit-font-smoothing\" \"none\" ]\n\n...outputs\n\n -webkit-font-smoothing: none;\n\n","type":"String.String -> String.String -> Css.Style"},{"name":"proportionalNums","comment":" The `proportional-nums` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric proportionalNums\n\n","type":"Css.Value.Value { provides | proportionalNums : Css.Value.Supported }"},{"name":"proportionalWidth","comment":" Sets the [`proportional-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis activates the East Asian characters that vary in width.\n\n(As opposed to [`fullWidth`](#fullWidth), which specifies that they should roughly be the same width.)\n\n fontVariantEastAsian proportionalWidth\n\n","type":"Css.Value.Value { provides | proportionalWidth : Css.Value.Supported }"},{"name":"proximity","comment":" Sets `proximity` value for usage with [`scrollSnapType2`](#scrollSnapType2).\n\n scrollSnapType2 x proximity\n\n","type":"Css.Value.Value { provides | proximity : Css.Value.Supported }"},{"name":"pseudoClass","comment":" Define a custom pseudo-class.\n\nThis can be useful for deprecated [pseudo-classes](https://css-tricks.com/pseudo-class-selectors/) such as `-moz-any-link`, which\n[has been deprecated and removed](https://www.fxsitecompat.com/en-CA/docs/2016/any-link-css-pseudo-class-has-been-unprefixed/)\nin modern browsers.\n\n button\n [ css [ pseudoClass \"-moz-any-link\" [ color (hex \"f00\") ] ] ]\n [ text \"Whee!\" ]\n\n...outputs\n\n \n\n \n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"pseudoElement","comment":" Define a custom [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n textarea\n [ css [ pseudoElement \"-webkit-scrollbar\" [ display none ] ] ]\n []\n\n...outputs\n\n \n\n \n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"pt","comment":" [`pt`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (pt 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | pt : Css.Value.Supported }"},{"name":"px","comment":" [`px`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (px 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | px : Css.Value.Supported }"},{"name":"q","comment":" [`Q`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) length units.\n\n borderWidth (q 2.5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | q : Css.Value.Supported }"},{"name":"quotes","comment":" Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property.\n\nThis one-argument version can only use keyword or global values.\n\n quotes none\n\n quotes inherit\n\n quotes2 (string \"\\\"\") (string \"\\\"\")\n\n quotes4 (string \"\\\"\") (string \"\\\"\") (string \"'\") (string \"'\")\n\n","type":"Css.BaseValue { none : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"quotes2","comment":" Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property.\n\nThis 2-argument version sets the starting and closing quotation marks for\na top-level quote (a quote that is not nested within another quote). It only accepts\nstring values.\n\n quotes auto\n\n quotes2 (string \"\\\"\") (string \"\\\"\") -- \"Hey, this is a first-level quote.\"\n\n quotes2 (string \"'\") (string \"'\") -- 'Hey, this is a first-level quote.'\n\n quotes2 (string \"«\") (string \"»\") -- «Hey, this is a first-level quote.»\n\n","type":"Css.Value.Value { string : Css.Value.Supported } -> Css.Value.Value { string : Css.Value.Supported } -> Css.Style"},{"name":"quotes4","comment":" Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property.\n\nThis 4-argument version sets the starting and closing quotation marks for both\na top-level quote and a nested quote. It only accepts\nstring values.\n\n quotes auto\n\n quotes2 (string \"\\\"\") (string \"\\\"\")\n\n -- \"Hey, this is a first-level quote.\"\n\n\n quotes4 (string \"\\\"\") (string \"\\\"\") (string \"\\'\") (string \"\\'\")\n\n {- \"Hey, this is a first-level quote.\n 'And this is someone else I made up for\n a second-level quote!' Yeah, I did that!\"\n -}\n\n quotes4 (string \"«\") (string \"»\") (string \"👏\") (string \"🤔\")\n\n {- «Hey, this is a first-level quote.\n 👏And this is something else I made up for\n a second-level quote!🤔 Yeah, I did that!»\n -}\n\n","type":"Css.Value.Value { string : Css.Value.Supported } -> Css.Value.Value { string : Css.Value.Supported } -> Css.Value.Value { string : Css.Value.Supported } -> Css.Value.Value { string : Css.Value.Supported } -> Css.Style"},{"name":"rad","comment":" A [`rad` angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)\n\n rad 6.2832 -- approximately one full circle\n\n rad 1\n\n","type":"Basics.Float -> Css.Value.Value { provides | rad : Css.Value.Supported }"},{"name":"readOnly","comment":" A [`:read-only`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n readOnly\n [ color (rgb 50 50 50)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"readWrite","comment":" A [`:read-write`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n readWrite\n [ backgroundColor (rgb 0 50 150)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"relative","comment":" A [`relative` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values).\n\n position relative\n\nThe default `position` value is [`static`](#static). See also [`position: sticky`](#sticky), and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/).\n\n","type":"Css.Value.Value { provides | relative : Css.Value.Supported }"},{"name":"rem","comment":" [`rem`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (rem 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | rem : Css.Value.Supported }"},{"name":"repeat","comment":" The `repeat` value for [background properties](#backgroundRepeat)\nand [`strokeRepeat`](#strokeRepeat).\n\n backgroundRepeat repeat\n\n strokeRepeat repeat\n\n","type":"Css.Value.Value { provides | repeat : Css.Value.Supported }"},{"name":"repeatX","comment":" The `repeat-x` value for [repeating backgrounds](#backgroundRepeat)\nand [`strokeRepeat`](#strokeRepeat).\n\n backgroundRepeat repeatX\n\n strokeRepeat repeatX\n\n","type":"Css.Value.Value { provides | repeatX : Css.Value.Supported }"},{"name":"repeatY","comment":" The `repeat-y` value for [repeating backgrounds](#backgroundRepeat)\nand [`strokeRepeat`](#strokeRepeat).\n\n backgroundRepeat repeatY\n\n strokeRepeat repeatY\n\n","type":"Css.Value.Value { provides | repeatY : Css.Value.Supported }"},{"name":"required","comment":" A [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n required\n [ border (px 2) solid (rgb 100 100 100)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"resize","comment":" The [`resize`](https://css-tricks.com/almanac/properties/r/resize/) property.\n\n resize none\n\n resize both\n\n resize inline\n\n","type":"Css.BaseValue { none : Css.Value.Supported, both : Css.Value.Supported, horizontal : Css.Value.Supported, vertical : Css.Value.Supported, block : Css.Value.Supported, inline : Css.Value.Supported } -> Css.Style"},{"name":"reverse","comment":" The `reverse` value used for functions like [`animationDirection`](#animationDirection)\n\n animationDirection reverse\n\n","type":"Css.Value.Value { provides | reverse : Css.Value.Supported }"},{"name":"revert","comment":" The [`revert`](https://css-tricks.com/what-does-revert-do-in-css/) value.\nAny CSS property can be set to this value.\n\n all revert\n\n color revert\n\n","type":"Css.Value.Value { provides | revert : Css.Value.Supported }"},{"name":"rgb","comment":" [RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb())\nin functional notation.\n\n color (rgb 96 181 204)\n\n","type":"Basics.Int -> Basics.Int -> Basics.Int -> Css.Value.Value { provides | rgb : Css.Value.Supported }"},{"name":"rgba","comment":" [RGBA color value](https://css-tricks.com/the-power-of-rgba/).\n\n color (rgba 96 181 204 0.25)\n\n","type":"Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> Css.Value.Value { provides | rgba : Css.Value.Supported }"},{"name":"ridge","comment":" The `ridge` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\n borderStyle ridge\n\n columnRuleStyle ridge\n\n textDecorationStyle ridge\n\nSimilar to [`groove`](#groove), but reverses the color values in a way that makes things appear raised.\n\n","type":"Css.Value.Value { provides | ridge : Css.Value.Supported }"},{"name":"right","comment":" Sets the [`right`](https://css-tricks.com/almanac/properties/r/right) property.\n\n right (px 10)\n\n right (pct 50)\n\n right auto\n\n right zero\n\nIf you need to use `right` as a CSS _value_ instead of as a _property_,\nfor example in `float: right`, use [`right_`](#right_) instead of this.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"rightHandPage","comment":" A [`:right`](https://developer.mozilla.org/en-US/docs/Web/CSS/:right)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n rightHandPage\n [ color (rgb 100 100 100)\n ]\n\nNote: This is called `rightHandPage` instead of `right` or `right_` is\nbecause both of those are taken by property and value keyword functions.\n","type":"List.List Css.Style -> Css.Style"},{"name":"right_","comment":" The `right` value, used in many properties such as:\n\n - [`backgroundPosition`](#backgroundPosition)\n - [`clear`](#clear)\n - [`float`](#float)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n - [`pageBreakAfter`](#pageBreakAfter)\n - [`textAlign`](#textAlign)\n\n```\nbackgroundPosition right_\n\nclear right_\n\nfloat right_\n\njustifyContent right_\n\njustifyItems right_\n\njustifySelf right_\n\npageBreakAfter right_\n\ntextAlign right_\n```\n\nThe value is called `right_` instead of `right` because [`right` is already a property function](#right).\n\n","type":"Css.Value.Value { provides | right_ : Css.Value.Supported }"},{"name":"root","comment":" A [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n root\n [ backgroundColor (rgb 0 200 200)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"rotate","comment":" The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property.\n\nThis one-argument version lets you set a global variable, `none`, or angle.\n\n rotate none\n\n rotate inherit\n\n rotate (deg 60)\n\n rotate2 x (deg 50)\n\n rotate2 y (deg 100)\n\n rotate4 1 1 1 (deg 90)\n\n","type":"Css.BaseValue (Css.AngleSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"rotate2","comment":" The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property.\n\nThis 2-argument version lets you set an axis, then an angle value.\n\n rotate2 x (deg 50)\n\n rotate2 y (deg 100)\n\n\n","type":"Css.Value.Value { x : Css.Value.Supported, y : Css.Value.Supported, z : Css.Value.Supported } -> Css.Value.Value Css.Angle -> Css.Style"},{"name":"rotate3d","comment":" Sets `rotate3d` value for usage with [`transform`](#transform).\n\n transform (rotate3d 0 1 0 (deg 30))\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value Css.Angle -> Css.Value.Value { provides | rotate3d : Css.Value.Supported }"},{"name":"rotate4","comment":" The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property.\n\nThis 4-argument version lets you set a 3D vector, than an angle value.\n\n rotate4 1 1 1 (deg 90)\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value Css.Angle -> Css.Style"},{"name":"rotateX","comment":" Sets `rotateX` value for usage with [`transform`](#transform).\n\n transform (rotateX (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | rotateX : Css.Value.Supported }"},{"name":"rotateY","comment":" Sets `rotateY` value for usage with [`transform`](#transform).\n\n transform (rotateY (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | rotateY : Css.Value.Supported }"},{"name":"rotateZ","comment":" Sets `rotateZ` value for usage with [`transform`](#transform).\n\n transform (rotateZ (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | rotateZ : Css.Value.Supported }"},{"name":"rotate_","comment":" Sets `rotate` value for usage with [`transform`](#transform).\n\n transform (rotate_ (deg 30))\n\nThis is called `rotate_` instead of `rotate` because [`rotate` is already a property function](#rotate).\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | rotate_ : Css.Value.Supported }"},{"name":"round_","comment":" The `round` value used for properties such as:\n\n - [repeating backgrounds](#backgroundRepeat)\n - [`strokeLinecap`](#strokeLinecap)\n - [`strokeRepeat`](#strokeRepeat)\n - [`strokeLinejoin`](#strokeLinejoin2)\n\n**This is called `round_` because `round` is a function\nword used in Elm Core's `Basics` module.**\n\n```\n backgroundRepeat round_\n\n strokeLineCap round_\n\n strokeLinejoin2 miter round_\n\n strokeRepeat round_\n```\n\n","type":"Css.Value.Value { provides | round_ : Css.Value.Supported }"},{"name":"row","comment":" The `row` [`flex-direction` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Values).\n\n flexDirection row\n\n","type":"Css.Value.Value { provides | row : Css.Value.Supported }"},{"name":"rowGap","comment":" Sets the [`row-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) property.\n\n`row-gap` specifies the size of spacing between rows of items within grid, flex\nand multi-column layouts.\n\n rowGap normal\n\n rowGap (px 20)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"rowResize","comment":" The `row-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | rowResize : Css.Value.Supported }"},{"name":"rowReverse","comment":" The `row-reverse` [`flex-direction` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Values).\n\n flexDirection rowReverse\n\n","type":"Css.Value.Value { provides | rowReverse : Css.Value.Supported }"},{"name":"rtl","comment":" A `rtl` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property.\n\n direction rtl\n\n","type":"Css.Value.Value { provides | rtl : Css.Value.Supported }"},{"name":"ruby","comment":" The `ruby` value used by [`display`](#display) and [`fontVariantEastAsian`](#fontVariantEastAsian).\n\n display ruby\n\n fontVariantEastAsian2 ruby jis83\n\n","type":"Css.Value.Value { provides | ruby : Css.Value.Supported }"},{"name":"rubyBase","comment":" The `ruby-base` value used by [`display`](#display).\n\n display rubyBase\n\n","type":"Css.Value.Value { provides | rubyBase : Css.Value.Supported }"},{"name":"rubyBaseContainer","comment":" The `ruby-base-container` value used by [`display`](#display).\n\n display rubyBaseContainer\n\n","type":"Css.Value.Value { provides | rubyBaseContainer : Css.Value.Supported }"},{"name":"rubyText","comment":" The `ruby-text` value used by [`display`](#display).\n\n display rubyText\n\n","type":"Css.Value.Value { provides | rubyText : Css.Value.Supported }"},{"name":"rubyTextContainer","comment":" The `ruby-text-container` value used by [`display`](#display).\n\n display rubyTextContainer\n\n","type":"Css.Value.Value { provides | rubyTextContainer : Css.Value.Supported }"},{"name":"runIn","comment":" The `run-in` value used by [`display`](#display).\n\n display runIn\n\n","type":"Css.Value.Value { provides | runIn : Css.Value.Supported }"},{"name":"running","comment":" The `running` value used for functions like [`animationPlayState`](#animationPlayState)\n\n animationPlayState running\n\n","type":"Css.Value.Value { provides | running : Css.Value.Supported }"},{"name":"s","comment":" The [`s`](https://developer.mozilla.org/en-US/docs/Web/CSS/time) time unit.\n\n animationDuration (s 1)\n\n","type":"Basics.Float -> Css.Value.Value { provides | s : Css.Value.Supported }"},{"name":"sResize","comment":" The `s-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | sResize : Css.Value.Supported }"},{"name":"safe","comment":" The `safe` value used for properties such as [`alignContent2`](#alignContent2).\n\n alignContent2 safe center\n\n","type":"Css.Value.Value { provides | safe : Css.Value.Supported }"},{"name":"sansSerif","comment":" The `sans-serif` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E).\n\n fontFamily sansSerif\n\n fontFamilyMany [ \"Georgia\", \"Times\" ] sansSerif\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | sansSerif : Css.Value.Supported }"},{"name":"saturate","comment":" Provides a [`saturate()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate).\n\n filter <| saturate (pct 20)\n -- filter: saturate(20%);\n\n filter <| saturate zero -- completely desaturated\n\n filter <| saturate (num 1) -- no effect\n\n filter <| saturate (num 2) -- double saturation\n\n filter <| saturate (num 0.4) -- 40% saturated\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | saturate : Css.Value.Supported }"},{"name":"saturation","comment":" The `saturation` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode saturation\n\n","type":"Css.Value.Value { provides | saturation : Css.Value.Supported }"},{"name":"scale","comment":" The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property.\n\nThis one-argument version lets you set a global value, `none` or\na `num` that will scale the element by both X and Y axes\n(equivalent to [`scale_`](#scale_)).\n\n scale none\n\n scale (num 3)\n\n scale2 (num 1) (num 3)\n\n scale3 (num 1) (num 3) (num 4)\n\n","type":"Css.BaseValue { num : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"scale2","comment":" The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property.\n\nThis two-argument version lets you specify scaling in X and Y axes\n(equivalent to [`scale2_`](#scale2_)).\n\n scale2 (num 1) (num 3)\n\n","type":"Css.Value.Value { num : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported } -> Css.Style"},{"name":"scale2_","comment":" Sets `scale` value for usage with [`transform`](#transform).\n\n transform (scale2_ 0.7 0.7)\n\nThis is called `scale2_` instead of `scale2` because [`scale2` is already a property function](#scale2).\n\n","type":"Basics.Float -> Basics.Float -> Css.Value.Value { provides | scale2_ : Css.Value.Supported }"},{"name":"scale3","comment":" The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property.\n\nThis three-argument version lets you specify scaling in X, Y and Z axes\n(equivalent to [`scale3d`](#scale3d)).\n\n scale3 (num 1) (num 3) (num 4)\n\n","type":"Css.Value.Value { num : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported } -> Css.Value.Value { num : Css.Value.Supported } -> Css.Style"},{"name":"scale3d","comment":" Sets `scale3d` value for usage with [`transform`](#transform).\n\n transform (scale3d 2 0.7 0.2)\n\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Css.Value.Value { provides | scale3d : Css.Value.Supported }"},{"name":"scaleDown","comment":" Sets `scale-down` value for usage with [`objectFit`](#objectFit).\n\n objectFit scaleDown\n\n","type":"Css.Value.Value { provides | scaleDown : Css.Value.Supported }"},{"name":"scaleX","comment":" Sets `scaleX` value for usage with [`transform`](#transform).\n\n transform (scaleX 0.7)\n\n","type":"Basics.Float -> Css.Value.Value { provides | scaleX : Css.Value.Supported }"},{"name":"scaleY","comment":" Sets `scaleY` value for usage with [`transform`](#transform).\n\n transform (scaleY 0.7)\n\n","type":"Basics.Float -> Css.Value.Value { provides | scaleY : Css.Value.Supported }"},{"name":"scaleZ","comment":" Sets `scaleZ` value for usage with [`transform`](#transform).\n\n transform (scaleZ 0.7)\n\n","type":"Basics.Float -> Css.Value.Value { provides | scaleZ : Css.Value.Supported }"},{"name":"scale_","comment":" Sets `scale` value for usage with [`transform`](#transform).\n\n transform (scale_ 0.7)\n\nThis is called `scale_` instead of `scale` because [`scale` is already a property function](#scale).\n\n","type":"Basics.Float -> Css.Value.Value { provides | scale_ : Css.Value.Supported }"},{"name":"scope","comment":" A [`:scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n scope\n [ backgroundColor (rgb 0 200 200)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"screen","comment":" The `screen` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode screen\n\n","type":"Css.Value.Value { provides | screen : Css.Value.Supported }"},{"name":"scroll","comment":" The `scroll` value used for properties such as [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values) and [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment).\n\n overflow scroll\n\n backgroundAttachment scroll\n\n","type":"Css.Value.Value { provides | scroll : Css.Value.Supported }"},{"name":"scrollBehavior","comment":" Sets [`scroll-behavior`](https://css-tricks.com/almanac/properties/s/scroll-behavior/)\n\n scrollBehavior auto\n\n scrollBehavior smooth\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, smooth : Css.Value.Supported } -> Css.Style"},{"name":"scrollMargin","comment":" Sets [`scroll-margin`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\nThe `scrollMargin` property is a shorthand property for setting\n`scroll-margin-top`, `scroll-margin-right`, `scroll-margin-bottom`,\nand `scroll-margin-left` in a single declaration.\n\nIf there is only one argument value, it applies to all sides. If there are two\nvalues, the top and bottom margins are set to the first value and the right and\nleft margins are set to the second. If there are three values, the top is set\nto the first value, the left and right are set to the second, and the bottom is\nset to the third. If there are four values they apply to the top, right,\nbottom, and left, respectively.\n\n scrollMargin (em 4) -- set all margins to 4em\n\n scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px\n\n scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMargin2","comment":" Sets [`scroll-margin`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\nThe `scrollMargin2` property is a shorthand property for setting\n`scroll-margin-top`, `scroll-margin-right`, `scroll-margin-bottom`,\nand `scroll-margin-left` in a single declaration.\n\nThe top and bottom margins are set to the first value and the right and left\nmargins are set to the second.\n\n scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"scrollMargin3","comment":" Sets [`scroll-margin`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\nThe `scrollMargin3` property is a shorthand property for setting\n`scroll-margin-top`, `scroll-margin-right`, `scroll-margin-bottom`,\nand `scroll-margin-left` in a single declaration.\n\nThe top margin is set to the first value, the left and right are set to the\nsecond, and the bottom is set to the third.\n\n scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"scrollMargin4","comment":" Sets [`scroll-margin`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\nThe `scrollMargin4` property is a shorthand property for setting\n`scroll-margin-top`, `scroll-margin-right`, `scroll-margin-bottom`,\nand `scroll-margin-left` in a single declaration.\n\nThe four values apply to the top, right, bottom, and left margins.\n\n scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"scrollMarginBlock","comment":" Sets [`scroll-margin-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block) property.\nThe `scrollMarginBlock` property is a shorthand property for setting\n`scroll-margin-block-start` and `scroll-margin-block-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the block start margin is set to the first value and the block end margin is\nset to the second.\n\n scrollMarginBlock (em 4) -- set both block margins to 4em\n\n scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginBlock2","comment":" Sets [`scroll-margin-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block) property.\nThe `scrollMarginBlock2` property is a shorthand property for setting\n`scroll-margin-block-start` and `scroll-margin-block-end` in a single declaration.\n\nThe block start margin is set to the first value and the block end margin is\nset to the second.\n\n scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"scrollMarginBlockEnd","comment":" Sets [`scroll-margin-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end) property.\n\n scrollMarginBlockEnd (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginBlockStart","comment":" Sets [`scroll-margin-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start) property.\n\n scrollMarginBlockStart (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginBottom","comment":" Sets [`scroll-margin-bottom`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\n\n scrollMarginBottom (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginInline","comment":" Sets [`scroll-margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) property.\nThe `scrollMarginInline` property is a shorthand property for setting\n`scroll-margin-inline-start` and `scroll-margin-inline-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the inline start margin is set to the first value and the inline end margin is\nset to the second.\n\n scrollMarginInline (em 4) -- set both inline margins to 4em\n\n scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginInline2","comment":" Sets [`scroll-margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) property.\nThe `scrollMarginInline2` property is a shorthand property for setting\n`scroll-margin-inline-start` and `scroll-margin-inline-end` in a single declaration.\n\nThe inline start margin is set to the first value and the inline end margin is\nset to the second.\n\n scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value Css.Length -> Css.Style"},{"name":"scrollMarginInlineEnd","comment":" Sets [`scroll-margin-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end) property.\n\n scrollMarginInlineEnd (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginInlineStart","comment":" Sets [`scroll-margin-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start) property.\n\n scrollMarginInlineStart (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginLeft","comment":" Sets [`scroll-margin-left`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\n\n scrollMarginLeft (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginRight","comment":" Sets [`scroll-margin-right`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\n\n scrollMarginRight (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollMarginTop","comment":" Sets [`scroll-margin-top`](https://css-tricks.com/almanac/properties/s/scroll-margin/) property.\n\n scrollMarginTop (px 4)\n\n","type":"Css.BaseValue Css.Length -> Css.Style"},{"name":"scrollPadding","comment":" Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\nThe `scrollPadding` property is a shorthand property for setting\n`scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`,\nand `scroll-padding-left` in a single declaration.\n\nIf there is only one argument value, it applies to all sides. If there are two\nvalues, the top and bottom paddings are set to the first value and the right and\nleft paddings are set to the second. If there are three values, the top is set\nto the first value, the left and right are set to the second, and the bottom is\nset to the third. If there are four values they apply to the top, right,\nbottom, and left, respectively.\n\n scrollPadding (em 4) -- set all paddings to 4em\n\n scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\n scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPadding2","comment":" Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\nThe `scrollPadding2` property is a shorthand property for setting\n`scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`,\nand `scroll-padding-left` in a single declaration.\n\nThe top and bottom margins are set to the first value and the right and left\nmargins are set to the second.\n\n scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPadding3","comment":" Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\nThe `scrollPadding3` property is a shorthand property for setting\n`scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`,\nand `scroll-padding-left` in a single declaration.\n\nThe top padding is set to the first value, the left and right are set to the\nsecond, and the bottom is set to the third.\n\n scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPadding4","comment":" Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\nThe `scrollPadding4` property is a shorthand property for setting\n`scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`,\nand `scroll-padding-left` in a single declaration.\n\nThe four values apply to the top, right, bottom, and left paddings.\n\n scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingBlock","comment":" Sets [`scroll-padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block) property.\nThe `scroll-padding-block` property is a shorthand property for setting\n`scroll-padding-block-start` and `scroll-padding-block-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the block start padding is set to the first value and the block end padding\nis set to the second.\n\n scrollPaddingBlock (em 4) -- set both block paddings to 4em\n\n scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingBlock2","comment":" Sets [`scroll-padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block) property.\nThe `scroll-padding-block` property is a shorthand property for setting\n`scroll-padding-block-start` and `scroll-padding-block-end` in a single declaration.\n\nThe block start padding is set to the first value and the block end padding\nis set to the second.\n\n scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingBlockEnd","comment":" Sets [`scroll-padding-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end) property.\n\n scrollPaddingBlockEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingBlockStart","comment":" Sets [`scroll-padding-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start) property.\n\n scrollPaddingBlockStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingBottom","comment":" Sets [`scroll-padding-bottom`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\n\n scrollPaddingBottom (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingInline","comment":" Sets [`scroll-padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline) property.\nThe `scroll-padding-inline` property is a shorthand property for setting\n`scroll-padding-inline-start` and `scroll-padding-inline-end` in a single declaration.\n\nIf there is only one argument value, it applies to both sides. If there are two\nvalues, the inline start padding is set to the first value and the inline end padding\nis set to the second.\n\n scrollPaddingInline (em 4) -- set both inline paddings to 4em\n\n scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingInline2","comment":" Sets [`scroll-padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline) property.\nThe `scroll-padding-inline` property is a shorthand property for setting\n`scroll-padding-inline-start` and `scroll-padding-inline-end` in a single declaration.\n\nThe inline start padding is set to the first value and the inline end padding\nis set to the second.\n\n scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px\n\n","type":"Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingInlineEnd","comment":" Sets [`scroll-padding-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end) property.\n\n scrollPaddingInlineEnd (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingInlineStart","comment":" Sets [`scroll-padding-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start) property.\n\n scrollPaddingInlineStart (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingLeft","comment":" Sets [`scroll-padding-left`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\n\n scrollPaddingLeft (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingRight","comment":" Sets [`scroll-padding-right`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\n\n scrollPaddingRight (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollPaddingTop","comment":" Sets [`scroll-padding-top`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property.\n\n scrollPaddingTop (px 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { auto : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"scrollSnapAlign","comment":" Sets [`scroll-snap-align`](https://css-tricks.com/almanac/properties/s/scroll-snap-align/)\n\n scrollSnapAlign none\n\n scrollSnapAlign start\n\n scrollSnapAlign center\n\n scrollSnapAlign end\n\n","type":"Css.BaseValue { none : Css.Value.Supported, start : Css.Value.Supported, center : Css.Value.Supported, end : Css.Value.Supported } -> Css.Style"},{"name":"scrollSnapStop","comment":" Sets [`scroll-snap-stop`](https://css-tricks.com/almanac/properties/s/scroll-snap-stop/)\n\n scrollSnapStop normal\n\n scrollSnapStop always\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, always : Css.Value.Supported } -> Css.Style"},{"name":"scrollSnapType","comment":" Sets [`scroll-snap-type`](https://css-tricks.com/almanac/properties/s/scroll-snap-type/)\n\n scrollSnapType none\n\n","type":"Css.BaseValue { none : Css.Value.Supported, x : Css.Value.Supported, y : Css.Value.Supported, block : Css.Value.Supported, inline : Css.Value.Supported, both : Css.Value.Supported } -> Css.Style"},{"name":"scrollSnapType2","comment":" Sets [`scroll-snap-type`](https://css-tricks.com/almanac/properties/s/scroll-snap-type/)\n\n scrollSnapType2 x mandatory\n\n scrollSnapType2 both proximity\n\n","type":"Css.Value.Value { x : Css.Value.Supported, y : Css.Value.Supported, block : Css.Value.Supported, inline : Css.Value.Supported, both : Css.Value.Supported } -> Css.Value.Value { mandatory : Css.Value.Supported, proximity : Css.Value.Supported } -> Css.Style"},{"name":"scrollbarColor","comment":" Sets the\n[`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) property.\n\n scrollbarColor auto\n\n scrollbarColor (hex \"f35d93\")\n","type":"Css.BaseValue (Css.ColorSupported { auto : Css.Value.Supported }) -> Css.Style"},{"name":"scrollbarGutter","comment":" The [`scrollbar-gutter`](https://css-tricks.com/almanac/properties/s/scrollbar-gutter/)\nproperty.\n\nThis 1-argument variant can accept global values and some keywords.\n\n scrollbarGutter auto\n\n scrollbarGutter inherit\n \n scrollbarGutter2 stable bothEdges\n","type":"Css.BaseValue { auto : Css.Value.Supported, stable : Css.Value.Supported } -> Css.Style"},{"name":"scrollbarGutter2","comment":" The [`scrollbar-gutter`](https://css-tricks.com/almanac/properties/s/scrollbar-gutter/)\nproperty.\n\nThis 2-argument variant can only accept the keywords `stable` and `bothEdges`.\n\n scrollbarGutter auto\n\n scrollbarGutter inherit\n\n scrollbarGutter2 stable bothEdges\n","type":"Css.Value.Value { stable : Css.Value.Supported } -> Css.Value.Value { bothEdges : Css.Value.Supported } -> Css.Style"},{"name":"scrollbarWidth","comment":" Sets the [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) property.\n\n scrollbarWidth auto\n\n scrollbarWidth thin\n","type":"Css.BaseValue { auto : Css.Value.Supported, thin : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"seResize","comment":" The `se-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | seResize : Css.Value.Supported }"},{"name":"selection","comment":" A [`::selection`](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n selection\n [ backgroundColor (rgb 200 140 15)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"selfEnd","comment":" ","type":"Css.Value.Value { provides | selfEnd : Css.Value.Supported }"},{"name":"selfStart","comment":" ","type":"Css.Value.Value { provides | selfStart : Css.Value.Supported }"},{"name":"semiCondensed","comment":" Sets `semi-condensed` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay semiCondensed\n\n","type":"Css.Value.Value { provides | semiCondensed : Css.Value.Supported }"},{"name":"semiExpanded","comment":" Sets `semi-expanded` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay semiExpanded\n\n","type":"Css.Value.Value { provides | semiExpanded : Css.Value.Supported }"},{"name":"separate","comment":" A `separate` value for the [`border-separate`](https://css-tricks.com/almanac/properties/b/border-collapse/) property.\n\n borderCollapse separate\n\n","type":"Css.Value.Value { provides | separate : Css.Value.Supported }"},{"name":"sepia","comment":" Provides a [`sepia()` filter function value](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia).\n\n filter <| sepia (pct 20)\n -- filter: sepia(20%);\n\n filter <| sepia zero -- no effect\n\n filter <| sepia (num 1) -- completely sepia\n\n filter <| sepia (num 0.4) -- 40% sepia\n\n","type":"Css.Value.Value { zero : Css.Value.Supported, pct : Css.Value.Supported, num : Css.Value.Supported } -> Css.Value.Value { provides | sepia : Css.Value.Supported }"},{"name":"serif","comment":" The `serif` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E).\n\n fontFamily serif\n\n fontFamilyMany [ \"Gill Sans\", \"Helvetica\" ] serif\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | serif : Css.Value.Supported }"},{"name":"sesame","comment":" The `sesame` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis sesame\n\n","type":"Css.Value.Value { provides | sesame : Css.Value.Supported }"},{"name":"show","comment":" A `show` value for the [`empty-cells`](https://css-tricks.com/almanac/properties/e/empty-cells/) property.\n\n emptyCells show\n\n","type":"Css.Value.Value { provides | show : Css.Value.Supported }"},{"name":"sideways","comment":" A `sideways` value for the\n[`textOrientation`](#textOrientation) property.\n\n textOrientation sideways\n\n","type":"Css.Value.Value { provides | sideways : Css.Value.Supported }"},{"name":"sidewaysRight","comment":" A `sideways-right` value for the\n[`textOrientation`](#textOrientation) property.\n\n textOrientation sidewaysRight\n\n","type":"Css.Value.Value { provides | sidewaysRight : Css.Value.Supported }"},{"name":"simpChineseFormal","comment":" The `simp-chinese-formal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType simpChineseFormal\n\n","type":"Css.Value.Value { provides | simpChineseFormal : Css.Value.Supported }"},{"name":"simpChineseInformal","comment":" The `simp-chinese-informal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType simpChineseInformal\n\n","type":"Css.Value.Value { provides | simpChineseInformal : Css.Value.Supported }"},{"name":"simplified","comment":" Sets the [`simplified`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that no particular standard should be used for East Asian logographic glyphs\napart from them being simplified Chinese glyphs.\n\n fontVariantEastAsian simplified\n\n","type":"Css.Value.Value { provides | simplified : Css.Value.Supported }"},{"name":"size","comment":" Sets the `size` value for [`contain`](#contain).\n\nThis indicates that the element can be sized without\nneeding to look at the size of its descendants.\n\n contain size\n\n","type":"Css.Value.Value { provides | size : Css.Value.Supported }"},{"name":"skew","comment":" Sets `skew` value for usage with [`transform`](#transform).\n\n transform (skew (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | skew : Css.Value.Supported }"},{"name":"skew2","comment":" Sets `skew` value for usage with [`transform`](#transform).\n\n transform (skew2 (deg 30) (deg 10))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value Css.Angle -> Css.Value.Value { provides | skew2 : Css.Value.Supported }"},{"name":"skewX","comment":" Sets `skewX` value for usage with [`transform`](#transform).\n\n transform (skewX (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | skewX : Css.Value.Supported }"},{"name":"skewY","comment":" Sets `skewY` value for usage with [`transform`](#transform).\n\n transform (skewY (deg 30))\n\n","type":"Css.Value.Value Css.Angle -> Css.Value.Value { provides | skewY : Css.Value.Supported }"},{"name":"slashedZero","comment":" The `slashed-zero` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric slashedZero\n\n","type":"Css.Value.Value { provides | slashedZero : Css.Value.Supported }"},{"name":"slice","comment":" A `slice` value for the [`strokeBreak`](#strokeBreak) and [`boxDecorationBreak`](#boxDecorationBreak) properties.\n\n strokeBreak slice\n\n boxDecorationbreak clone\n\n","type":"Css.Value.Value { provides | slice : Css.Value.Supported }"},{"name":"slotted","comment":" A [`::slotted()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted)\n[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n slotted \"*\"\n [ backgroundColor (rgb 200 140 15)\n ]\n\n","type":"String.String -> List.List Css.Style -> Css.Style"},{"name":"small","comment":" The `small` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize small\n\n","type":"Css.Value.Value { provides | small : Css.Value.Supported }"},{"name":"smallCaps","comment":" The `small-caps` value used in\n\n - [`fontVariantCaps`](#fontVariantCaps)\n - [`fontSynthesis`](#fontSynthesis)\n\n```\nfontVariantCaps smallCaps\n\nfontSynthesis2 smallCaps style\n```\n\n","type":"Css.Value.Value { provides | smallCaps : Css.Value.Supported }"},{"name":"smaller","comment":" The `smaller` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize smaller\n\n","type":"Css.Value.Value { provides | smaller : Css.Value.Supported }"},{"name":"smooth","comment":" Sets `smooth` value for usage with [`scrollBehavior`](#scrollBehavior).\n\n scrollBehavior smooth\n\n","type":"Css.Value.Value { provides | smooth : Css.Value.Supported }"},{"name":"softLight","comment":" The `soft-light` [`background-blend-mode` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Values)\n\n backgroundBlendMode softLight\n\n","type":"Css.Value.Value { provides | softLight : Css.Value.Supported }"},{"name":"solid","comment":" The `solid` value used by properties such as [`borderStyle`](#borderStyle),\n[`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle).\n\n borderStyle solid\n\n columnRuleStyle solid\n\n textDecorationStyle solid\n\nIt represents a solid, continuous line.\n\n","type":"Css.Value.Value { provides | solid : Css.Value.Supported }"},{"name":"space","comment":" The `space` value for [repeating backgrounds](#backgroundRepeat)\nand [`strokeRepeat`](#strokeRepeat).\n\n backgroundRepeat space\n\n strokeRepeat space\n\n","type":"Css.Value.Value { provides | space : Css.Value.Supported }"},{"name":"spaceAround","comment":" The `space-around` value used by [`justifyContent`](#justifyContent)\nand [`alignContent`](#alignContent).\n\n justifyContent spaceAround\n\n alignContent spaceAround\n\n","type":"Css.Value.Value { provides | spaceAround : Css.Value.Supported }"},{"name":"spaceBetween","comment":" The `space-between` value used by [`justifyContent`](#justifyContent)\nand [`alignContent`](#alignContent).\n\n justifyContent spaceBetween\n\n alignContent spaceBetween\n\n","type":"Css.Value.Value { provides | spaceBetween : Css.Value.Supported }"},{"name":"spaceEvenly","comment":" Distribute items evenly, with an equal size space between each element and\nthe start and end.\n\n justifyContent spaceEvenly\n\n","type":"Css.Value.Value { provides | spaceEvenly : Css.Value.Supported }"},{"name":"speak","comment":" Sets [`speak`](https://css-tricks.com/almanac/properties/s/speak/)\n\n speak none\n\n speak normal\n\n speak spellOut\n\n","type":"Css.BaseValue { none : Css.Value.Supported, normal : Css.Value.Supported, spellOut : Css.Value.Supported } -> Css.Style"},{"name":"spellOut","comment":" Sets `spellOut` value for usage with [`speak`](#speak).\n\n speak spellOut\n\n","type":"Css.Value.Value { provides | spellOut : Css.Value.Supported }"},{"name":"square","comment":" The `square` value used by properties such as [`strokeLinecap`](#strokeLinecap),\n[`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType).\n\n strokeLinecap square\n\n listStyleType square\n\n","type":"Css.Value.Value { provides | square : Css.Value.Supported }"},{"name":"stable","comment":" The `stable` value used by [`scrollbarGutter`](#scrollbarGutter).\n\n scrollbarGutter stable\n\n","type":"Css.Value.Value { provides | stable : Css.Value.Supported }"},{"name":"stackedFractions","comment":" The `stacked-fractions` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric stackedFractions\n\n","type":"Css.Value.Value { provides | stackedFractions : Css.Value.Supported }"},{"name":"start","comment":" The `start` value.\n\nIt's used in the following properties as a [CSS Logical value](https://css-tricks.com/css-logical-properties-and-values/):\n\n - [`alignItems`](#alignItems)\n - [`alignContent`](#alignContent)\n - [`alignSelf`](#alignSelf)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n\n\n```\nalignContent start\n\njustifyItems start\n\n```\n\nIt's also used as an animation keyword used in [`steps2`](#steps2).\n\n```\nsteps2 3 start\n```\n\n","type":"Css.Value.Value { provides | start : Css.Value.Supported }"},{"name":"static","comment":" A [`static` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values).\n\n position static\n\nThis is the default `position` value. See also [`position: sticky`](#sticky), and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/).\n\n","type":"Css.Value.Value { provides | static : Css.Value.Supported }"},{"name":"stepEnd","comment":" The `step-end` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction stepEnd\n\n","type":"Css.Value.Value { provides | stepEnd : Css.Value.Supported }"},{"name":"stepStart","comment":" The `step-start` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction stepStart\n\n","type":"Css.Value.Value { provides | stepStart : Css.Value.Supported }"},{"name":"steps","comment":" Produces the `steps()` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction (steps 3)\n\n","type":"Basics.Int -> Css.Value.Value { provides | steps : Css.Value.Supported }"},{"name":"steps2","comment":" Produces the `steps()` value used for properties such as [`animationTimingFunction`](#animationTimingFunction).\n\n animationTimingFunction (steps2 3 jumpStart)\n\n","type":"Basics.Int -> Css.Value.Value { jumpStart : Css.Value.Supported, jumpEnd : Css.Value.Supported, jumpNone : Css.Value.Supported, jumpBoth : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported } -> Css.Value.Value { provides | steps : Css.Value.Supported }"},{"name":"sticky","comment":" A [`sticky` `position`](https://css-tricks.com/position-sticky-2/)\n\n position sticky\n\nThe default `position` value is [`static`](#static). See also [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/).\n\n","type":"Css.Value.Value { provides | sticky : Css.Value.Supported }"},{"name":"stop","comment":" Provides a stop for a [gradient](https://css-tricks.com/snippets/css/css-linear-gradient/).\n\n linearGradient toTop (stop red) (stop blue) []\n\nSee also [`stop2`](#stop2) for controlling stop positioning.\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value { provides | colorStop : Css.Value.Supported }"},{"name":"stop2","comment":" Provides a stop for a [gradient](https://css-tricks.com/snippets/css/css-linear-gradient/).\n\n linearGradient toTop (stop2 red (px 20)) (stop blue) []\n\nSee also [`stop`](#stop) if you don't need to control the stop position.\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | colorStop : Css.Value.Supported }"},{"name":"stop3","comment":" Provides a stop for a [gradient](https://css-tricks.com/snippets/css/css-linear-gradient/).\n\n linearGradient (stop3 (hex \"111\") zero (pt 1)) (stop3 (hex \"6454\") (pt 2) (pct 45))\n\n","type":"Css.Value.Value Css.Color -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | colorStop : Css.Value.Supported }"},{"name":"stretch","comment":" The `stretch` value used in the following properties:\n\n - [`alignContent`](#alignContent)\n - [`alignItems`](#alignItems)\n - [`alignSelf`](#alignSelf)\n - [`justifyContent`](#justifyContent)\n - [`justifyItems`](#justifyItems)\n - [`justifySelf`](#justifySelf)\n - [`strokeDashJustify`](#strokeDashJustify)\n\n```\nalignContent stretch\n\nstrokeDashJustify stretch\n```\n\n","type":"Css.Value.Value { provides | stretch : Css.Value.Supported }"},{"name":"strict","comment":" Sets `strict` value for usage with [`lineBreak`](#lineBreak) and [`contain`](#contain).\n\n contain strict\n\n lineBreak strict\n\n","type":"Css.Value.Value { provides | strict : Css.Value.Supported }"},{"name":"string","comment":" Produces a [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string)\nvalue used by properties such as:\n\n - [`listStyle`](#listStyle)\n\n - [`listStyleType`](#listStyleType)\n\n - [`quotes2`](#quotes2)\n\n - [`fontLanguageOverride`](#fontLanguageOverride)\n\n```\nlistStyleType (string \"> \")\n\nquotes2 (string \"«\") (string \"»\")\n\nfontLanguageOverride (string \"ENG\")\n```\n\n","type":"String.String -> Css.Value.Value { provides | string : Css.Value.Supported }"},{"name":"stroke","comment":" The `stroke` value used by [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder).\n\n pointerEvents stroke\n\n paintOrder2 stroke markers\n\n","type":"Css.Value.Value { provides | stroke : Css.Value.Supported }"},{"name":"strokeAlign","comment":" Sets [`stroke-align`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align)\n\n**Note:** This function accepts `inset_` rather than `inset` because\n[`inset` is already a property function](#inset).\n\n strokeAlign center\n strokeAlign inset_\n strokeAlign outset\n\n","type":"Css.BaseValue { center : Css.Value.Supported, inset_ : Css.Value.Supported, outset : Css.Value.Supported } -> Css.Style"},{"name":"strokeBox","comment":" The `stroke-box` value used by [`strokeOrigin`](#strokeOrigin)\nand [`transformBox`](#transformBox).\n\n strokeOrigin strokeBoxx\n\n transformBox strokeBox\n","type":"Css.Value.Value { provides | strokeBox : Css.Value.Supported }"},{"name":"strokeBreak","comment":" Sets [`stroke-break`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-break)\n\n strokeBreak boundingBox\n strokeBreak slice\n strokeBreak clone\n\n","type":"Css.BaseValue { boundingBox : Css.Value.Supported, slice : Css.Value.Supported, clone : Css.Value.Supported } -> Css.Style"},{"name":"strokeColor","comment":" Sets [`stroke-color`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-color)\n\n strokeColor (rgb 0 100 44)\n\n strokeColor (hex \"#FF9E2C\")\n\n","type":"Css.BaseValue Css.Color -> Css.Style"},{"name":"strokeDashCorner","comment":" Sets [`stroke-dash-corner`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-dash-corner).\n\n strokeDashCorner none\n\n strokeDashCorner (px 10)\n\n strokeDashCorner (em 5)\n\n","type":"Css.BaseValue (Css.LengthSupported { none : Css.Value.Supported, pct : Css.Value.Supported, auto : Css.Value.Supported, cover : Css.Value.Supported }) -> Css.Style"},{"name":"strokeDashJustify","comment":" Sets [`stroke-dash-justify`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-dash-justify).\n\n strokeDashJustify none\n strokeDashJustify stretch\n strokeDashJustify compress\n strokeDashJustify dashes\n strokeDashJustify gaps\n\n","type":"Css.BaseValue { none : Css.Value.Supported, stretch : Css.Value.Supported, compress : Css.Value.Supported, dashes : Css.Value.Supported, gaps : Css.Value.Supported } -> Css.Style"},{"name":"strokeDasharray","comment":" Sets [`stroke-dasharray`](https://css-tricks.com/almanac/properties/s/stroke-dasharray/)\n\n strokeDasharray (num 2)\n\n strokeDasharray (num 2.5)\n\n strokeDasharray (em 2)\n\n strokeDasharray (pct 15)\n\n","type":"Css.BaseValue (Css.LengthSupported { num : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"strokeDashoffset","comment":" Sets [`stroke-dashoffset`](https://css-tricks.com/almanac/properties/s/stroke-dashoffset/)\n\n strokeDashoffset zero\n\n strokeDashoffset (num 100)\n\n strokeDashoffset (pct 25)\n\n","type":"Css.BaseValue { zero : Css.Value.Supported, calc : Css.Value.Supported, num : Css.Value.Supported, pct : Css.Value.Supported } -> Css.Style"},{"name":"strokeImage","comment":" Sets [`stroke-image`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-image)\n\n strokeImage (url \"#svg-pattern\")\n\n strokeImage (url \"http://www.example.com/chicken.jpg\")\n\n","type":"Css.BaseValue { url : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"strokeLinecap","comment":" Sets [`stroke-linecap`](https://css-tricks.com/almanac/properties/s/stroke-linecap/)\n\n strokeLinecap butt\n\n strokeLinecap square\n\n strokeLinecap round\n\n","type":"Css.BaseValue { butt : Css.Value.Supported, square : Css.Value.Supported, round_ : Css.Value.Supported } -> Css.Style"},{"name":"strokeLinejoin","comment":" Sets [`stroke-linejoin`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-linejoin).\n\n strokeLinejoin crop\n\n strokeLinejoin arcs\n\n strokeLinejoin miter\n\n**Note:** if you only want to specifiy the rendering of the cap of a corner you need to use [`strokeLinejoin2`](#strokeLinejoin2)\nand set it's first value to `miter` like so: `strokeLinejoin2 miter bevel`.\n\n","type":"Css.BaseValue { crop : Css.Value.Supported, arcs : Css.Value.Supported, miter : Css.Value.Supported } -> Css.Style"},{"name":"strokeLinejoin2","comment":" Sets [`stroke-linejoin`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-linejoin).\n\n strokeLinejoin crop bevel\n\n strokeLinejoin arcs round\n\n strokeLinejoin miter fallback\n\n","type":"Css.Value.Value { crop : Css.Value.Supported, arcs : Css.Value.Supported, miter : Css.Value.Supported } -> Css.Value.Value { bevel : Css.Value.Supported, round_ : Css.Value.Supported, fallback : Css.Value.Supported } -> Css.Style"},{"name":"strokeMiterlimit","comment":" Sets [`stroke-miterlimit`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-miterlimit)\n\n strokeMiterlimit (num 4)\n\n","type":"Css.BaseValue { num : Css.Value.Supported } -> Css.Style"},{"name":"strokeOpacity","comment":" Sets [`stroke-opacity`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-opacity)\n\n strokeOpacity (num 0.5)\n\n","type":"Css.BaseValue { num : Css.Value.Supported } -> Css.Style"},{"name":"strokeOrigin","comment":" Sets [`stroke-origin`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-origin)\n\n strokeOrign matchParent\n\n strokeOrign fillBox\n\n strokeOrign strokeBox\n\n strokeOrign contentBox\n\n strokeOrign paddingBox\n\n strokeOrign borderBox\n\n","type":"Css.BaseValue { matchParent : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, contentBox : Css.Value.Supported, paddingBox : Css.Value.Supported, borderBox : Css.Value.Supported } -> Css.Style"},{"name":"strokePosition","comment":" Sets [`stroke-position`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-position).\n\n strokePosition left_\n\n strokePosition (px 45)\n\n`strokePosition` sets the horizontal direction. If you need the vertical\ndirection instead, use [`strokePosition2`](#strokePosition2) like this:\n\n strokePosition zero (px 45)\n\nIf you need to set the offsets from the right or bottom, use\n[`strokePosition4`](#strokePosition4) like this:\n\n strokePosition4 right_ (px 20) bottom_ (pct 25)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Style"},{"name":"strokePosition2","comment":" Sets [`stroke-position`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-position).\n\n strokePosition2 left_ top_\n\n strokePosition2 (px 45) (pct 50)\n\n`strokePosition2` sets both the horizontal and vertical directions (in that\norder, same as CSS.) If you need only the horizontal, you can use\n[`strokePosition`](#strokePosition) instead:\n\n strokePosition left_\n\nIf you need to set the offsets from the right or bottom, use\n[`strokePosition4`](#strokePosition4) like this:\n\n strokePosition4 right_ (px 20) bottom_ (pct 25)\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported }) -> Css.Style"},{"name":"strokePosition4","comment":" Sets [`stroke-position`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-position).\n\n strokePosition4 right_ (px 20) bottom_ (pct 30)\n\nThe four-argument form of stroke-position alternates sides and offets. So the\nexample above would position the stroke-image 20px from the right, and 30%\nfrom the bottom.\n\nSee also [`strokePosition`](#strokePosition) for horizontal alignment and\n[`strokePosition2`](#strokePosition2) for horizontal (from left) and\nvertical (from top) alignment.\n\n","type":"Css.Value.Value { left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported } -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"strokeRepeat","comment":" Sets [`stroke-repeat`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-repeat)\n\n strokeRepeat repeat\n\n strokeRepeat repeatX\n\nIf you need to set horizontal and vertical direction separately, see\n[`strokeRepeat2`](#strokeRepeat2)\n\n","type":"Css.BaseValue { repeat : Css.Value.Supported, repeatX : Css.Value.Supported, repeatY : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"strokeRepeat2","comment":" Sets [`stroke-repeat`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-repeat) along the horizontal axis, then the vertical axis.\n\n strokeRepeat2 repeat space\n\n strokeRepeat2 space round\n\nIf you only need to set one value for both, see\n[`strokeRepeat`](#strokeRepeat) instead.\n\n","type":"Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Value.Value { repeat : Css.Value.Supported, space : Css.Value.Supported, round_ : Css.Value.Supported, noRepeat : Css.Value.Supported } -> Css.Style"},{"name":"strokeSize","comment":" Sets [`stroke-size`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-size).\n\n strokeSize cover\n\n strokeSize (px 400)\n\nIf you give a length value, it will be used for the width. The height will be set\nproportional to the size of the [`stroke-image`](#strokeImage). If you\nneed to set both width and height explicitly, use\n[`strokeImage2`](#strokeImage2) instead.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, cover : Css.Value.Supported }) -> Css.Style"},{"name":"strokeSize2","comment":" Sets [`stroke-size`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-size).\n\n strokeSize2 (px 300) (px 100)\n\n strokeSize2 auto (px 400)\n\nIf you only want to set the width, use [`strokeImage`](#strokeImage) instead.\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"strokeWidth","comment":" Sets [`stroke-width`](https://css-tricks.com/almanac/properties/s/stroke-width/)\n\n strokeWidth zero\n\n strokeWidth (px 2)\n\n strokeWidth (em 2)\n\n strokeWidth (num 2)\n\n strokeWidth (num 2.5)\n\n strokeWidth (pct 15)\n\n","type":"Css.BaseValue (Css.LengthSupported { num : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"style","comment":" Sets the `style` value for:\n\n - [`contain`](#contain). **(This value is considered at-risk from being depreciated for this property.)**\n - [`fontSynthesis`](#fontSynthesis)\n\n```\n contain style\n\n fontSynthesis style\n```\n\n","type":"Css.Value.Value { provides | style : Css.Value.Supported }"},{"name":"sub","comment":" A `sub` value for the following properties:\n\n - [`fontVariantPosition`](#fontVariantPosition)\n - [`verticalAlign`](#verticalAlign)\n\n```\n fontVariantPosition sub\n\n verticalAlign sub\n```\n\n","type":"Css.Value.Value { provides | sub : Css.Value.Supported }"},{"name":"subtract","comment":" Sets `subtract` value for usage with [`maskComposite`](#maskComposite).\n\n maskComposite subtract\n\n","type":"Css.Value.Value { provides | subtract : Css.Value.Supported }"},{"name":"super","comment":" A `super` value for the following properties:\n\n - [`fontVariantPosition`](#fontVariantPosition)\n - [`verticalAlign`](#verticalAlign)\n\n```\n fontVariantPosition super\n\n verticalAlign super\n```\n\n","type":"Css.Value.Value { provides | super : Css.Value.Supported }"},{"name":"swResize","comment":" The `sw-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | swResize : Css.Value.Supported }"},{"name":"swap","comment":" Sets `swap` value for usage with [`fontDisplay`](#fontDisplay).\n\n fontDisplay swap\n\n","type":"Css.Value.Value { provides | swap : Css.Value.Supported }"},{"name":"systemUi","comment":" The `system-ui` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#3Cgeneric-name%3E).\n\nYou may want to [read more about the system font stack](https://css-tricks.com/snippets/css/system-font-stack/) before using this one.\n\n fontFamily systemUi\n\n fontFamilyMany [ \"\", \"Segoe UI\" ] systemUi\n\n fontFamilyMany [ \"system-ui\", \"Segoe UI\", \"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" ] sansSerif\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | systemUi : Css.Value.Supported }"},{"name":"tabSize","comment":" Sets [`tab-size`](https://css-tricks.com/almanac/properties/t/tab-size/)\n**Note:** only positive integer values are allowed.\n\n tabSize (int 4)\n\n","type":"Css.BaseValue (Css.LengthSupported { int : Css.Value.Supported }) -> Css.Style"},{"name":"table","comment":" The `table` value used by [`display`](#display).\n\n display table\n\n","type":"Css.Value.Value { provides | table : Css.Value.Supported }"},{"name":"tableCaption","comment":" The `table-caption` value used by [`display`](#display).\n\n display tableCaption\n\n","type":"Css.Value.Value { provides | tableCaption : Css.Value.Supported }"},{"name":"tableCell","comment":" The `table-cell` value used by [`display`](#display).\n\n display tableCell\n\n","type":"Css.Value.Value { provides | tableCell : Css.Value.Supported }"},{"name":"tableColumn","comment":" The `table-column` value used by [`display`](#display).\n\n display tableColumn\n\n","type":"Css.Value.Value { provides | tableColumn : Css.Value.Supported }"},{"name":"tableColumnGroup","comment":" The `table-column-group` value used by [`display`](#display).\n\n display tableColumnGroup\n\n","type":"Css.Value.Value { provides | tableColumnGroup : Css.Value.Supported }"},{"name":"tableFooterGroup","comment":" The `table-footer-group` value used by [`display`](#display).\n\n display tableFooterGroup\n\n","type":"Css.Value.Value { provides | tableFooterGroup : Css.Value.Supported }"},{"name":"tableHeaderGroup","comment":" The `table-header-group` value used by [`display`](#display).\n\n display tableHeaderGroup\n\n","type":"Css.Value.Value { provides | tableHeaderGroup : Css.Value.Supported }"},{"name":"tableLayout","comment":" Sets [`table-layout`](https://css-tricks.com/almanac/properties/t/table-layout/).\n\n tableLayout auto\n\n tableLayout fixed\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, fixed : Css.Value.Supported } -> Css.Style"},{"name":"tableRow","comment":" The `table-row` value used by [`display`](#display).\n\n display tableRow\n\n","type":"Css.Value.Value { provides | tableRow : Css.Value.Supported }"},{"name":"tableRowGroup","comment":" The `table-row-group` value used by [`display`](#display).\n\n display tableRowGroup\n\n","type":"Css.Value.Value { provides | tableRowGroup : Css.Value.Supported }"},{"name":"tabularNums","comment":" The `tabular-nums` [`font-variant-numeric` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).\n\n fontVariantNumeric tabularNums\n\n","type":"Css.Value.Value { provides | tabularNums : Css.Value.Supported }"},{"name":"tamil","comment":" The `tamil` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType tamil\n\n","type":"Css.Value.Value { provides | tamil : Css.Value.Supported }"},{"name":"target","comment":" A [`:target`](https://developer.mozilla.org/en-US/docs/Web/CSS/:target)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n target\n [ fontWeight bold\n , border3 (px 2) dotted (rgb 255 0 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"telugu","comment":" The `telugu` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType telugu\n\n","type":"Css.Value.Value { provides | telugu : Css.Value.Supported }"},{"name":"templateAreaRow","comment":" The portion of a possible way of giving a\n[`gridTemplate`](#gridTemplate)`a value that sets rows and areas.\n\n gridTemplate <|\n templateAreasRowsColumns\n [ templateAreaRow\n ( Just <| lineNames [\"header-left\"] )\n \"head head\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"header-right\"] )\n \n , templateAreaRow\n ( Just <| lineNames [\"main-left\"] )\n \"nav main\"\n ( Just <| fr 1 )\n ( Just <| lineNames [\"main-right\"])\n\n , templateAreaRow\n ( Just <| lineNames [\"footer-left\"] )\n \"nav foot\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"footer-right\"])\n ]\n ( Just <| templateColumns\n ( px 120 )\n [ fr 120\n ]\n )\n","type":"Maybe.Maybe (Css.Value.Value { lineNames : Css.Value.Supported }) -> String.String -> Maybe.Maybe (Css.Value.Value Css.TrackSize) -> Maybe.Maybe (Css.Value.Value { lineNames : Css.Value.Supported }) -> Css.Value.Value { provides | templateAreaRow : Css.Value.Supported }"},{"name":"templateAreasRowsColumns","comment":" Provides structured input for [`gridTemplate`](#gridTemplate) for\ninputting areas combined with rows, and then columns.\n\n gridTemplate <|\n templateAreasRowsColumns\n [ templateAreaRow\n ( Just <| lineNames [\"left\"] )\n \"nav foot\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"right\"])\n ]\n ( Just <| templateColumns\n ( px 120 )\n [ fr 120\n ]\n )\n","type":"List.List (Css.Value.Value { templateAreaRow : Css.Value.Supported }) -> Maybe.Maybe (Css.Value.Value { templateColumns : Css.Value.Supported }) -> Css.Value.Value { provides | templateAreasRowsColumns : Css.Value.Supported }"},{"name":"templateColumns","comment":" The portion of a possible way of giving a\n[`gridTemplate`](#gridTemplate)`a value that sets columns.\n\nThe first value is the head of the list. This function is structured in this\nway to prevent giving empty lists.\n\n gridTemplate <|\n templateAreasRowsColumns\n [ templateAreaRow\n ( Just <| lineNames [\"left\"] )\n \"nav foot\"\n ( Just <| px 30 )\n ( Just <| lineNames [\"right\"])\n ]\n ( Just <| templateColumns\n ( px 120 )\n [ fr 120\n ]\n )\n\n","type":"Css.Value.Value (Css.TrackSizeSupported { lineNames : Css.Value.Supported }) -> List.List (Css.Value.Value (Css.TrackSizeSupported { lineNames : Css.Value.Supported })) -> Css.Value.Value { provides | templateColumns : Css.Value.Supported }"},{"name":"templateRowsColumns","comment":" Provides structured input for [`gridTemplate`](#gridTemplate) for\ninputting rows and columns, equivalent to inputting [`gridTemplateRows`](#gridTemplateRows)\nand [`gridTemplateColumns`] separately.\n\n gridTemplate <|\n templateRowsColumns\n trackList\n ( lineNames [\"line1\", \"line2\"] )\n [ px 300\n , lineNames [\"line3\"]\n ]\n \n autoTrackList\n ( minmax (px 210) maxContent )\n [ autoRepeat autoFill [px 200]\n , pct 20\n ]\n","type":"Css.Value.Value { trackList : Css.Value.Supported, autoTrackList : Css.Value.Supported } -> Css.Value.Value { trackList : Css.Value.Supported, autoTrackList : Css.Value.Supported } -> Css.Value.Value { provides | templateRowsColumns : Css.Value.Supported }"},{"name":"text","comment":" The `text` value for the [`cursor`](#cursor),\n[`backgroundClip`](#backgroundClip),\nand [`user-select`](#userSelect) properties.\n\n backgroundClip text\n\n cursor text\n\n userSelect text\n\n","type":"Css.Value.Value { provides | text : Css.Value.Supported }"},{"name":"textAlign","comment":" Sets [`text-align`](https://css-tricks.com/almanac/properties/t/text-align/)\n\n textAlign left_\n\n textAlign justfy\n\n","type":"Css.BaseValue { left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported, justify : Css.Value.Supported, start : Css.Value.Supported, end : Css.Value.Supported, matchParent : Css.Value.Supported } -> Css.Style"},{"name":"textBottom","comment":" A `textBottom` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property.\n\n verticalAlign textBottom\n\n","type":"Css.Value.Value { provides | textBottom : Css.Value.Supported }"},{"name":"textDecoration","comment":" Sets [`text-decoration`][text-decoration] shorthand property.\n\n textDecoration underline\n\n[text-decoration]: https://css-tricks.com/almanac/properties/t/text-decoration/\n\n","type":"Css.BaseValue (Css.ColorSupported { none : Css.Value.Supported, underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported, solid : Css.Value.Supported, double : Css.Value.Supported, dotted : Css.Value.Supported, dashed : Css.Value.Supported, wavy : Css.Value.Supported }) -> Css.Style"},{"name":"textDecoration2","comment":" Sets [`text-decoration`][text-decoration] property.\n\n textDecoration2 underline dotted\n\n[text-decoration]: https://css-tricks.com/almanac/properties/t/text-decoration/\n\n","type":"Css.Value.Value { none : Css.Value.Supported, underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported } -> Css.Value.Value { solid : Css.Value.Supported, double : Css.Value.Supported, dotted : Css.Value.Supported, dashed : Css.Value.Supported, wavy : Css.Value.Supported } -> Css.Style"},{"name":"textDecoration3","comment":" Sets [`text-decoration`][text-decoration] property.\n\n textDecoration3 underline dotted (hex \"#cf0\")\n\n[text-decoration]: https://css-tricks.com/almanac/properties/t/text-decoration/\n\n","type":"Css.Value.Value { none : Css.Value.Supported, underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported } -> Css.Value.Value { solid : Css.Value.Supported, double : Css.Value.Supported, dotted : Css.Value.Supported, dashed : Css.Value.Supported, wavy : Css.Value.Supported } -> Css.Value.Value Css.Color -> Css.Style"},{"name":"textDecorationColor","comment":" Sets [`text-decoration-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) property.\n\n textDecorationColor (hex \"#0cf\")\n\n","type":"Css.BaseValue (Css.ColorSupported { transparent : Css.Value.Supported }) -> Css.Style"},{"name":"textDecorationLine","comment":" Sets [`text-decoration-line`][text-decoration-line] property.\n\n textDecorationLine underline\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/\n\n","type":"Css.BaseValue { none : Css.Value.Supported, underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported } -> Css.Style"},{"name":"textDecorationLine2","comment":" Sets [`text-decoration-line`][text-decoration-line] property.\n\n textDecorationLine2 underline overline\n\n**Note:** The first and second argument **MUST NOT** be the same.\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/\n\n","type":"Css.Value.Value { underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported } -> Css.Value.Value { underline : Css.Value.Supported, overline : Css.Value.Supported, lineThrough : Css.Value.Supported } -> Css.Style"},{"name":"textDecorationLine3","comment":" Sets [`text-decoration-line`][text-decoration-line] property.\n\n textDecorationLine3 underline overline lineThrough\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/\n\n","type":"Css.Value.Value { underline : Css.Value.Supported } -> Css.Value.Value { overline : Css.Value.Supported } -> Css.Value.Value { lineThrough : Css.Value.Supported } -> Css.Style"},{"name":"textDecorationSkipInk","comment":" Sets [`text-decoration-skip-ink`](https://css-tricks.com/almanac/properties/t/text-decoration-skip-ink/) property.\n\n textDecorationSkipInk auto\n\n textDecorationSkipInk all_\n\n textDecorationSkipInk none\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, all_ : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"textDecorationStyle","comment":" Sets [`text-decoration-style`][text-decoration-style] property.\n\n textDecorationStyle wavy\n\n[text-decoration-style]: https://css-tricks.com/almanac/properties/t/text-decoration-style/\n\n","type":"Css.BaseValue { solid : Css.Value.Supported, double : Css.Value.Supported, dotted : Css.Value.Supported, dashed : Css.Value.Supported, wavy : Css.Value.Supported } -> Css.Style"},{"name":"textDecorationThickness","comment":" Sets the [`text-decoration-thickness`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) property.\n\n textDecorationThickness (pct 10)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, fromFont : Css.Value.Supported }) -> Css.Style"},{"name":"textEmphasis","comment":" Sets the [`text-emphasis`](https://css-tricks.com/almanac/properties/t/text-emphasis/) property.\n\nThis is for drawing attention towards textual elements in a way that is commonly\nused in East Asian languages.\n\nString values should only be one character in length.\n\n textEmphasis (hex \"ff0000\")\n\n textEmphasis sesame\n\n textEmphasis2 triangle (hex \"00ff00\")\n\n textEmphasis3 filled dot (hex \"ff0000\")\n\n","type":"Css.BaseValue (Css.ColorSupported { none : Css.Value.Supported, filled : Css.Value.Supported, open : Css.Value.Supported, dot : Css.Value.Supported, circle_ : Css.Value.Supported, doubleCircle : Css.Value.Supported, triangle : Css.Value.Supported, sesame : Css.Value.Supported, string : Css.Value.Supported }) -> Css.Style"},{"name":"textEmphasis2","comment":" Sets the [`text-emphasis`](https://css-tricks.com/almanac/properties/t/text-emphasis/) property.\n\nThis 2-argument form sets [`textEmphasisStyle`](#textEmphasisStyle) and [`textEmphasisColor`](#textEmphasisColor) in a single declaration.\n\nString values should only be one character in length.\n\n textEmphasis (hex \"ff0000\")\n\n textEmphasis sesame\n\n textEmphasis2 triangle (hex \"00ff00\")\n\n textEmphasis3 filled dot (hex \"ff0000\")\n","type":"Css.Value.Value { none : Css.Value.Supported, filled : Css.Value.Supported, open : Css.Value.Supported, dot : Css.Value.Supported, circle_ : Css.Value.Supported, doubleCircle : Css.Value.Supported, triangle : Css.Value.Supported, sesame : Css.Value.Supported, string : Css.Value.Supported } -> Css.Value.Value Css.Color -> Css.Style"},{"name":"textEmphasis3","comment":" Sets the [`text-emphasis`](https://css-tricks.com/almanac/properties/t/text-emphasis/) property.\n\nThis 3-argument form sets [`textEmphasisStyle2`](#textEmphasisStyle2) and a [`textEmphasisColor`](#textEmphasisColor) in a single declaration.\n\n textEmphasis (hex \"ff0000\")\n\n textEmphasis sesame\n\n textEmphasis2 triangle (hex \"00ff00\")\n\n textEmphasis3 filled dot (hex \"ff0000\")\n\n","type":"Css.BaseValue { filled : Css.Value.Supported, open : Css.Value.Supported } -> Css.BaseValue { dot : Css.Value.Supported, circle_ : Css.Value.Supported, doubleCircle : Css.Value.Supported, triangle : Css.Value.Supported, sesame : Css.Value.Supported } -> Css.Value.Value Css.Color -> Css.Style"},{"name":"textEmphasisColor","comment":" Sets the [`text-emphasis-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color) property.\n\n textEmphasisColor currentcolor\n\n textEmphasisColor (hex \"0000ff\")\n\n textEmphasisColor transparent\n","type":"Css.BaseValue (Css.ColorSupported { transparent : Css.Value.Supported }) -> Css.Style"},{"name":"textEmphasisPosition","comment":" Sets the [`text-emphasis-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position) property.\n\nThis is the one argument version, which is limited to setting global values.\n\nIf you want to specify the positions of the text-emphasis, you must use the [2-argument form](#textEmphasisPosition2).\n\n textEmphasisPosition inherit\n\n textEmphasisPosition revert\n\n textEmphasisPosition2 over left_\n\n textEmphasisPosition2 under right_\n\n","type":"Css.BaseValue a -> Css.Style"},{"name":"textEmphasisPosition2","comment":" Sets the the [`text-emphasis-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position) property.\n\nThis is the 2-argument form that lets you specify the positions of the emphasis.\n\nif you want to apply global values, you must use the [1-argument form](#textEmphasisPosition).\n\n textEmphasisPosition inherit\n\n textEmphasisPosition revert\n\n textEmphasisPosition2 over left_\n\n textEmphasisPosition2 under right_\n\n","type":"Css.BaseValue { over : Css.Value.Supported, under : Css.Value.Supported } -> Css.BaseValue { left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"textEmphasisStyle","comment":" Sets the [`text-emphasis-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style) property.\n\nString values should only be one character in length.\n\n textEmphasisStyle none\n\n textEmphasisStyle open\n\n textEmphasisStyle (string \"🐯\")\n","type":"Css.BaseValue { none : Css.Value.Supported, filled : Css.Value.Supported, open : Css.Value.Supported, dot : Css.Value.Supported, circle_ : Css.Value.Supported, doubleCircle : Css.Value.Supported, triangle : Css.Value.Supported, sesame : Css.Value.Supported, string : Css.Value.Supported } -> Css.Style"},{"name":"textEmphasisStyle2","comment":" Sets the [`text-emphasis-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style) property when you want to use two arguments - one for `filled` or `open`, and one for the shape style.\n\n textEmphasisStyle filled sesame\n\n textEmphasisStyle open dot\n","type":"Css.Value.Value { filled : Css.Value.Supported, open : Css.Value.Supported } -> Css.Value.Value { dot : Css.Value.Supported, circle_ : Css.Value.Supported, doubleCircle : Css.Value.Supported, triangle : Css.Value.Supported, sesame : Css.Value.Supported } -> Css.Style"},{"name":"textIndent","comment":" The [`text-indent`](https://css-tricks.com/almanac/properties/t/text-indent/) property.\n\n textIndent (em 1.5)\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Style"},{"name":"textIndent2","comment":" The [`text-indent`](https://css-tricks.com/almanac/properties/t/text-indent/) property.\n\n textIndent2 (em 1.5) hanging\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { hanging : Css.Value.Supported, eachLine : Css.Value.Supported } -> Css.Style"},{"name":"textIndent3","comment":" The [`text-indent`](https://css-tricks.com/almanac/properties/t/text-indent/) property.\n\n textIndent3 (em 1.5) hanging eachLine\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { hanging : Css.Value.Supported } -> Css.Value.Value { eachLine : Css.Value.Supported } -> Css.Style"},{"name":"textJustify","comment":" Sets [`text-justify`](https://css-tricks.com/almanac/properties/t/text-justify/)\n\n textJustify interWord\n\n textJustify interCharacter\n\n textJustify auto\n\n textJustify none\n\n","type":"Css.BaseValue { interWord : Css.Value.Supported, interCharacter : Css.Value.Supported, auto : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"textOrientation","comment":" Sets [`text-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation).\n\n textOrientation sideways\n\n textOrientation upright\n\n","type":"Css.BaseValue { mixed : Css.Value.Supported, sideways : Css.Value.Supported, sidewaysRight : Css.Value.Supported, upright : Css.Value.Supported, useGlyphOrientation : Css.Value.Supported } -> Css.Style"},{"name":"textOverflow","comment":" Sets the [`text-overflow`](https://css-tricks.com/almanac/properties/t/text-overflow/) property.\n\n`text-overflow` describes how text that gets cut off is signalled to users.\n\nWhen the one-argument version is used, it sets the end of text (right end for LTR users) that is cut off.\n\n textOverflow ellipsis\n\nWhen the two-argument version is used, it specifies how the\ntext cut-off is displayed at the start (left in LTR) and\nthe end (right in LTR) of the text.\n\n textOverflow2 ellipsis ellipsis\n\n","type":"Css.BaseValue { clip : Css.Value.Supported, ellipsis : Css.Value.Supported } -> Css.Style"},{"name":"textOverflow2","comment":" Sets the [`text-overflow`](https://css-tricks.com/almanac/properties/t/text-overflow/) property.\n\n`text-overflow` describes how text that gets cut off is signalled to users.\n\nThis version specifies how the text cut-off is displayed at the start\n(left in LTR) and at the end (right in LTR) of the text.\n\n textOverflow2 ellipsis ellipsis\n\n","type":"Css.Value.Value { clip : Css.Value.Supported, ellipsis : Css.Value.Supported } -> Css.Value.Value { clip : Css.Value.Supported, ellipsis : Css.Value.Supported } -> Css.Style"},{"name":"textRendering","comment":" Sets [`text-rendering`](https://css-tricks.com/almanac/properties/t/text-rendering/).\n\n textRendering geometricPrecision\n\n textRendering optimizeSpeed\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, geometricPrecision : Css.Value.Supported, optimizeLegibility : Css.Value.Supported, optimizeSpeed : Css.Value.Supported } -> Css.Style"},{"name":"textShadow","comment":" The [`text-shadow`](https://css-tricks.com/almanac/properties/b/text-shadow/) property.\n\n boxShadow initial\n\n boxShadow none\n\nThis 1-argument variant is for single keyword values only. \nFor defining shadows look at [`textShadowMany`](#textShadowMany).\n\n","type":"Css.BaseValue { none : Css.Value.Supported } -> Css.Style"},{"name":"textShadowMany","comment":" Sets [`text-shadow`](https://css-tricks.com/almanac/properties/t/text-shadow/).\n\nThis multi-argument variant is for defining shadows only.\nFor single keyword values, look at [`textShadow`](#textShadow).\n\n\n textShadowMany [] -- \"text-shadow: unset\"\n\n -- \"text-shadow: 3px 5px #aabbcc\"\n span\n [ css\n [ textShadow\n [ { defaultTextShadow\n | offsetX = px 3\n , offsetY = px 5\n , color = Just (hex \"#aabbcc\")\n }\n ]\n ]\n ]\n [ text \"Zap!\" ]\n\n","type":"List.List Css.TextShadowConfig -> Css.Style"},{"name":"textTop","comment":" A `textTop` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property.\n\n verticalAlign textTop\n\n","type":"Css.Value.Value { provides | textTop : Css.Value.Supported }"},{"name":"textTransform","comment":" Sets [`text-transform`](https://css-tricks.com/almanac/properties/t/text-transform/).\n\n textTransform capitalize\n\n textTransform uppercase\n\n","type":"Css.BaseValue { capitalize : Css.Value.Supported, uppercase : Css.Value.Supported, lowercase : Css.Value.Supported, fullWidth : Css.Value.Supported, fullSizeKana : Css.Value.Supported, none : Css.Value.Supported } -> Css.Style"},{"name":"textUnderlineOffset","comment":" Sets the [text-underline-offset](https://css-tricks.com/almanac/properties/t/text-underline-offset/) property.\n\n textUnderlineOffset (pct 5)\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"textUnderlinePosition","comment":" Sets [`text-underline-position`](https://css-tricks.com/almanac/properties/t/text-underline-position/)\n\n textUnderlinePosition auto\n\n textUnderlinePosition under\n\n textUnderlinePosition left_\n\n textUnderlinePosition right_\n\n","type":"Css.BaseValue { auto : Css.Value.Supported, under : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"textUnderlinePosition2","comment":" Sets [`text-underline-position`](https://css-tricks.com/almanac/properties/t/text-underline-position/)\n\n textUnderlinePosition2 under left_\n\n textUnderlinePosition2 under right_\n\n","type":"Css.Value.Value { under : Css.Value.Supported } -> Css.Value.Value { left_ : Css.Value.Supported, right_ : Css.Value.Supported } -> Css.Style"},{"name":"thai","comment":" The `thai` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType thai\n\n","type":"Css.Value.Value { provides | thai : Css.Value.Supported }"},{"name":"thick","comment":" The `thick` value used by properties such as [`borderWidth`](#borderWidth),\nand [`columnRuleWidth`](#columnRuleWidth).\n\n borderWidth thick\n\n columnRuleWidth thick\n\nThe value is equivalent of 5px.\n\n","type":"Css.Value.Value { provides | thick : Css.Value.Supported }"},{"name":"thin","comment":" The `thin` value used by various properties.\n\nIn [`borderWidth`](#borderWidth) and\n[`columnRuleWidth`](#columnRuleWidth), the value is\nequivalent to 1px.\n\n borderWidth thin\n\n columnRuleWidth thin\n\nIt's also used in [`scrollbarWidth`](#scrollbarWidth).\n\n scrollbarWidth thin\n\n","type":"Css.Value.Value { provides | thin : Css.Value.Supported }"},{"name":"tibetan","comment":" The `tibetan` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType tibetan\n\n","type":"Css.Value.Value { provides | tibetan : Css.Value.Supported }"},{"name":"times","comment":" Use with [`calc`](#calc) to multiply a value by a unitless number.\n\n calc (pct 100) (times (int 2))\n -- calc: (100% * 2px)\n\n","type":"Css.Value.Value { num : Css.Value.Supported, int : Css.Value.Supported, zero : Css.Value.Supported } -> Css.CalcOperation"},{"name":"titlingCaps","comment":" The `titling-caps` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values).\n\n fontVariantCaps titlingCaps\n\n","type":"Css.Value.Value { provides | titlingCaps : Css.Value.Supported }"},{"name":"toBottom","comment":" Provides the [`to bottom` side angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toBottom (stop red) (stop blue) []\n\nIf you want your gradient to go to a corner, use [`toBottomLeft`](#toBottomLeft) or [`toBottomRight`](#toBottomRight):\n\n linearGradient toBottomLeft (stop red) (stop blue) []\n\n linearGradient toBottomRight (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toBottom : Css.Value.Supported }"},{"name":"toBottomLeft","comment":" Provides the [`to bottom left` corner angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toBottomLeft (stop red) (stop blue) []\n\nIf you want your gradient to go to a side, use [`toBottom`](#toBottom) or [`toLeft`](#toLeft) instead:\n\n linearGradient toBottom (stop red) (stop blue) []\n\n linearGradient toLeft (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toBottomLeft : Css.Value.Supported }"},{"name":"toBottomRight","comment":" Provides the [`to bottom right` corner angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toBottomRight (stop red) (stop blue) []\n\nIf you want your gradient to go to a side, use [`toBottom`](#toBottom) or [`toRight`](#toRight) instead:\n\n linearGradient toBottom (stop red) (stop blue) []\n\n linearGradient toRight (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toBottomRight : Css.Value.Supported }"},{"name":"toLeft","comment":" Provides the [`to left` side angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toLeft (stop red) (stop blue) []\n\nIf you want your gradient to go to a corner, use [`toTopLeft`](#toTopLeft) or [`toBottomLeft`](#toBottomLeft):\n\n linearGradient toTopLeft (stop red) (stop blue) []\n\n linearGradient toBottomLeft (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toLeft : Css.Value.Supported }"},{"name":"toRight","comment":" Provides the [`to right` side angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toRight (stop red) (stop blue) []\n\nIf you want your gradient to go to a corner, use [`toTopRight`](#toTopRight) or [`toBottomRight`](#toBottomRight):\n\n linearGradient toTopRight (stop red) (stop blue) []\n\n linearGradient toBottomRight (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toRight : Css.Value.Supported }"},{"name":"toTop","comment":" Provides the [`to top` side angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toTop (stop red) (stop blue) []\n\nIf you want your gradient to go to a corner, use [`toTopLeft`](#toTopLeft) or [`toTopRight`](#toTopRight):\n\n linearGradient toTopLeft (stop red) (stop blue) []\n\n linearGradient toTopRight (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toTop : Css.Value.Supported }"},{"name":"toTopLeft","comment":" Provides the [`to top left` corner angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toTopLeft (stop red) (stop blue) []\n\nIf you want your gradient to go to a side, use [`toTop`](#toTop) or [`toLeft`](#toLeft) instead:\n\n linearGradient toTop (stop red) (stop blue) []\n\n linearGradient toLeft (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toTopLeft : Css.Value.Supported }"},{"name":"toTopRight","comment":" Provides the [`to top right` corner angle](https://css-tricks.com/snippets/css/css-linear-gradient/) for gradients.\n\n linearGradient toTopRight (stop red) (stop blue) []\n\nIf you want your gradient to go to a side, use [`toTop`](#toTop) or [`toRight`](#toRight) instead:\n\n linearGradient toTop (stop red) (stop blue) []\n\n linearGradient toRight (stop red) (stop blue) []\n\n","type":"Css.Value.Value { provides | toTopRight : Css.Value.Supported }"},{"name":"top","comment":" Sets the [`top`](https://css-tricks.com/almanac/properties/t/top/) property.\n\n top (px 10)\n\n top (pct 50)\n\n top auto\n\n top zero\n\nIf you need to use `top` as a CSS _value_ instead of as a _property_,\nfor example in `vertical-align: top`, use [`top_`](#top_) instead of this.\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported }) -> Css.Style"},{"name":"top_","comment":" The `top` value, used in the following properties:\n\n - [`backgroundPosition`](#backgroundPosition)\n - [`captionSide`](#captionSide)\n - [`objectPosition2`](#objectPosition2)\n - [`perspectiveOrigin2`](#perspectiveOrigin2)\n - [`strokePosition2`](#strokePosition2)\n - [`transformOrigin`](#transformOrigin)\n - [`verticalAlign`](#verticalAlign)\n\n```\nbackgroundPosition top_\n\ncaptionSide top_\n\nobjectPosition2 right_ top_\n\nperspectiveOrigin2 left_ top_\n\ntransformOrigin top_\n\nverticalAlign top_\n```\n\nThe value is called `top_` instead of `top` because [`top` is already a property function](#top).\n\n","type":"Css.Value.Value { provides | top_ : Css.Value.Supported }"},{"name":"touchAction","comment":" The [`touch-action`](https://css-tricks.com/almanac/properties/t/touch-action/)\nproperty.\n\n touchAction auto\n\n touchAction panY\n\n touchAction pinchZoom\n","type":"Css.BaseValue { auto : Css.Value.Supported, none : Css.Value.Supported, panX : Css.Value.Supported, panY : Css.Value.Supported, pinchZoom : Css.Value.Supported, manipulation : Css.Value.Supported } -> Css.Style"},{"name":"trackList","comment":" Creates a `` value for use in creating grid tempolates.\n\n gridTemplateColumns <|\n trackList [ fixedRepeat (num 4) [px 520] ]\n","type":"Css.Value.Value (Css.TrackSizeSupported { fixedRepeat : Css.Value.Supported, lineNames : Css.Value.Supported }) -> List.List (Css.Value.Value (Css.TrackSizeSupported { fixedRepeat : Css.Value.Supported, lineNames : Css.Value.Supported })) -> Css.Value.Value { provides | trackList : Css.Value.Supported }"},{"name":"tradChineseFormal","comment":" The `trad-chinese-formal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType tradChineseFormal\n\n","type":"Css.Value.Value { provides | tradChineseFormal : Css.Value.Supported }"},{"name":"tradChineseInformal","comment":" The `trad-chinese-informal` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType tradChineseInformal\n\n","type":"Css.Value.Value { provides | tradChineseInformal : Css.Value.Supported }"},{"name":"traditional","comment":" Sets the [`traditional`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian).\n\nThis specifies that no particular standard should be used for East Asian logographic glyphs\napart from them being traditional Chinese glyphs.\n\n fontVariantEastAsian traditional\n\n","type":"Css.Value.Value { provides | traditional : Css.Value.Supported }"},{"name":"transform","comment":" The [`transform`](https://css-tricks.com/almanac/properties/t/transform/) property.\n\n transform <| matrix 1.0 2.0 3.0 4.0 5.0 6.0\n transform <| matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1\n transform <| translate (px 12)\n transform <| translate2 (px 12) (pct 50)\n transform <| translateX (em 2)\n transform <| translateY (inch 3)\n transform <| translateZ (px 2)\n transform <| translate3d (px 12) (pct 50) (em 3)\n transform <| scale_ 2\n transform <| scale2_ 2 0.5\n transform <| scaleX 2\n transform <| scaleY 0.5\n transform <| scaleZ 0.3\n transform <| scale3d 2.5 1.2 0.3\n transform <| skew (deg 20)\n transform <| skew2 (deg 30)\n transform <| skewX (deg 30)\n transform <| skewY (rad 1.07)\n transform <| rotate_ (turn 0.5)\n transform <| rotateX (deg 10)\n transform <| rotateY (deg 10)\n transform <| rotateZ (deg 10)\n transform <| rotate3d 1 2.0 3.0 (deg 10)\n transform <| perspective_ (px 17)\n\n","type":"Css.BaseValue (Css.TransformFunctionSupported { none : Css.Value.Supported }) -> Css.Style"},{"name":"transformBox","comment":" Sets the [`transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box) property.\n\n transformBox contentBox\n\n transformBox fillBox\n","type":"Css.BaseValue { contentBox : Css.Value.Supported, borderBox : Css.Value.Supported, fillBox : Css.Value.Supported, strokeBox : Css.Value.Supported, viewBox : Css.Value.Supported } -> Css.Style"},{"name":"transformMany","comment":" Sets [`transform`](https://css-tricks.com/almanac/properties/t/transform/)\nwith a series of transform-functions.\n\nIf you give an empty list, the value will be `unset`. This is to make it impossible for it\nto have no values in the output.\n\n transformMany [ translate (px 12), scale_ 2, skew (deg 20) ]\n\n transformMany [] -- transform: unset;\n\n","type":"List.List (Css.Value.Value Css.TransformFunction) -> Css.Style"},{"name":"transformOrigin","comment":" Sets [`transform-origin`](https://css-tricks.com/almanac/properties/t/transform-origin/).\n\nThis is the 1-argument variant, which lets you set certain\nkeywords and single lengths or percentages.\n\n transformOrigin top_\n\n transformOrigin center\n\n transformOrigin bottom\n\n transformOrigin (px 30)\n\n transformOrigin (pct 50)\n\n transformOrigin2 left_ top_\n\n transformOrigin2 right_ center \n\n transformOrigin2 right_ bottom_\n\n transformOrigin2 (pct 50) (pct 50)\n\n transformOrigin3 (pct 10) (px 2) (px 10)\n\n transformOrigin3 left_ (px 5) (px -4)\n\n transformOrigin3 right_ bottom_ (rem 2)\n\n","type":"Css.BaseValue (Css.LengthSupported { top_ : Css.Value.Supported, center : Css.Value.Supported, bottom_ : Css.Value.Supported, left_ : Css.Value.Supported, right_ : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"transformOrigin2","comment":" Sets [`transform-origin`](https://css-tricks.com/almanac/properties/t/transform-origin/).\n\nThis 2-argument variant lets you set x and y offsets in a single declaration.\n\n\n transformOrigin2 left_ top_\n\n transformOrigin2 right_ center \n\n transformOrigin2 right_ bottom_\n\n transformOrigin2 (pct 50) (pct 50)\n\n","type":"Css.Value.Value (Css.LengthSupported { left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"transformOrigin3","comment":" Sets [`transform-origin`](https://css-tricks.com/almanac/properties/t/transform-origin/).\n\nThis 3-argument variant lets you set x, y and z offsets in a single declaration.\n\n transformOrigin3 (pct 10) (px 2) (px 10)\n\n transformOrigin3 left_ (px 5) (px -4)\n\n transformOrigin3 right_ bottom_ (rem 2)\n\n\n","type":"Css.Value.Value (Css.LengthSupported { left_ : Css.Value.Supported, right_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, center : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Value.Value Css.Length -> Css.Style"},{"name":"transformStyle","comment":" Sets the [`transform-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style) property.\n\n transformStyle flat\n\n transformStyle inherit\n","type":"Css.BaseValue { flat : Css.Value.Supported, preserve3d : Css.Value.Supported } -> Css.Style"},{"name":"translate","comment":" Sets `translate` value for usage with [`transform`](#transform).\n\n transform (translate (px 10))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | translate : Css.Value.Supported }"},{"name":"translate2","comment":" Sets `translate` value for usage with [`transform`](#transform).\n\n transform (translate (px 10) (px 20))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | translate2 : Css.Value.Supported }"},{"name":"translate3d","comment":" Sets `translate3d` value for usage with [`transform`](#transform).\n\n transform (translate3d (px 12) (pct 50) (em 3))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value Css.Length -> Css.Value.Value { provides | translate3d : Css.Value.Supported }"},{"name":"translateX","comment":" Sets `translateX` value for usage with [`transform`](#transform).\n\n transform (translateX (px 10))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | translateX : Css.Value.Supported }"},{"name":"translateY","comment":" Sets `translateY` value for usage with [`transform`](#transform).\n\n transform (translateY (px 10))\n\n","type":"Css.Value.Value (Css.LengthSupported { pct : Css.Value.Supported }) -> Css.Value.Value { provides | translateY : Css.Value.Supported }"},{"name":"translateZ","comment":" Sets `translateZ` value for usage with [`transform`](#transform).\n\n transform (translateZ (px 10))\n\n","type":"Css.Value.Value Css.Length -> Css.Value.Value { provides | translateZ : Css.Value.Supported }"},{"name":"transparent","comment":" Sets the `transparent` value for usage with [`textDecorationColor`](#textDecorationColor).\n\n textDecorationColor transparent\n\n","type":"Css.Value.Value { provides | transparent : Css.Value.Supported }"},{"name":"triangle","comment":" The `triangle` value used in [`textEmphasis`](#textEmphasis).\n\n textEmphasis triangle\n\n","type":"Css.Value.Value { provides | triangle : Css.Value.Supported }"},{"name":"turn","comment":" A [`turn` angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)\n\n turn 1 -- one full circle\n\n turn 0.25\n\n","type":"Basics.Float -> Css.Value.Value { provides | turn : Css.Value.Supported }"},{"name":"uiMonospace","comment":" The `ui-monospace` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily uiMonospace\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | uiMonospace : Css.Value.Supported }"},{"name":"uiRounded","comment":" The `ui-rounded` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily uiRounded\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | uiRounded : Css.Value.Supported }"},{"name":"uiSansSerif","comment":" The `ui-sans-serif` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily uiSansSerif\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | uiSansSerif : Css.Value.Supported }"},{"name":"uiSerif","comment":" The `ui-serif` [generic font family name](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values).\n\n fontFamily uiSerif\n\n fontFamilyMany [ \"New York\" ] uiSerif\n\nThis can be used with [`fontFamily`](#fontFamily) and [`fontFamilyMany`](#fontFamilyMany).\n\n","type":"Css.Value.Value { provides | uiSerif : Css.Value.Supported }"},{"name":"ultraCondensed","comment":" Sets `ultra-condensed` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay ultraCondensed\n\n","type":"Css.Value.Value { provides | ultraCondensed : Css.Value.Supported }"},{"name":"ultraExpanded","comment":" Sets `ultra-expanded` value for usage with [`fontStretch`](#fontStretch).\n\n fontDisplay ultraExpanded\n\n","type":"Css.Value.Value { provides | ultraExpanded : Css.Value.Supported }"},{"name":"under","comment":" A `under` value for the [`textUnderlinePosition`](#textUnderlinePosition) property and the [`textEmphasisPosition2`](#textEmphasisPosition2) property.\n\n textUnderlinePosition under\n\n textEmphasisPosition2 under left_\n\n","type":"Css.Value.Value { provides | under : Css.Value.Supported }"},{"name":"underline","comment":" The `underline` [`text-decoration-line`][text-decoration-line] value.\n\n textDecorationLine underline\n\n[text-decoration-line]: https://css-tricks.com/almanac/properties/t/text-decoration-line/#article-header-id-0\n\n","type":"Css.Value.Value { provides | underline : Css.Value.Supported }"},{"name":"unicase","comment":" The `unicase` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values).\n\n fontVariantCaps unicase\n\n","type":"Css.Value.Value { provides | unicase : Css.Value.Supported }"},{"name":"unicode","comment":" The `unicode` value used with [`fontVariantEmoji`](#fontVariantEmoji).\n\n fontVariantEmoji unicode\n","type":"Css.Value.Value { provides | unicode : Css.Value.Supported }"},{"name":"unicodeBidi","comment":" Sets [`unicode-bidi`](https://css-tricks.com/almanac/properties/u/unicode-bidi/)\n\n unicodeBidi normal\n\n unicodeBidi embed\n\n unicodeBidi isolate\n\n unicodeBidi bidiOverride\n\n unicodeBidi isolateOverride\n\n unicodeBidi plaintext\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, embed : Css.Value.Supported, isolate : Css.Value.Supported, bidiOverride : Css.Value.Supported, isolateOverride : Css.Value.Supported, plaintext : Css.Value.Supported } -> Css.Style"},{"name":"unsafe","comment":" The `unsafe` value used for properties such as [`alignContent2`](#alignContent2).\n\n alignContent2 unsafe center\n\n","type":"Css.Value.Value { provides | unsafe : Css.Value.Supported }"},{"name":"unset","comment":" The [`unset`](https://developer.mozilla.org/en-US/docs/Web/CSS/unset) value.\nAny CSS property can be set to this value.\n\n display unset\n\n borderStyle unset\n\n","type":"Css.Value.Value { provides | unset : Css.Value.Supported }"},{"name":"upperAlpha","comment":" The `upper-alpha` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType upperAlpha\n\n","type":"Css.Value.Value { provides | upperAlpha : Css.Value.Supported }"},{"name":"upperArmenian","comment":" The `upper-armenian` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType upperArmenian\n\n","type":"Css.Value.Value { provides | upperArmenian : Css.Value.Supported }"},{"name":"upperLatin","comment":" The `upper-latin` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType upperLatin\n\n","type":"Css.Value.Value { provides | upperLatin : Css.Value.Supported }"},{"name":"upperRoman","comment":" The `upper-roman` value used by properties such as [`listStyle`](#listStyle),\nand [`listStyleType`](#listStyleType)\n\n listStyleType upperRoman\n\n","type":"Css.Value.Value { provides | upperRoman : Css.Value.Supported }"},{"name":"uppercase","comment":" An `uppercase` value for the [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Syntax) property.\n\n textTransform uppercase\n\n","type":"Css.Value.Value { provides | uppercase : Css.Value.Supported }"},{"name":"upright","comment":" A `upright` value for the\n[`textOrientation`](#textOrientation) property.\n\n textOrientation upright\n\n","type":"Css.Value.Value { provides | upright : Css.Value.Supported }"},{"name":"url","comment":" The `url` value for the [`cursor`](#cursor),\n[`fill`](#fill),\n[`strokeImage`](#strokeImage),\nand [`backgroundImage`](#backgroundImage) properties.\n","type":"String.String -> Css.Value.Value { provides | url : Css.Value.Supported }"},{"name":"useGlyphOrientation","comment":" A `use-glyph-orientation` value for the\n[`textOrientation`](#textOrientation) property.\n\n textOrientation useGlyphOrientation\n\n","type":"Css.Value.Value { provides | useGlyphOrientation : Css.Value.Supported }"},{"name":"userSelect","comment":" Sets [`user-select`](https://css-tricks.com/almanac/properties/u/user-select/)\n\n userSelect none\n\n userSelect auto\n\n userSelect text\n\n userSelect contain_\n\n userSelect all_\n\n","type":"Css.BaseValue { none : Css.Value.Supported, auto : Css.Value.Supported, text : Css.Value.Supported, contain_ : Css.Value.Supported, all_ : Css.Value.Supported } -> Css.Style"},{"name":"valid","comment":" A [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n valid\n [ border3 (px 1) solid (rgb 0 255 0)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"vertical","comment":" The `vertical` value used by [`resize`](#resize).\n\n resize vertical\n\n","type":"Css.Value.Value { provides | vertical : Css.Value.Supported }"},{"name":"verticalAlign","comment":" Sets [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/).\n\n verticalAlign textBottom\n\n verticalAlign (em 1)\n\n","type":"Css.BaseValue (Css.LengthSupported { baseline : Css.Value.Supported, sub : Css.Value.Supported, super : Css.Value.Supported, textTop : Css.Value.Supported, textBottom : Css.Value.Supported, middle : Css.Value.Supported, top_ : Css.Value.Supported, bottom_ : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"verticalLr","comment":" Sets `vertical-lr` value for usage with [`writingMode`](#writingMode).\n\n writingMode verticalLr\n\n","type":"Css.Value.Value { provides | verticalLr : Css.Value.Supported }"},{"name":"verticalRl","comment":" Sets `vertical-rl` value for usage with [`writingMode`](#writingMode).\n\n writingMode verticalRl\n\n","type":"Css.Value.Value { provides | verticalRl : Css.Value.Supported }"},{"name":"verticalText","comment":" The `vertical-text` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | verticalText : Css.Value.Supported }"},{"name":"vh","comment":" [`vh`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (vh 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | vh : Css.Value.Supported }"},{"name":"viewBox","comment":" The `view-box` value used by [`transformBox`](#transformBox).\n\n transformBox viewBox\n","type":"Css.Value.Value { provides | viewBox : Css.Value.Supported }"},{"name":"visibility","comment":" Sets [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/)\n\n visibility visible\n visibility hidden\n visibility collapse\n\n","type":"Css.BaseValue { visible : Css.Value.Supported, hidden : Css.Value.Supported, collapse : Css.Value.Supported } -> Css.Style"},{"name":"visible","comment":" The `visible` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).\n\n visibility visible\n\n overflow visible\n\n pointerEvents visible\n\n","type":"Css.Value.Value { provides | visible : Css.Value.Supported }"},{"name":"visibleFill","comment":" The `visibleFill` value used by [`pointerEvents`](#pointerEvents).\n\n pointerEvents visibleFill\n\n","type":"Css.Value.Value { provides | visibleFill : Css.Value.Supported }"},{"name":"visiblePainted","comment":" The `visiblePainted` value used by [`pointerEvents`](#pointerEvents).\n\n pointerEvents visiblePainted\n\n","type":"Css.Value.Value { provides | visiblePainted : Css.Value.Supported }"},{"name":"visibleStroke","comment":" The `visibleStroke` value used by [`pointerEvents`](#pointerEvents).\n\n pointerEvents visibleStroke\n\n","type":"Css.Value.Value { provides | visibleStroke : Css.Value.Supported }"},{"name":"visited","comment":" A [`:visited`](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited)\n[pseudo-class](https://css-tricks.com/pseudo-class-selectors/).\n\n visited\n [ color (rgb 150 0 255)\n ]\n\n","type":"List.List Css.Style -> Css.Style"},{"name":"vmax","comment":" [`vmax`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (vmax 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | vmax : Css.Value.Supported }"},{"name":"vmin","comment":" [`vmin`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (vmin 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | vmin : Css.Value.Supported }"},{"name":"vw","comment":" [`vw`](https://css-tricks.com/the-lengths-of-css/) length units.\n\n borderWidth (vw 5)\n\n","type":"Basics.Float -> Css.Value.Value { provides | vw : Css.Value.Supported }"},{"name":"wResize","comment":" The `w-resize` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | wResize : Css.Value.Supported }"},{"name":"wait","comment":" The `wait` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | wait : Css.Value.Supported }"},{"name":"wavy","comment":" The `wavy` [`text-decoration-style`][text-decoration-style] value.\n\n textDecorationStyle wavy\n\n[text-decoration-style]: https://css-tricks.com/almanac/properties/t/text-decoration-style/#article-header-id-0\n\n","type":"Css.Value.Value { provides | wavy : Css.Value.Supported }"},{"name":"weight","comment":" The `weight` value for the [`fontSynthesis`](#fontSynthesis) property.\n\n fontSynthesis weight\n\n","type":"Css.Value.Value { provides | weight : Css.Value.Supported }"},{"name":"whiteSpace","comment":" Sets [`white-space`](https://css-tricks.com/almanac/properties/w/whitespace/)\n\n whiteSpace pre\n\n whiteSpace nowrap\n\n whiteSpace preWrap\n\n whiteSpace preLine\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, nowrap : Css.Value.Supported, pre : Css.Value.Supported, preWrap : Css.Value.Supported, preLine : Css.Value.Supported, breakSpaces : Css.Value.Supported } -> Css.Style"},{"name":"widows","comment":" Sets [`widows`](https://css-tricks.com/almanac/properties/w/widows/)\n**Note:** This function accepts only positive integers.\n\n widows (int 2)\n\n","type":"Css.BaseValue { int : Css.Value.Supported } -> Css.Style"},{"name":"width","comment":" The [`width`](https://css-tricks.com/almanac/properties/w/width/) property.\n\n width (px 150)\n\n width (em 1.5)\n\n width auto\n\n width minContent\n\n","type":"Css.BaseValue (Css.LengthSupported { pct : Css.Value.Supported, auto : Css.Value.Supported, maxContent : Css.Value.Supported, minContent : Css.Value.Supported, fitContent : Css.Value.Supported, fitContentTo : Css.Value.Supported }) -> Css.Style"},{"name":"wordBreak","comment":" Sets [`word-break`](https://css-tricks.com/almanac/properties/w/word-break/)\n\n**Note: `breakWord` has been depreciated.**\n\n wordBreak normal\n wordBreak breakAll\n wordBreak keepAll\n wordBreak breakWord\n\n","type":"Css.BaseValue { normal : Css.Value.Supported, breakAll : Css.Value.Supported, keepAll : Css.Value.Supported, breakWord : Css.Value.Supported } -> Css.Style"},{"name":"wordSpacing","comment":" Sets [`word-spacing`](https://css-tricks.com/almanac/properties/w/word-spacing/).\n\n wordSpacing normal\n\n wordSpacing zero\n\n wordSpacing (px 5)\n\n","type":"Css.BaseValue (Css.LengthSupported { normal : Css.Value.Supported, pct : Css.Value.Supported }) -> Css.Style"},{"name":"wrap","comment":" The `wrap` [`flex-wrap` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#Values).\n\n flexWrap wrap\n\n","type":"Css.Value.Value { provides | wrap : Css.Value.Supported }"},{"name":"wrapReverse","comment":" The `wrap-reverse` [`flex-wrap` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#Values).\n\n flexWrap wrapReverse\n\n","type":"Css.Value.Value { provides | wrapReverse : Css.Value.Supported }"},{"name":"writingMode","comment":" Sets [`writing-mode`](https://css-tricks.com/almanac/properties/w/writing-mode/).\n\n writingMode horizontalTb\n\n writingMode verticalRl\n\n writingMode verticalLr\n\n","type":"Css.BaseValue { horizontalTb : Css.Value.Supported, verticalRl : Css.Value.Supported, verticalLr : Css.Value.Supported } -> Css.Style"},{"name":"x","comment":" Sets `x` value for usage with [`scrollSnapType2`](#scrollSnapType2)\nand [`rotate2`](#rotate2).\n\n scrollSnapType2 x mandatory\n\n rotate x (deg 10)\n\n","type":"Css.Value.Value { provides | x : Css.Value.Supported }"},{"name":"xLarge","comment":" The `x-large` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize xLarge\n\n","type":"Css.Value.Value { provides | xLarge : Css.Value.Supported }"},{"name":"xSmall","comment":" The `x-small` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize xSmall\n\n","type":"Css.Value.Value { provides | xSmall : Css.Value.Supported }"},{"name":"xxLarge","comment":" The `xx-large` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize xxLarge\n\n","type":"Css.Value.Value { provides | xxLarge : Css.Value.Supported }"},{"name":"xxSmall","comment":" The `xx-small` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize xxSmall\n\n","type":"Css.Value.Value { provides | xxSmall : Css.Value.Supported }"},{"name":"xxxLarge","comment":" The `xxx-large` [`font-size` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values).\n\n fontSize xxxLarge\n\n","type":"Css.Value.Value { provides | xxxLarge : Css.Value.Supported }"},{"name":"y","comment":" Sets `y` value for usage with [`scrollSnapType2`](#scrollSnapType2)\nand [`rotate2`](#rotate2).\n\n scrollSnapType2 y mandatory\n\n rotate y (deg 50)\n\n","type":"Css.Value.Value { provides | y : Css.Value.Supported }"},{"name":"z","comment":" Sets `z` value for usage with [`rotate2`](#rotate2).\n\n rotate z (deg 100)\n\n","type":"Css.Value.Value { provides | z : Css.Value.Supported }"},{"name":"zIndex","comment":" Sets [`z-index`](https://css-tricks.com/almanac/properties/z/z-index/)\n\n zIndex (int 10)\n\n zIndex auto\n\n**NOTE:** Z-index is not as simple as it looks! Make sure to read about\n[stacking contexts](https://css-tricks.com/css-stacking-contexts/) \nif you're not already familiar with them.\n\n","type":"Css.BaseValue { int : Css.Value.Supported, auto : Css.Value.Supported } -> Css.Style"},{"name":"zero","comment":" Compiles to a `0` value with no units.\n\n css [ padding zero ]\n\n...compiles to:\n\n padding: 0;\n\nThis conveniently lets you avoid doing things like `padding (px 0)`\n\n","type":"Css.Value.Value { provides | zero : Css.Value.Supported }"},{"name":"zoomIn","comment":" The `zoom-in` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | zoomIn : Css.Value.Supported }"},{"name":"zoomOut","comment":" The `zoom-out` value for the [`cursor`](#cursor) property.\n","type":"Css.Value.Value { provides | zoomOut : Css.Value.Supported }"}],"binops":[]},{"name":"Css.Global","comment":" Apply global CSS to things like foreign DOM structures (e.g. generated\nfrom markdown) where you cannot add attributes.\n\nThis module relies on CSS selectors which are [globally scoped and\nbad for maintainability](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284),\nso definitely avoid using this module except when there is no reasonable way\ndo to it using `Style` instead!\n\n\n# Global Styles\n\n@docs global, Snippet\n\n\n# Statements\n\n@docs class, id, selector, everything, media, mediaQuery\n\n\n# Combinators\n\n@docs children, descendants, adjacentSiblings, generalSiblings, each, withAttribute, withClass\n\n\n# Basic elements\n\n@docs typeSelector, html, body\n\n\n# Content sectioning\n\n@docs article, header, footer, h1, h2, h3, h4, h5, h6, nav, menu, section, aside, time, details, summary\n\n\n# Text content\n\n@docs div, hr, li, main_, ol, p, ul, pre, dl, dt, dd, blockquote\n\n\n# Inline text semantics\n\n@docs a, code, small, span, strong, i, em, q\n\n\n# Image and multimedia\n\n@docs img, audio, video, canvas\n\n\n# Table content\n\n@docs caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr\n\n\n# Forms\n\n@docs button, fieldset, form, input, label, legend, optgroup, option, progress, select, textarea\n\n\n# SVG\n\n@docs svg, path, rect, circle, ellipse, line, polyline, polygon\n\n","unions":[],"aliases":[{"name":"Snippet","comment":" ","args":[],"type":"Css.Preprocess.Snippet"}],"values":[{"name":"a","comment":" Selector for an `` element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"adjacentSiblings","comment":" Apply styles in a list of snippets to the adjacent siblings of a selector\n\n typeSelector \"div\"\n [ adjacentSiblings\n [ typeSelector \"p\"\n [ fontSize (px 14)\n ]\n ]\n ]\n\nThe above code translates into the following CSS.\n\n```css\ndiv + p {\n font-size: 14px;\n}\n```\n\n","type":"List.List Css.Global.Snippet -> Css.Preprocess.Style"},{"name":"article","comment":" Selector for an article element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"aside","comment":" Selector for a [aside](https://developer.mozilla.org/en/docs/Web/HTML/Element/aside) element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"audio","comment":" Selector for an audio element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"blockquote","comment":" Selector for a blockquote element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"body","comment":" Selector for a body element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"button","comment":" Selector for a button element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"canvas","comment":" Selector for a canvas element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"caption","comment":" Selector for a caption element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"children","comment":" Apply styles in a list of snippets to the direct children of a selector\n\n typeSelector \"div\"\n [ children\n [ typeSelector \"p\"\n [ fontSize (px 14)\n ]\n ]\n ]\n\nThe above code translates into the following CSS.\n\n```css\ndiv > p {\n font-size: 14px;\n}\n```\n\n","type":"List.List Css.Global.Snippet -> Css.Preprocess.Style"},{"name":"circle","comment":" Selector for a circle element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"class","comment":" A [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors).\n\n global\n [ class \"login-form-button\"\n [ fontWeight normal\n , color (rgb 128 64 32)\n ]\n ]\n\n","type":"String.String -> List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"code","comment":" Selector for a code element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"col","comment":" Selector for a col element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"colgroup","comment":" Selector for a colgroup element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"dd","comment":" Selector for a dd element.\n\n \n\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"descendants","comment":" Apply styles in a list of snippets to the descendants of a selector\n\n typeSelector \"div\"\n [ descendants\n [ typeSelector \"p\"\n [ fontSize (px 14)\n ]\n ]\n ]\n\nThe above code translates into the following CSS.\n\n```css\ndiv p {\n font-size: 14px;\n}\n```\n\n","type":"List.List Css.Global.Snippet -> Css.Preprocess.Style"},{"name":"details","comment":" Selector for a details element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"div","comment":" Selector for a div element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"dl","comment":" Selector for a dl element.\n\n \n\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"dt","comment":" Selector for a dt element.\n\n \n\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"each","comment":" Apply a list of styles to multiple selectors\n\n each [ typeSelector \"div\", typeSelector \"p\" ]\n [ fontSize (px 14)\n ]\n\nThe above code translates into the following CSS.\n\n```css\ndiv {\n font-size: 14px;\n}\n\np {\n font-size: 14px;\n}\n```\n\n","type":"List.List (List.List Css.Preprocess.Style -> Css.Global.Snippet) -> List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"ellipse","comment":" Selector for a ellipse element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"em","comment":" Selector for a em element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"everything","comment":" A [`*` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors).\n\n class \"Foo\"\n [ children\n [ everything\n [ color (rgb 14 15 16)\n , borderRadius (px 5)\n ]\n ]\n ]\n\n...compiles to:\n\n .Foo > * {\n color: rgb(14, 15, 16);\n border-radius: 5px;\n }\n\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"fieldset","comment":" Selector for a fieldset element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"footer","comment":" Selector for a footer element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"form","comment":" Selector for a form element.\n","type":"List.List Css.Preprocess.Style -> Css.Global.Snippet"},{"name":"generalSiblings","comment":" Apply styles in a list of snippets to the general siblings of a selector\n\n typeSelector \"div\"\n [ generalSiblings\n [ typeSelector \"p\"\n [ fontSize (px 14)\n ]\n ]\n ]\n\nThe above code translates into the following CSS.\n\n```css\ndiv ~ p {\n font-size: 14px;\n}\n```\n\n","type":"List.List Css.Global.Snippet -> Css.Preprocess.Style"},{"name":"global","comment":" Add global styles to the page. This compiles directly to a `