.design-tool-container{flex-grow:1;position:relative}.design-tool-container .tool-action-header{position:sticky;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;padding:16px;align-items:center;border-bottom:1px solid var(--stroke-strong);flex-shrink:0;top:0;z-index:2;background:var(--fill)}.design-tool-container .tool-action-header.scrollable{box-shadow:0 1px 3px 0 var(--shadow-color)}.design-tool-container .saving-overlay{position:absolute;width:100%;height:100%;z-index:100;background:rgba(16,24,40,.7);backdrop-filter:blur(2px)}.design-tool-container .saving-overlay .save-icon{position:relative;width:48px;height:48px}.design-tool-container .saving-overlay .save-icon .save-border{position:absolute;width:48px;height:48px;border:2px solid var(--success-fill);border-top:2px solid var(--success-weak);border-radius:50%;background-color:var(--success-fill)}.design-tool-container .saving-overlay .save-icon svg{z-index:1}.design-tool-container .tool-action-footer{box-shadow:0px -1px 3px 0px var(--shadow-color);bottom:0;background:var(--fill);border-top:1px solid var(--stroke-weak);padding:8px 16px}.design-tool-container .floating-tool-bar{width:100%;position:relative}.design-tool-container #tool-back{position:absolute;top:20px;left:12px}.design-tool-container #tool-delete{position:absolute;top:20px;right:38px}.design-tool-container .inner-drag-content{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:16px 16px 80px;gap:16px !important;interpolate-size:allow-keywords;position:relative;scrollbar-width:thin;scrollbar-color:var(--stroke-strong) var(--fill)}.design-tool-container .inner-drag-content .inset-padding{padding:16px 0}.design-tool-container .inner-drag-content .inset-dropdown{max-height:0;transition:300ms max-height ease;overflow:hidden;height:100%}.design-tool-container .inner-drag-content .inset-dropdown.open{max-height:100%}@supports(interpolate-size: allow-keywords){.design-tool-container .inner-drag-content .inset-dropdown{transition:200ms max-height ease}.design-tool-container .inner-drag-content .inset-dropdown.open{max-height:fit-content}}.design-tool-container .inner-drag-content .inset-section{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;width:auto;max-width:none}.design-tool-container .inner-drag-content .inset-section.inset-shadow{background:var(--background);box-shadow:inset 0px -1px 3px 0px var(--shadow-color),inset 0px 1px 3px 0px var(--shadow-color)}.design-tool-container .inner-drag-content .inset-hover{cursor:pointer;padding-top:16px;padding-bottom:16px}.design-tool-container .inner-drag-content .inset-hover:hover{background:var(--brand-fill)}.design-tool-container .inner-drag-content .inset-hover:active{background:var(--brand-fill-active)}@media screen and (min-width: 768px){.design-tool-container{display:flex;flex-direction:row;flex-wrap:nowrap}.design-tool-container .design-tool-canvas{width:calc(100% - 400px);max-width:calc(100% - 400px);display:flex;flex-grow:1;position:relative}.design-tool-container .design-tool-canvas #canvas-container{position:absolute;width:100%;height:100%;max-width:100%;max-height:100%}.design-tool-container .design-tool-canvas #canvas-container canvas{filter:var(--drop-shadow)}.design-tool-container .custom-design-tool{width:400px;display:flex;position:relative;flex-grow:1}.design-tool-container .tool-action-footer{position:sticky}.design-tool-container .floating-tool-bar{border-left:1px solid var(--stroke-strong);background:var(--fill);box-shadow:var(--card-shadow-sm);display:flex;flex-direction:column;position:absolute;height:100%;max-height:100%;width:100%;max-width:100%}.design-tool-container .inner-drag-content{flex-grow:1;overflow-y:scroll;max-width:100%;max-height:100%}}@media screen and (max-width: 767.999px){.design-tool-container .mobile-drag-indicator{position:fixed;z-index:3;padding-top:8px}.design-tool-container .tool-action-header{padding-top:26px}.design-tool-container #tool-back,.design-tool-container #tool-delete{top:28px}.design-tool-container .design-tool-canvas #canvas-container{height:calc((100vh - 72px)/2);height:calc((100dvh - 72px)/2)}.design-tool-container .tool-action-footer{position:sticky}.design-tool-container .floating-tool-bar{height:calc((100vh - 72px)/2);height:calc((100dvh - 72px)/2);position:absolute;bottom:0;background:var(--fill);border-top-left-radius:12px;border-top-right-radius:12px;box-shadow:var(--card-shadow-top);border-top:1px solid var(--stroke-strong);overflow-y:scroll;scrollbar-width:thin}@supports not (height: 100dvh){.design-tool-container .floating-tool-bar{min-height:calc((100vh - 72px)/2)}}.design-tool-container .floating-tool-bar .hidden-drag-area{width:calc(100% - 90px);left:45px;height:66px;background:rgba(0,0,0,0);position:fixed;z-index:10}.design-tool-container .floating-tool-bar.animate-height-drag{transition-duration:250ms;transition-property:height;transition-timing-function:ease-in}.design-tool-container .floating-tool-bar.animate-height-flick{transition-property:height;transition-timing-function:cubic-bezier(0.64, 0.54, 0.67, 1.22)}.design-tool-container .floating-tool-bar .inner-drag-content{min-height:calc(100% - 73px)}}.design-tool-container button.btn-clear.btn-side-tab{height:40px;border-right:1px solid var(--stroke-strong);border-bottom:1px solid var(--stroke-strong);background:var(--background);transition:200ms all ease}.design-tool-container button.btn-clear.btn-side-tab:last-of-type{border-right:none}.design-tool-container button.btn-clear.btn-side-tab.selected{border-bottom:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0)}.btn-material,.btn-color{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;transition:200ms all ease}.btn-material .material-preview{transition:200ms all ease;border-radius:6px;background-position:center !important;background-repeat:no-repeat !important;background-size:contain !important}.btn-material:focus,.btn-material.focus{outline:none}.btn-material:focus .material-preview,.btn-material.focus .material-preview{box-shadow:var(--ring-brand-shadow-xs)}.btn-material:active .material-preview,.btn-material.active .material-preview{box-shadow:var(--ring-brand-shadow-xs);border:4px solid var(--fill)}.btn-color{border:1px solid var(--stroke-strong)}.btn-color:focus,.btn-color.focus{box-shadow:var(--ring-brand-shadow-xs)}.btn-color:active,.btn-color.active{box-shadow:var(--ring-brand-shadow-xs);border:4px solid var(--fill)}.tool-full-width-section{margin-left:-16px;margin-right:-16px;padding:8px;width:auto;max-width:none}.tool-full-width-section .color-name{color:var(--text-weak)}.tool-full-width-section:hover{background:var(--brand-fill)}@media screen and (max-width: 767.999px){.color-picker{padding-left:40px;padding-right:40px}}.color-picker #sv-value,.color-picker #hue-value{width:24px;height:24px;padding:0;position:absolute;left:-12px;border-radius:50%;border:3px solid var(--text-button);background:var(--fill)}.color-picker #hue-value{top:-4px}.color-picker #sv-value{top:-12px}.color-picker .hue,.color-picker .saturation-value{user-select:none;position:relative;width:100%;border-radius:4px}.color-picker .hue{background:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);height:16px}.color-picker .saturation-value{height:200px;background-color:#fff}@media screen and (max-width: 479.999px){.color-picker .saturation-value{height:150px}}/*# sourceMappingURL=tool.min.css.map */