@square/maker/components/ActionBar/styles.css.map

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/ActionBar/src/TransitionActionBarItems.vue","webpack://../components/ActionBar/src/AtomicActionBar.vue","webpack://../components/ActionBar/src/ActionBarLayer.vue","webpack://../components/ActionBar/src/ActionBarButton.vue","webpack://../components/ActionBar/src/InlineActionBar.vue"],"names":[],"mappings":"AA8EA,mBACA,0JAMA,CC3CA,mBACA,6BAAA,CACA,yCAAA,CACA,uDAAA,CACA,wIAKA,CAEA,YAAA,CACA,6BAAA,CACA,qBAAA,CACA,mDAAA,CACA,mBACA,CAEA,oCACA,mBACA,YACA,CACA,CAEA,oCACA,mBACA,YACA,CAEA,mBACA,oDACA,CACA,CAEA,qCACA,mBACA,YACA,CACA,CAEA,mBACA,UACA,CAEA,mBACA,iBAAA,CACA,SAAA,CACA,UACA,CAEA,mBACA,iBAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CACA,SACA,CAEA,mBACA,cAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CACA,SACA,CAEA,mBACA,gBAAA,CACA,uBAAA,CACA,8CAAA,CACA,mBAKA,CAHA,8BACA,cACA,CClCA,mBACA,6BAAA,CACA,yCAAA,CACA,uDAAA,CACA,2IAKA,CACA,qBAAA,CACA,4BAAA,CAEA,2GAUA,CAHA,qCACA,gBACA,CAGA,oCACA,mBACA,gBACA,CACA,CC6EA,mBACA,oBAAA,CACA,uBAAA,CACA,qBAAA,CACA,yBAAA,CAEA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,2BAAA,CACA,+BAAA,CACA,uBAAA,CACA,eAAA,CACA,iCAAA,CACA,mBAAA,CACA,qBAAA,CACA,kCAAA,CACA,WAAA,CACA,kBAAA,CACA,YAAA,CACA,4DAEA,CACA,cAAA,CACA,yDAEA,CACA,wBAAA,CAAA,gBAAA,CACA,yBAAA,CACA,iBAgFA,CA9EA,qBACA,qCACA,CAEA,qCACA,mBAAA,CACA,aAAA,CACA,kBAAA,CACA,0BAAA,CACA,2BAAA,CACA,SACA,CA3CA,mBA6CA,uCAiEA,CA/DA,uCACA,aACA,CAEA,qCACA,UACA,CAEA,qCACA,sBACA,CAEA,qCACA,qBAAA,CACA,4BAAA,CACA,eAAA,CACA,kBACA,CAEA,qCACA,0BAAA,CACA,6BACA,CAEA,qCACA,eACA,CAEA,qCACA,iBACA,CAEA,qCACA,kBACA,CAEA,4BACA,WAKA,CAHA,8BACA,UACA,CAGA,yBACA,0DAGA,CAEA,0BACA,sDACA,CAEA,qBACA,yBACA,qDACA,CACA,CAEA,qCACA,iBACA,CAGA,mBACA,iBAAA,CACA,OAAA,CACA,SAAA,CACA,UAAA,CACA,QAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,uBAAA,CACA,wBAAA,CACA,kBACA,CAEA,mBACA,YAAA,CACA,yBAAA,CAAA,iBACA,CAEA,sCACA,YACA,CAEA,mBACA,yBAAA,CAAA,iBAAA,CACA,UACA,CAEA,sCACA,cACA,CAEA,mBACA,cAAA,CACA,eAAA,CACA,aAAA,CACA,kBAAA,CACA,sBACA,CAEA,wDACA,eACA,CAEA,wDACA,gBACA,CC5TA,mBACA,6BAAA,CACA,yCAAA,CACA,uDAAA,CACA,2IAKA,CACA,qBAAA,CACA,4BAAA,CAEA,2GAMA,CAEA,oCACA,mBACA,qBAAA,CACA,4BAAA,CAGA,wDACA,CACA","file":"styles.css","sourcesContent":["<template>\n\t<transition-group\n\t\tv-bind=\"$attrs\"\n\n\t\t:enter-active-class=\"$s.transitioning\"\n\t\t:leave-active-class=\"$s.transitioning\"\n\n\t\t@before-enter=\"zeroWidth\"\n\t\t@enter=\"setContentWidth($event, 'enter')\"\n\t\t@after-enter=\"removeWidth\"\n\n\t\t@before-leave=\"setContentWidth($event, 'leave')\"\n\t\t@leave=\"onLeave\"\n\t\t@after-leave=\"removeWidth\"\n\t>\n\t\t<slot />\n\t</transition-group>\n</template>\n\n<script>\n/* eslint-disable unicorn/no-null */\n\nfunction getElementRealWidth(element) {\n\tconst elc = element.cloneNode(true);\n\telc.removeAttribute('style');\n\tObject.assign(elc.style, {\n\t\tposition: 'absolute',\n\t\tvisibility: 'hidden',\n\t});\n\telement.parentNode.insertBefore(elc, element);\n\tconst realWidth = elc.offsetWidth;\n\telc.remove();\n\treturn realWidth;\n}\n\nexport default {\n\tinheritAttrs: false,\n\n\tmethods: {\n\t\tzeroWidth(element) {\n\t\t\tObject.assign(element.style, {\n\t\t\t\twidth: '0px',\n\t\t\t\tpaddingRight: '0px',\n\t\t\t\tpaddingLeft: '0px',\n\t\t\t\tmarginRight: '0px',\n\t\t\t\topacity: 0,\n\t\t\t});\n\t\t},\n\n\t\tremoveWidth(element) {\n\t\t\telement.style.width = null;\n\t\t},\n\n\t\tsetContentWidth(element, direction) {\n\t\t\tlet newWidth = element.scrollWidth;\n\n\t\t\tif (direction === 'enter') {\n\t\t\t\tnewWidth = getElementRealWidth(element);\n\t\t\t}\n\n\t\t\tObject.assign(element.style, {\n\t\t\t\twidth: `${newWidth}px`,\n\t\t\t\tpaddingRight: null,\n\t\t\t\tpaddingLeft: null,\n\t\t\t\tmarginRight: null,\n\t\t\t\topacity: null,\n\t\t\t});\n\t\t},\n\n\t\tonLeave(element) {\n\t\t\tthis.setContentWidth(element);\n\t\t\tthis.zeroWidth(element);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.transitioning {\n\ttransition:\n\t\topacity 0.1s ease-in-out,\n\t\twidth 0.1s ease-in-out,\n\t\tmargin-right 0.1s ease-in-out,\n\t\tpadding-right 0.1s ease-in-out,\n\t\tpadding-left 0.1s ease-in-out !important;\n}\n</style>\n","<template>\n\t<transition-action-bar-items\n\t\t:class=\"[\n\t\t\t$s.ActionBar,\n\t\t\t$s[`position_${position}`],\n\t\t\t$s[`hide-on_${hideOn}`],\n\t\t]\"\n\t\ttag=\"div\"\n\t>\n\t\t<vnode-syringe :class&=\"$s.Action\">\n\t\t\t<!-- @slot ActionBar items -->\n\t\t\t<slot />\n\t\t</vnode-syringe>\n\t</transition-action-bar-items>\n</template>\n\n<script>\nimport vnodeSyringe from 'vue-vnode-syringe';\nimport TransitionActionBarItems from './TransitionActionBarItems.vue';\n\nexport default {\n\tcomponents: {\n\t\tvnodeSyringe,\n\t\tTransitionActionBarItems,\n\t},\n\n\tprops: {\n\t\tposition: {\n\t\t\ttype: String,\n\t\t\tdefault: 'absolute',\n\t\t\tvalidator: (position) => ['static', 'relative', 'absolute', 'fixed'].includes(position),\n\t\t},\n\t\thideOn: {\n\t\t\ttype: String,\n\t\t\tdefault: 'none',\n\t\t\tvalidator: (hideOn) => ['none', 'mobile', 'tablet', 'desktop'].includes(hideOn),\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ActionBar {\n\t--regular-bottom-padding: 32px;\n\t--extra-bottom-padding-for-deadclick: 32px;\n\t--safe-area-inset-padding: env(safe-area-inset-bottom, 0);\n\t--mobile-bottom-padding:\n\t\tcalc(\n\t\t\tvar(--regular-bottom-padding)\n\t\t\t+ var(--extra-bottom-padding-for-deadclick)\n\t\t\t+ var(--safe-area-inset-padding)\n\t\t);\n\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbox-sizing: border-box;\n\tpadding: 24px 24px var(--mobile-bottom-padding) 24px;\n\tpointer-events: none;\n}\n\n@media screen and (max-width: 839px) {\n\t.hide-on_mobile {\n\t\tdisplay: none;\n\t}\n}\n\n@media screen and (min-width: 840px) {\n\t.hide-on_tablet {\n\t\tdisplay: none;\n\t}\n\n\t.ActionBar {\n\t\tpadding: 24px 24px var(--regular-bottom-padding) 24px;\n\t}\n}\n\n@media screen and (min-width: 1200px) {\n\t.hide-on_desktop {\n\t\tdisplay: none;\n\t}\n}\n\n.position_static {\n\twidth: 100%;\n}\n\n.position_relative {\n\tposition: relative;\n\tz-index: 1;\n\twidth: 100%;\n}\n\n.position_absolute {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 1;\n}\n\n.position_fixed {\n\tposition: fixed;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 1;\n}\n\n.Action {\n\tmargin-right: 8px;\n\ttransform: translate3d(0, 0, 0);  /* Fixes buttons flickering on mobile devices */\n\tfilter: drop-shadow(0 15px 10px rgb(0 0 0 / 20%));\n\tpointer-events: auto;\n\n\t&:last-child {\n\t\tmargin-right: 0;\n\t}\n}\n</style>\n","<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.ActionBarLayer,\n\t\t\t{ [$s.NoActionBar]: !hasActionBar },\n\t\t]\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<slot />\n\n\t\t<m-transition-spring-up>\n\t\t\t<atomic-action-bar\n\t\t\t\tv-if=\"actionBarVnodes\"\n\t\t\t\thide-on=\"tablet\"\n\t\t\t\tposition=\"fixed\"\n\t\t\t>\n\t\t\t\t<v :nodes=\"actionBarVnodes\" />\n\t\t\t</atomic-action-bar>\n\t\t</m-transition-spring-up>\n\t</div>\n</template>\n\n<script>\nimport { throttle } from 'lodash';\nimport V from 'vue-v';\nimport { MTransitionSpringUp } from '@square/maker/components/TransitionSpringUp';\nimport AtomicActionBar from './AtomicActionBar.vue';\n\nexport default {\n\tcomponents: {\n\t\tV,\n\t\tMTransitionSpringUp,\n\t\tAtomicActionBar,\n\t},\n\n\tprovide() {\n\t\tconst vm = this;\n\t\treturn {\n\t\t\t'action-bar': {\n\t\t\t\tregister(uid, vnodes) {\n\t\t\t\t\tvm.registeredBy = uid;\n\t\t\t\t\tvm.setActionbar(vnodes);\n\t\t\t\t},\n\t\t\t\tunregister(uid) {\n\t\t\t\t\tif (vm.registeredBy === uid) {\n\t\t\t\t\t\tvm.setActionbar();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t},\n\n\tinheritAttrs: false,\n\n\tdata() {\n\t\treturn {\n\t\t\tregisteredBy: undefined,\n\t\t\tactionBarVnodes: undefined,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\thasActionBar() {\n\t\t\treturn !!this.actionBarVnodes;\n\t\t},\n\t},\n\n\tcreated() {\n\t\tconst shortDelayMs = 50;\n\t\tthis.setActionbar = throttle(this.setActionbar, shortDelayMs, { leading: false });\n\t},\n\n\tmethods: {\n\t\tsetActionbar(vnodes) {\n\t\t\tthis.actionBarVnodes = vnodes;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ActionBarLayer {\n\t--regular-bottom-padding: 32px;\n\t--extra-bottom-padding-for-deadclick: 32px;\n\t--safe-area-inset-padding: env(safe-area-inset-bottom, 0);\n\t--actionbar-bottom-padding:\n\t\tcalc(\n\t\t\tvar(--regular-bottom-padding)\n\t\t\t+ var(--extra-bottom-padding-for-deadclick)\n\t\t\t+ var(--safe-area-inset-padding)\n\t\t);\n\t--actionbar-size: 64px;\n\t--actionbar-top-padding: 32px;\n\n\tpadding-bottom:\n\t\tcalc(\n\t\t\tvar(--actionbar-top-padding)\n\t\t\t+ var(--actionbar-size)\n\t\t\t+ var(--actionbar-bottom-padding)\n\t\t);\n\n\t&.NoActionBar {\n\t\tpadding-bottom: 0;\n\t}\n}\n\n@media screen and (min-width: 840px) {\n\t.ActionBarLayer {\n\t\tpadding-bottom: 0;\n\t}\n}\n</style>\n","<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t$s[`align_${align}`],\n\t\t\t$s[`shape_${shape}`],\n\t\t\t{\n\t\t\t\t[$s.fullWidth]: fullWidth,\n\t\t\t\t[$s.iconButton]: isSingleChild(),\n\t\t\t\t[$s.loading]: loading,\n\t\t\t}\n\t\t]\"\n\t\t:type=\"type\"\n\t\t:disabled=\"disabled\"\n\t\t:style=\"style\"\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 :class=\"[$s.MainText, $s.TruncateText]\">\n\t\t\t<!-- @slot Button label -->\n\t\t\t<slot />\n\t\t</span>\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\t<pseudo-window\n\t\t\tdocument\n\t\t\t@keyup.esc=\"handleEscKey\"\n\t\t/>\n\t</button>\n</template>\n\n<script>\nimport chroma from 'chroma-js';\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MLoading } from '@square/maker/components/Loading';\n\n// TODO: refactor the code below so it's shared with Button component\n\nfunction getContrast(chromaBg, targetChromaFg) {\n\tconst contrastAccessibilityThreshold = 4.5;\n\tconst isLightColorThreshold = 0.32;\n\tif (!targetChromaFg\n\t\t|| chroma.contrast(chromaBg, targetChromaFg) < contrastAccessibilityThreshold) {\n\t\tconst isLight = chromaBg.luminance() > isLightColorThreshold;\n\t\treturn chroma(isLight ? '#000' : '#fff');\n\t}\n\treturn targetChromaFg;\n}\n\nfunction getFocus(chromaColor) {\n\tconst arbitraryAlphaValue = 0.8;\n\treturn chromaColor.alpha(arbitraryAlphaValue);\n}\n\nfunction fill(tokens) {\n\tconst color = chroma(tokens.color);\n\tconst textColor = tokens.textColor ? chroma(tokens.textColor) : undefined;\n\tconst contrastColor = getContrast(color, textColor);\n\tconst focusColor = getFocus(color);\n\treturn {\n\t\t'--color-main': color.hex(),\n\t\t'--color-contrast': contrastColor.hex(),\n\t\t'--color-focus': focusColor.hex(),\n\t};\n}\n\n/**\n * Button component\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {\n\tcomponents: {\n\t\tMLoading,\n\t\tPseudoWindow,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\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 * Whether to make the button full-width\n\t\t */\n\t\tfullWidth: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Background color of button\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: '#000',\n\t\t\tvalidator: (color) => chroma.valid(color),\n\t\t},\n\t\t/**\n\t\t * Text color of button\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => chroma.valid(color),\n\t\t},\n\t\t/**\n\t\t * Shape of button\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: 'pill',\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\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 * How to align button's contents\n\t\t */\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: 'center',\n\t\t\tvalidator: (variant) => ['center', 'stack', 'space-between'].includes(variant),\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},\n\n\tcomputed: {\n\t\tstyle() {\n\t\t\treturn fill({\n\t\t\t\tcolor: this.color,\n\t\t\t\ttextColor: this.textColor,\n\t\t\t});\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 zero = 0;\n\t\t\tconst children = (this.$slots.default || []).filter(\n\t\t\t\t(vnode) => vnode.tag || vnode.text.trim().length > zero,\n\t\t\t);\n\t\t\tconst singleChild = 1;\n\t\t\tconst firstChildIndex = 0;\n\t\t\treturn children.length === singleChild && children[firstChildIndex].tag;\n\t\t},\n\n\t\thandleEscKey() {\n\t\t\t/**\n\t\t\t * ESC keyup event on window\n\t\t\t * @property {string}\n\t\t\t */\n\t\t\tthis.$emit('window-esc');\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\t--medium-height: 48px;\n\t--medium-font-size: 16px;\n\t--medium-padding: 24px;\n\t--medium-line-height: 1.77;\n\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmin-width: 0;\n\theight: var(--medium-height);\n\tpadding: 0 var(--medium-padding);\n\tcolor: var(--text-color);\n\tfont-weight: 500;\n\tfont-size: var(--medium-font-size);\n\tfont-family: inherit;\n\tvertical-align: middle;\n\tbackground-color: var(--color-main);\n\tborder: none;\n\tborder-radius: 32px;\n\toutline: none;\n\tbox-shadow:\n\t\tvar(--outline-border, 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\tuser-select: none;\n\ttouch-action: manipulation;\n\tfill: currentColor;\n\n\t& > * {\n\t\tline-height: var(--medium-line-height);\n\t}\n\n\t&.iconButton {\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t\talign-items: center;\n\t\twidth: var(--medium-height);\n\t\theight: var(--medium-height);\n\t\tpadding: 0;\n\t}\n\n\t--text-color: var(--color-contrast, #000);\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: space-evenly;\n\t\tpadding-top: 4px;\n\t\tpadding-bottom: 4px;\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&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded {\n\t\tborder-radius: 8px;\n\t}\n\n\t&.shape_pill {\n\t\tborder-radius: 32px;\n\t}\n\n\t&:disabled {\n\t\tcursor: initial;\n\n\t\t& > * {\n\t\t\topacity: 0.4;\n\t\t}\n\t}\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 2px #fff,\n\t\t\t0 0 0 4px var(--color-focus);\n\t}\n\n\t&:active {\n\t\tbackground-color: var(--color-active, var(--color-main));\n\t}\n\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-hover, var(--color-main));\n\t\t}\n\t}\n\n\t&.loading {\n\t\tcolor: transparent;\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\tcolor: var(--text-color);\n\tbackground-color: inherit;\n\tborder-radius: 32px;\n}\n\n.MainText {\n\tgap: 8px;\n\twidth: max-content;\n}\n\n.iconButton .MainText {\n\tdisplay: flex;\n}\n\n.InformationText {\n\twidth: min-content;\n\topacity: 0.6;\n}\n\n.align_stack .InformationText {\n\tfont-size: 12px;\n}\n\n.TruncateText {\n\tmax-width: 100%;\n\toverflow: hidden;\n\tline-height: 1;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\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","<template>\n\t<div :class=\"$s.ActionBarWrapper\">\n\t\t<atomic-action-bar\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t\t<!-- @slot ActionBar items -->\n\t\t\t<slot />\n\t\t</atomic-action-bar>\n\t</div>\n</template>\n\n<script>\nimport AtomicActionBar from './AtomicActionBar.vue';\n\n/**\n * InlineActionBar component\n * @inheritAttrs ./AtomicActionBar.vue\n * @inheritListeners ./AtomicActionBar.vue\n */\nexport default {\n\tcomponents: {\n\t\tAtomicActionBar,\n\t},\n\n\tinheritAttrs: false,\n};\n</script>\n\n<style module=\"$s\">\n.ActionBarWrapper {\n\t--regular-bottom-padding: 32px;\n\t--extra-bottom-padding-for-deadclick: 32px;\n\t--safe-area-inset-padding: env(safe-area-inset-bottom, 0);\n\t--actionbar-bottom-padding:\n\t\tcalc(\n\t\t\tvar(--regular-bottom-padding)\n\t\t\t+ var(--extra-bottom-padding-for-deadclick)\n\t\t\t+ var(--safe-area-inset-padding)\n\t\t);\n\t--actionbar-size: 64px;\n\t--actionbar-top-padding: 32px;\n\n\tpadding-bottom:\n\t\tcalc(\n\t\t\tvar(--actionbar-top-padding)\n\t\t\t+ var(--actionbar-size)\n\t\t\t+ var(--actionbar-bottom-padding)\n\t\t);\n}\n\n@media screen and (min-width: 840px) {\n\t.ActionBarWrapper {\n\t\t--actionbar-size: 48px;\n\t\t--actionbar-top-padding: 24px;\n\n\t\t/* no safe-area or deadclick issues on non-mobile resolutions */\n\t\t--actionbar-bottom-padding: var(--regular-bottom-padding);\n\t}\n}\n</style>\n"]}