{"version":3,"file":"styles.css","mappings":"AA2cA,gBACA,4BACA,0BACA,4DACA,gDACA,0DACA,sDAkCA,kBA9BA,mBAYA,mCACA,YACA,mCAEA,0EAGA,CAlBA,sBAEA,iCAiBA,eArBA,oBAOA,+BADA,2BAEA,6BAHA,+BAIA,qCANA,YAaA,aAjBA,kBAYA,sFADA,qCAoBA,0BARA,mJAMA,CACA,0CAjBA,qBAsJA,CAjIA,mFAEA,eACA,CAEA,mFAEA,0CACA,CAEA,mFAEA,uCACA,CAEA,+BACA,mDACA,CAEA,+BACA,iBAEA,YACA,4BAUA,CARA,iCACA,eACA,CAEA,8CAEA,UADA,UAEA,CAGA,+BACA,iBAEA,YACA,6BAUA,CARA,iCACA,gBACA,CAEA,8CAEA,UADA,UAEA,CAGA,+BACA,iBAEA,YACA,4BAUA,CARA,iCACA,eACA,CAEA,8CAEA,UADA,UAEA,CAGA,iCACA,aACA,CAEA,+BACA,UACA,CAEA,+BACA,sBACA,CAEA,+BACA,sBACA,sBAKA,CAHA,iCACA,eACA,CAGA,+BACA,2BACA,6BACA,CAEA,yBACA,mBACA,UACA,CAEA,sBACA,2FAGA,CAEA,qCAQA,oCACA,8DACA,sFAGA,CAZA,wDAGA,wDADA,kDAEA,qDAHA,wDAKA,gJADA,gEAQA,CAEA,sCACA,oCACA,CAEA,+BAEA,sBACA,SACA,CAGA,gBAOA,mBAEA,yBALA,WAEA,aAEA,uBAHA,SAJA,kBAEA,UADA,OAQA,CAGA,8DAEA,uBACA,wBACA,sBACA,CAEA,+CACA,2BACA,CAEA,+BACA,iEACA,kFACA,CAEA,+BACA,+DACA,kGAGA,CAEA,+BACA,sBACA,wBACA,uBACA,yBACA,8BACA,CAEA,8DAGA,yBADA,uBAUA,CAPA,8FACA,uBACA,CAEA,wGACA,+CACA,CAGA,gBACA,aAEA,mCADA,2CAEA,CAEA,gCACA,YACA,CAEA,gBACA,qBAEA,WADA,kCAEA,CAEA,gBAGA,qBACA,4BAFA,oBAWA,0BALA,8BAIA,gBADA,8BAGA,uBATA,kEAeA,CAHA,kBACA,qBACA,CAGA,gCACA,oBACA,CAEA,+CACA,eACA,CAEA,+CACA,gBACA","sources":["webpack://@square/maker/./src/components/Button/src/Button.vue"],"sourcesContent":["<template>\n\t<component\n\t\t:is=\"tag\"\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t$s[`variant_${resolvedVariant}`],\n\t\t\t$s[`size_${adjustedSize}`],\n\t\t\t$s[`shape_${resolvedShape}`],\n\t\t\t$s[`align_${resolvedAlign}`],\n\t\t\t{\n\t\t\t\t[$s.fullWidth]: resolvedFullWidth,\n\t\t\t\t[$s.iconButton]: isSingleChild() && !resolvedFullWidth,\n\t\t\t\t[$s.loading]: loading,\n\t\t\t},\n\t\t]\"\n\t\t:type=\"type\"\n\t\t:disabled=\"isDisabled\"\n\t\t:style=\"style\"\n\t\t:role=\"tag === 'a' ? 'button' : undefined\"\n\t\t:aria-disabled=\"isDisabled ? 'true' : undefined\"\n\t\t:aria-label=\"ariaLabel\"\n\t\t:aria-pressed=\"pressed !== undefined ? String(pressed) : undefined\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-loading\n\t\t\tv-if=\"loading\"\n\t\t\t:class=\"$s.Loading\"\n\t\t/>\n\t\t<span\n\t\t\t:class=\"[\n\t\t\t\t$s.MainText,\n\t\t\t\t{\n\t\t\t\t\t[$s.TruncateText]: !isSingleChild(),\n\t\t\t\t}\n\t\t\t]\"\n\t\t>\n\t\t\t<!-- @slot Button label -->\n\t\t\t<slot />\n\t\t</span>\n\n\t\t<span\n\t\t\tv-if=\"$scopedSlots.information\"\n\t\t\t:class=\"[$s.InformationText, $s.TruncateText]\"\n\t\t>\n\t\t\t<!-- @slot Information label -->\n\t\t\t<slot\n\t\t\t\tname=\"information\"\n\t\t\t/>\n\t\t</span>\n\t</component>\n</template>\n\n<script>\nimport { kebabCase } from 'lodash';\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { colord } from 'colord';\nimport { getContrast } from '@square/maker/utils/get-contrast';\nimport { BASE_TEN } from '@square/maker/utils/constants';\nimport { MLoading } from '@square/maker/components/Loading';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\n\nfunction setColorVariables(tokens, variant) {\n\tconst colorMain = colord(tokens.color);\n\tconst colorMainHover = tokens.colorHover ? colord(tokens.colorHover) : colorMain;\n\tconst colorContrast = tokens.textColor || getContrast(tokens.color, tokens.textColor);\n\tconst colorContrastHover = !tokens.textColorHover && tokens.colorHover\n\t\t? getContrast(tokens.colorHover, tokens.textColor)\n\t\t: tokens.textColorHover;\n\n\t// Determine state adjustment type\n\tlet stateAdjustment;\n\tif (variant === 'fill') {\n\t\tstateAdjustment = colorMainHover.isDark() ? 'lighten' : 'darken';\n\t} else {\n\t\tstateAdjustment = 'alpha';\n\t}\n\t// Define each state adjustment and generated color\n\tconst hoverStateAdjust = 0.08;\n\tconst activeStateAdjust = 0.16;\n\tconst focusAlphaAdjust = 0.3;\n\tconst colorHover = tokens.colorHover && variant === 'fill'\n\t\t? tokens.colorHover : colorMainHover[stateAdjustment](hoverStateAdjust).toHex();\n\tconst colorActive = colorMainHover[stateAdjustment](activeStateAdjust).toHex();\n\tconst colorFocus = colorMainHover.alpha(focusAlphaAdjust).toHex();\n\n\treturn {\n\t\t'--color-main': tokens.color,\n\t\t'--color-main-hover': tokens.colorHover,\n\t\t'--color-contrast': colorContrast,\n\t\t'--color-contrast-hover': colorContrastHover,\n\t\t'--color-hover': colorHover,\n\t\t'--color-active': colorActive,\n\t\t'--color-focus': colorFocus,\n\t\t'--border-radius': tokens.borderRadius,\n\t\t'--border-radius-hover': tokens.borderRadiusHover || tokens.borderRadius,\n\t\t'--border-width': tokens.borderWidth,\n\t\t'--border-width-hover': tokens.borderWidthHover || tokens.borderWidth,\n\t\t'--border-color': tokens.borderColor,\n\t\t'--border-color-hover': tokens.borderColorHover || tokens.borderColor,\n\t\t'--box-shadow': tokens.boxShadow,\n\t\t'--box-shadow-hover': tokens.boxShadowHover || tokens.boxShadow,\n\t};\n}\n\nconst TEXT_STYLES = new Set([\n\t'fontFamily',\n\t'fontWeight',\n\t'fontSize',\n\t'fontStyle',\n\t'textTransform',\n\t'textDecoration',\n\t'letterSpacing',\n]);\n\nfunction isValidCss(style, value) {\n\tif (global.CSS) {\n\t\treturn global.CSS.supports(style, value);\n\t}\n\treturn true;\n}\n\nfunction formatCssStyles(theme, styles, suffix) {\n\tconst formattedStyles = {};\n\tfor (const [style, value] of Object.entries(styles)) {\n\t\tconst cssStyle = kebabCase(style);\n\t\tif (TEXT_STYLES.has(style) && isValidCss(cssStyle, value)) {\n\t\t\tformattedStyles[`--${cssStyle}${suffix}`] = theme.resolve(value);\n\t\t}\n\t}\n\treturn formattedStyles;\n}\n\n/**\n * Button component\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {\n\tcomponents: {\n\t\tMLoading,\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * patterns are defined at the theme level\n\t\t */\n\t\tpattern: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (variant) => ['fill', 'outline', 'ghost'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * Size of the button\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (size) => ['small', 'medium', 'large'].includes(size),\n\t\t},\n\t\t/**\n\t\t * Main color of button\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Text color of button (only applied on fill buttons)\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Shape of preset button (overridden by borderRadius prop)\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * Whether to make the button full-width\n\t\t */\n\t\tfullWidth: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * How to align button's contents\n\t\t */\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (align) => ['center', 'stack', 'space-between'].includes(align),\n\t\t},\n\t\t/**\n\t\t * Tag of button\n\t\t */\n\t\ttag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (tag) => ['button', 'a'].includes(tag),\n\t\t},\n\t\t/**\n\t\t * Type of the button\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t},\n\t\t/**\n\t\t * Toggles button disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles button loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Text pattern in button label\n\t\t * @advanced\n\t\t */\n\t\ttextPattern: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Text hover pattern in button label\n\t\t * @advanced\n\t\t */\n\t\ttextPatternHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Main hover color of button\n\t\t * @advanced\n\t\t */\n\t\tcolorHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Text hover color of button (only applied on fill buttons)\n\t\t * @advanced\n\t\t */\n\t\ttextColorHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * button's border radius\n\t\t * @advanced\n\t\t */\n\t\tborderRadius: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('border-radius'),\n\t\t},\n\t\t/**\n\t\t * button's border radius when hovered\n\t\t * @advanced\n\t\t */\n\t\tborderRadiusHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('border-radius'),\n\t\t},\n\t\t/**\n\t\t * Border width of button (e.g. '3px')\n\t\t * @advanced\n\t\t */\n\t\tborderWidth: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('border-width'),\n\t\t},\n\t\t/**\n\t\t * Border hover width of button (e.g. '3px')\n\t\t * @advanced\n\t\t */\n\t\tborderWidthHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('border-width'),\n\t\t},\n\t\t/**\n\t\t * Border color of button (only applied on fill buttons)\n\t\t * @advanced\n\t\t */\n\t\tborderColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Border hover color of button (only applied on fill buttons)\n\t\t * @advanced\n\t\t */\n\t\tborderColorHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Box-shadow of button\n\t\t * @advanced\n\t\t */\n\t\tboxShadow: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('box-shadow'),\n\t\t},\n\t\t/**\n\t\t * Box-shadow hover of button\n\t\t * @advanced\n\t\t */\n\t\tboxShadowHover: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('box-shadow'),\n\t\t},\n\t\t/**\n\t\t * Accessible label for the button when no visible text.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Indicates the pressed state for toggle buttons.\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('button', [\n\t\t\t'color',\n\t\t\t'colorHover',\n\t\t\t'size',\n\t\t\t'textColor',\n\t\t\t'textColorHover',\n\t\t\t'textPattern',\n\t\t\t'textPatternHover',\n\t\t\t'variant',\n\t\t\t'shape',\n\t\t\t'borderRadius',\n\t\t\t'borderRadiusHover',\n\t\t\t'align',\n\t\t\t'fullWidth',\n\t\t\t'pattern',\n\t\t\t'borderWidth',\n\t\t\t'borderWidthHover',\n\t\t\t'borderColor',\n\t\t\t'borderColorHover',\n\t\t\t'boxShadow',\n\t\t\t'boxShadowHover',\n\t\t]),\n\t\tstyle() {\n\t\t\tconst tokens = {\n\t\t\t\tcolor: this.resolvedColor,\n\t\t\t\tcolorHover: this.resolvedColorHover,\n\t\t\t\ttextColor: this.resolvedTextColor,\n\t\t\t\ttextColorHover: this.resolvedTextColorHover,\n\t\t\t\tborderRadius: this.resolvedBorderRadius,\n\t\t\t\tborderRadiusHover: this.resolvedBorderRadiusHover,\n\t\t\t\tborderWidth: this.resolvedBorderWidth,\n\t\t\t\tborderWidthHover: this.resolvedBorderWidthHover,\n\t\t\t\tborderColor: this.resolvedBorderColor,\n\t\t\t\tborderColorHover: this.resolvedBorderColorHover,\n\t\t\t\tboxShadow: this.resolvedBoxShadow,\n\t\t\t\tboxShadowHover: this.resolvedBoxShadowHover,\n\t\t\t};\n\n\t\t\tconst { resolvedTextPattern, resolvedTextPatternHover, theme } = this;\n\t\t\tconst textPattern = theme?.text?.patterns?.[resolvedTextPattern] || {};\n\t\t\tconst textPatternHover = theme.text.patterns?.[resolvedTextPatternHover] || {};\n\t\t\tconst textPatternStyles = formatCssStyles(theme, textPattern, '');\n\t\t\tconst textPatternHoverStyles = formatCssStyles(theme, textPatternHover, '-hover');\n\n\t\t\treturn {\n\t\t\t\t...setColorVariables(tokens, this.resolvedVariant),\n\t\t\t\t...textPatternStyles,\n\t\t\t\t...textPatternHoverStyles,\n\t\t\t};\n\t\t},\n\t\tisDisabled() {\n\t\t\treturn this.disabled || this.loading;\n\t\t},\n\t\tfontSize() {\n\t\t\treturn this.theme.text.patterns[this.resolvedTextPattern]?.fontSize;\n\t\t},\n\t\tadjustedSize() {\n\t\t\t// Scale button size to fontSize if one is set\n\t\t\tconst fontSizeInt = Number.parseInt(this.fontSize, BASE_TEN);\n\t\t\tif (fontSizeInt) {\n\t\t\t\tconst SMALL_MAX = 14;\n\t\t\t\tconst MEDIUM_MAX = 24;\n\t\t\t\tif (fontSizeInt > MEDIUM_MAX) {\n\t\t\t\t\treturn 'large';\n\t\t\t\t}\n\t\t\t\tif (fontSizeInt > SMALL_MAX) {\n\t\t\t\t\treturn 'medium';\n\t\t\t\t}\n\t\t\t\treturn 'small';\n\t\t\t}\n\t\t\treturn this.resolvedSize;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tisSingleChild() {\n\t\t\tif (this.$scopedSlots.information) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst empty = 0;\n\t\t\tconst children = (this.$slots.default || []).filter(\n\t\t\t\t(vnode) => vnode.tag || vnode.text.trim().length > empty,\n\t\t\t);\n\t\t\tconst firstChildIndex = 0;\n\t\t\tconst singleChild = 1;\n\t\t\treturn children.length === singleChild && children[firstChildIndex].tag;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\t--radius-rounded-button: 8px;\n\t--radius-pill-button: 32px;\n\t--border-radius: $maker-shape-button-border-radius;\n\t--color-main: $maker-color-primary;\n\t--font-family: $maker-font-label-font-family;\n\t--font-weight: $maker-font-label-font-weight;\n\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tmin-width: 0;\n\tcolor: var(--color-contrast, #fff);\n\tfont-weight: var(--font-weight);\n\tfont-size: var(--font-size);\n\tfont-family: var(--font-family);\n\tfont-style: var(--font-style);\n\tletter-spacing: var(--letter-spacing);\n\ttext-transform: var(--text-transform);\n\ttext-decoration: var(--text-decoration);\n\tvertical-align: middle;\n\tbackground-color: var(--color-main);\n\tborder: none;\n\tborder-radius: var(--border-radius);\n\toutline: none;\n\tbox-shadow:\n\t\tvar(--border, 0 0),\n\t\tvar(--box-shadow, 0 0),\n\t\tvar(--focus-border, 0 0);\n\tcursor: pointer;\n\ttransition:\n\t\tcolor 0.2s ease-in,\n\t\tbackground-color 0.2s ease-in,\n\t\tfilter 0.2s ease-in,\n\t\tbox-shadow 0.2s ease-in,\n\t\tborder-radius 0.2s ease-in,\n\t\tfont-size 0.2s ease-in;\n\tuser-select: none;\n\ttouch-action: manipulation;\n\tfill: currentColor;\n\n\t&.shape_squared,\n\t&.shape_squared:hover:not(:disabled) {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded,\n\t&.shape_rounded:hover:not(:disabled) {\n\t\tborder-radius: var(--radius-rounded-button);\n\t}\n\n\t&.shape_pill,\n\t&.shape_pill:hover:not(:disabled) {\n\t\tborder-radius: var(--radius-pill-button);\n\t}\n\n\t&.iconButton {\n\t\tmin-width: max-content;\n\t}\n\n\t&.size_small {\n\t\t--font-size: 12px;\n\n\t\theight: 32px;\n\t\tpadding: var(--small-padding);\n\n\t\t& > * {\n\t\t\tline-height: 1.4;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\twidth: 32px;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&.size_medium {\n\t\t--font-size: 14px;\n\n\t\theight: 48px;\n\t\tpadding: var(--medium-padding);\n\n\t\t& > * {\n\t\t\tline-height: 1.77;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\twidth: 48px;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&.size_large {\n\t\t--font-size: 16px;\n\n\t\theight: 64px;\n\t\tpadding: var(--large-padding);\n\n\t\t& > * {\n\t\t\tline-height: 1.5;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\twidth: 64px;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&.iconButton > * {\n\t\tline-height: 0;\n\t}\n\n\t&.fullWidth {\n\t\twidth: 100%;\n\t}\n\n\t&.align_center {\n\t\tjustify-content: center;\n\t}\n\n\t&.align_stack {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\n\t\t& > * {\n\t\t\tline-height: 1.1;\n\t\t}\n\t}\n\n\t&.align_space-between {\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 1px $maker-color-neutral-20,\n\t\t\t0 0 0 3px var(--color-focus);\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tcolor: var(--color-contrast-hover, var(--color-contrast));\n\t\tfont-weight: var(--font-weight-hover, var(--font-weight));\n\t\tfont-size: var(--font-size-hover, var(--font-size));\n\t\tfont-family: var(--font-family-hover, var(--font-family));\n\t\tfont-style: var(--font-style-hover, var(--font-style));\n\t\ttext-transform: var(--text-transform-hover, var(--text-transform));\n\t\ttext-decoration: var(--text-decoration-hover, var(--text-decoration));\n\t\tbackground-color: var(--color-hover);\n\t\tborder-radius: var(--border-radius-hover, var(--border-radius));\n\t\tbox-shadow:\n\t\t\tvar(--border-hover, 0 0),\n\t\t\tvar(--box-shadow-hover, 0 0),\n\t\t\tvar(--focus-border, 0 0);\n\t}\n\n\t&:active:not(:disabled) {\n\t\tbackground-color: var(--color-active);\n\t}\n\n\t&.loading {\n\t\t/* don't inherit color in loading state on hover/active */\n\t\tcolor: transparent !important;\n\t\topacity: 1;\n\t}\n}\n\n.Loading {\n\tposition: absolute;\n\ttop: 4px;\n\tright: 4px;\n\tbottom: 4px;\n\tleft: 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: transparent;\n}\n\n/* Variants */\n.Button.variant_fill,\n.Button.variant_outline {\n\t--small-padding: 0 16px;\n\t--medium-padding: 0 24px;\n\t--large-padding: 0 32px;\n}\n\n.Button.variant_fill .Loading {\n\tcolor: var(--color-contrast);\n}\n\n.Button.variant_fill {\n\t--border: inset 0 0 0 var(--border-width, 1px) var(--border-color);\n\t--border-hover: inset 0 0 0 var(--border-width-hover, 1px) var(--border-color-hover);\n}\n\n.Button.variant_outline {\n\t--border: inset 0 0 0 var(--border-width, 1px) var(--color-main);\n\t--border-hover:\n\t\tinset 0 0 0 var(--border-width-hover, 1px)\n\t\tvar(--color-main-hover, var(--color-main));\n}\n\n.Button.variant_ghost {\n\t--small-padding: 0 8px;\n\t--medium-padding: 0 12px;\n\t--large-padding: 0 20px;\n\t--box-shadow: 0 !important;\n\t--box-shadow-hover: 0 !important;\n}\n\n.Button.variant_outline,\n.Button.variant_ghost {\n\tcolor: var(--color-main);\n\tbackground-color: transparent;\n\n\t& .Loading {\n\t\tcolor: var(--color-main);\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tcolor: var(--color-main-hover, var(--color-main));\n\t}\n}\n\n.MainText {\n\tgap: 8px;\n\twidth: max-content;\n\tpadding-left: var(--letter-spacing);\n}\n\n.iconButton .MainText {\n\tdisplay: flex;\n}\n\n.InformationText {\n\tflex: 0 0 fit-content;\n\tpadding-left: var(--letter-spacing);\n\topacity: 0.6;\n}\n\n.TruncateText {\n\t/* -webkit-box is supported by all modern browsers */\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n\twidth: fit-content;\n\n\t/* cancels out padding-bottom below */\n\tmargin-bottom: -0.5em !important;\n\n\t/* https://stackoverflow.com/a/64039674/2766908 */\n\tpadding-bottom: 0.5em !important;\n\toverflow: hidden;\n\tline-height: 1.1 !important;\n\ttext-overflow: ellipsis;\n\n\t/* stylelint-disable-next-line no-descending-specificity */\n\t& > * {\n\t\tvertical-align: bottom;\n\t}\n}\n\n.align_stack .TruncateText {\n\t-webkit-line-clamp: 1;\n}\n\n.Button.align_center .InformationText {\n\tmargin-left: 8px;\n}\n\n.Button.align_space-between .InformationText {\n\tmargin-right: 8px;\n}\n</style>\n"],"names":[],"sourceRoot":""}