@flows/react-components/dist/index.css

Built-in components for Flows React SDK

:root{--flows-basicsV2-bg-default: #ffffff;--flows-basicsV2-bg-subtle: #fafafa;--flows-basicsV2-bg-strong: #eaeaea;--flows-basicsV2-bg-hover: #f0f0f0;--flows-basicsV2-bg-primary: #262626;--flows-basicsV2-bg-primary-hover: #3b3b3b;--flows-basicsV2-bg-overlay: rgba(0, 0, 0, .4);--flows-basicsV2-fg-default: #1a1a1a;--flows-basicsV2-fg-onPrimary: #ffffff;--flows-basicsV2-fg-muted: #605252;--flows-basicsV2-borderWidth: 1px;--flows-basicsV2-border: var(--flows-basicsV2-borderWidth) solid #d6d6d6;--flows-basicsV2-border-strong: var(--flows-basicsV2-borderWidth) solid #ccc;--flows-basicsV2-border-strong-hover: var(--flows-basicsV2-borderWidth) solid #bababa;--flows-basicsV2-border-primary: var(--flows-basicsV2-borderWidth) solid #262626;--flows-basicsV2-shadow: 0px 6px 18px rgba(0, 0, 0, .15), 0px 3px 8px rgba(0, 0, 0, .03), 0px 0px 1px rgba(0, 0, 0, .05);--flows-basicsV2-shadow-large: 0px 10px 48px rgba(0, 0, 0, .1), 0px 4px 24px rgba(0, 0, 0, .12), 0px 0px 1px rgba(0, 0, 0, .05);--flows-basicsV2-borderRadius-xs: 3px;--flows-basicsV2-borderRadius-m: 8px;--flows-basicsV2-borderRadius-l: 12px;--flows-basicsV2-borderRadius-xl: 16px;--flows-basicsV2-size-xs: 2px;--flows-basicsV2-size-s: 8px;--flows-basicsV2-size-m: 12px;--flows-basicsV2-size-l: 16px;--flows-basicsV2-size-xl: 20px;--flows-basicsV2-size-xxl: 24px;--flows-basicsV2-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--flows-basicsV2-base-font-size: 14px;--flows-basicsV2-base-line-height: 20px;--flows-basicsV2-title-font-size: 16px;--flows-basicsV2-title-line-height: 24px;--flows-basicsV2-title-font-weight: 600;--flows-basicsV2-zIndex: 1500;--flows-basicsV2-tooltip-padding: var(--flows-basicsV2-size-xl);--flows-basicsV2-tooltip-overlayBackground: var(--flows-basicsV2-bg-overlay);--flows-basicsV2-tooltip-overlayBorderRadius: var(--flows-basicsV2-borderRadius-m);--flows-basicsV2-tooltip-overlayPadding: 4px;--flows-basicsV2-tooltip-minWidth: 200px;--flows-basicsV2-tooltip-maxWidth: 320px;--flows-basicsV2-modal-overlayBackground: var(--flows-basicsV2-bg-overlay);--flows-basicsV2-modal-padding: var(--flows-basicsV2-size-xxl);--flows-basicsV2-modal-minWidth: 320px;--flows-basicsV2-modal-maxWidth: 640px;--flows-basicsV2-modal-size-small: 420px;--flows-basicsV2-modal-size-medium: 640px;--flows-basicsV2-modal-button-max-width: 600px;--flows-basicsV2-banner-screenEdgePadding: var(--flows-basicsV2-size-xl);--flows-basicsV2-banner-padding: var(--flows-basicsV2-size-xl);--flows-basicsV2-banner-minWidth: 200px;--flows-basicsV2-banner-maxWidth: 320px;--flows-basicsV2-button-font-size: 15px;--flows-basicsV2-button-line-height: 24px;--flows-basicsV2-button-small-font-size: 14px;--flows-basicsV2-button-small-line-height: 20px;--flows-basicsV2-primary-button-gradient: linear-gradient(#ffffff14, #fff0);--flows-basicsV2-primary-button-shadow: inset 0 1px #ffffff1f, 0 1px 2px #0a0d120d;--flows-basicsV2-secondary-button-shadow: inset 0 -2px 0 0 #fafafa, 0 1px 2px 0 #0d0d0d0d;--flows-basicsV2-progress-dots-size: 10px;--flows-basicsV2-progress-dots-gap: 6px;--flows-basicsV2-card-padding: var(--flows-basicsV2-size-xl);--flows-basicsV2-floating-checklist-popover-maxWidth: 340px;--flows-basicsV2-floating-checklist-scrollbar-color: #d6d6d6 transparent}.dark{--flows-basicsV2-bg-default: #1e1e1e;--flows-basicsV2-bg-subtle: #262626;--flows-basicsV2-bg-strong: #303030;--flows-basicsV2-bg-hover: #333333;--flows-basicsV2-bg-primary: #f1f1f1;--flows-basicsV2-bg-primary-hover: #dddddd;--flows-basicsV2-bg-overlay: rgba(0, 0, 0, .6);--flows-basicsV2-fg-default: #fafafa;--flows-basicsV2-fg-onPrimary: #1e1e1e;--flows-basicsV2-fg-muted: #9d9595;--flows-basicsV2-border: 1px solid #3d3d3d;--flows-basicsV2-border-strong: 1px solid #4a4a4a;--flows-basicsV2-border-strong-hover: 1px solid #616161;--flows-basicsV2-border-primary: 1px solid #f1f1f1;--flows-basicsV2-shadow: 0px 4px 12px rgba(0, 0, 0, .2), 0px 2px 6px rgba(0, 0, 0, .25), 0px 1px 1px rgba(0, 0, 0, .2);--flows-basicsV2-shadow-large: 0px 1px 1px rgba(0, 0, 0, .2), 0px 2px 8px rgba(0, 0, 0, .2), 0px 4px 12px rgba(0, 0, 0, .2), 0px 4px 20px rgba(0, 0, 0, .2), 0px 4px 40px rgba(0, 0, 0, .15);--flows-basicsV2-primary-button-gradient: linear-gradient(#fff0, #0000001a);--flows-basicsV2-primary-button-shadow: inset 0 1px #ffffff1f;--flows-basicsV2-secondary-button-shadow: unset;--flows-basicsV2-floating-checklist-scrollbar-color: #3d3d3d transparent}@keyframes flows-basicsV2-scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes flows-basicsV2-scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes flows-basicsV2-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes flows-basicsV2-ping{0%{transform:scale(1);opacity:.75}75%,to{transform:scale(2.5);opacity:0}}.flows_basicsV2_text{font-family:var(--flows-basicsV2-font-family);margin:0}.flows_basicsV2_text_body{font-size:var(--flows-basicsV2-base-font-size);line-height:var(--flows-basicsV2-base-line-height)}.flows_basicsV2_text_title{font-size:var(--flows-basicsV2-title-font-size);line-height:var(--flows-basicsV2-title-line-height);font-weight:var(--flows-basicsV2-title-font-weight)}.flows_basicsV2_button{border-radius:var(--flows-basicsV2-borderRadius-m);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;padding:5px 15px;font-family:var(--flows-basicsV2-font-family);font-size:var(--flows-basicsV2-button-font-size);line-height:var(--flows-basicsV2-button-line-height);font-weight:600;white-space:nowrap;text-decoration:none;text-align:center}.flows_basicsV2_button_primary{background-color:var(--flows-basicsV2-bg-primary);border:var(--flows-basicsV2-border-primary);color:var(--flows-basicsV2-fg-onPrimary);background-image:var(--flows-basicsV2-primary-button-gradient);box-shadow:var(--flows-basicsV2-primary-button-shadow)}.flows_basicsV2_button_primary:hover{background-color:var(--flows-basicsV2-bg-primary-hover)}.flows_basicsV2_button_secondary{background-color:var(--flows-basicsV2-bg-subtle);border:var(--flows-basicsV2-border-strong);color:var(--flows-basicsV2-fg-default);box-shadow:var(--flows-basicsV2-secondary-button-shadow)}.flows_basicsV2_button_secondary:hover{background-color:var(--flows-basicsV2-bg-hover);border:var(--flows-basicsV2-border-strong-hover)}.flows_basicsV2_button_text{color:var(--flows-basicsV2-fg-muted);padding:0;font-size:12px;line-height:16px}.flows_basicsV2_button_text:hover{text-decoration:underline}.flows_basicsV2_button_size_small{padding:4px 9px;font-size:var(--flows-basicsV2-button-small-font-size);line-height:var(--flows-basicsV2-button-small-line-height)}.flows_basicsV2_iconButton{border-radius:var(--flows-basicsV2-borderRadius-m);cursor:pointer;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;background-color:#0000;border:none;padding:0;width:20px;height:20px;display:grid;place-items:center}.flows_basicsV2_iconButton:hover{background-color:var(--flows-basicsV2-bg-hover)}.flows_basicsV2_dots{justify-content:center;display:flex;gap:var(--flows-basicsV2-progress-dots-gap);overflow:hidden}.flows_basicsV2_dots_dot{width:var(--flows-basicsV2-progress-dots-size);height:var(--flows-basicsV2-progress-dots-size);border-radius:50%;flex-shrink:0;background-color:var(--flows-basicsV2-bg-strong)}.flows_basicsV2_dots_dot_active{background-color:var(--flows-basicsV2-bg-primary)}.flows_basicsV2_progress{flex:1;height:8px;background-color:var(--flows-basicsV2-bg-strong);border-radius:var(--flows-basicsV2-borderRadius-m);overflow:hidden}.flows_basicsV2_progress_indicator{height:100%;background-color:var(--flows-basicsV2-bg-primary);transition:width .15s ease-in-out}.flows_basicsV2_tooltip_root{width:100%;top:0;left:0;position:absolute;z-index:var(--flows-basicsV2-zIndex)}.flows_basicsV2_tooltip_overlay{position:fixed;z-index:-1;pointer-events:none;animation:flows-basicsV2-fadeIn .1s ease-out}.flows_basicsV2_tooltip_overlay:after{content:"";position:absolute;inset:0;margin:calc(var(--flows-basicsV2-tooltip-overlayPadding) * -1);box-shadow:var(--flows-basicsV2-tooltip-overlayBackground) 0 0 0 9999px;border-radius:var(--flows-basicsV2-tooltip-overlayBorderRadius)}.flows_basicsV2_tooltip_tooltip{background-color:var(--flows-basicsV2-bg-default);border:var(--flows-basicsV2-border);color:var(--flows-basicsV2-fg-default);border-radius:var(--flows-basicsV2-borderRadius-l);position:absolute;padding:var(--flows-basicsV2-tooltip-padding);font-family:var(--flows-basicsV2-font-family);font-size:var(--flows-basicsV2-base-font-size);line-height:var(--flows-basicsV2-base-line-height);box-sizing:border-box;min-width:var(--flows-basicsV2-tooltip-minWidth);max-width:min(var(--flows-basicsV2-tooltip-maxWidth),calc(100% - 16px));animation:flows-basicsV2-scaleIn .15s ease-out}.flows_basicsV2_tooltip_tooltip[data-open=true]{transition:all .15s ease-out}.flows_basicsV2_tooltip_tooltip:before{box-shadow:var(--flows-basicsV2-shadow);border-radius:var(--flows-basicsV2-borderRadius-l);content:"";position:absolute;inset:calc(var(--flows-basicsV2-borderWidth) * -1);z-index:-1;pointer-events:none}.flows_basicsV2_tooltip_title{margin-right:24px;margin-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_tooltip_arrow{position:absolute;width:var(--flows-basicsV2-size-l);height:var(--flows-basicsV2-size-l);transform:rotate(45deg);border-radius:var(--flows-basicsV2-borderRadius-xs)}.flows_basicsV2_tooltip_tooltip[data-open=false] .flows_basicsV2_tooltip_arrow{border-color:var(--flows-basicsV2-bg-default);box-shadow:none}.flows_basicsV2_tooltip_arrow-bottom{border:var(--flows-basicsV2-border);z-index:-1;box-shadow:var(--flows-basicsV2-shadow)}.flows_basicsV2_tooltip_arrow-top{background-color:var(--flows-basicsV2-bg-default);border:var(--flows-basicsV2-border);border-color:#0000;background-clip:padding-box}.flows_basicsV2_tooltip_footer{margin-top:var(--flows-basicsV2-size-l);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:var(--flows-basicsV2-size-s);row-gap:var(--flows-basicsV2-size-l)}.flows_basicsV2_tooltip_buttons_wrapper{flex:1;flex-basis:auto;display:flex;justify-content:flex-end}.flows_basicsV2_tooltip_buttons{display:flex;gap:var(--flows-basicsV2-size-s);flex-wrap:wrap-reverse}.flows_basicsV2_tooltip_buttons button,.flows_basicsV2_modal_footer a{flex:1}.flows_basicsV2_tooltip_close{position:absolute;top:var(--flows-basicsV2-tooltip-padding);right:var(--flows-basicsV2-tooltip-padding)}.flows_basicsV2_modal_overlay{position:fixed;inset:0;background-color:var(--flows-basicsV2-modal-overlayBackground);pointer-events:none;animation:flows-basicsV2-fadeIn .1s ease-out;z-index:var(--flows-basicsV2-zIndex)}.flows_basicsV2_modal_wrapper{position:fixed;inset:0;display:grid;padding:var(--flows-basicsV2-modal-padding);overflow:auto;pointer-events:none;z-index:var(--flows-basicsV2-zIndex)}.flows_basicsV2_modal_modal{pointer-events:auto;background-color:var(--flows-basicsV2-bg-default);border:var(--flows-basicsV2-border);color:var(--flows-basicsV2-fg-default);border-radius:var(--flows-basicsV2-borderRadius-xl);box-shadow:var(--flows-basicsV2-shadow-large);padding:var(--flows-basicsV2-size-xxl);position:relative;box-sizing:border-box;animation:flows-basicsV2-scaleIn .15s ease-out}.flows_basicsV2_modal_width_small{width:100%;max-width:var(--flows-basicsV2-modal-size-small)}.flows_basicsV2_modal_width_medium{width:100%;max-width:var(--flows-basicsV2-modal-size-medium)}.flows_basicsV2_modal_width_auto{min-width:var(--flows-basicsV2-modal-minWidth);max-width:var(--flows-basicsV2-modal-maxWidth)}.flows_basicsV2_modal_title{text-align:center;margin-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_modal_body{text-align:center}.flows_basicsV2_modal_center{place-self:center}.flows_basicsV2_modal_top{place-self:start center}.flows_basicsV2_modal_bottom{place-self:end center}.flows_basicsV2_modal_left{place-self:center start}.flows_basicsV2_modal_right{place-self:center end}.flows_basicsV2_modal_top-left{place-self:start start}.flows_basicsV2_modal_top-right{place-self:start end}.flows_basicsV2_modal_bottom-left{place-self:end start}.flows_basicsV2_modal_bottom-right{place-self:end end}.flows_basicsV2_modal_footer{margin-top:var(--flows-basicsV2-size-xxl);margin-right:auto;margin-left:auto;max-width:var(--flows-basicsV2-modal-button-max-width);display:flex;flex-wrap:wrap-reverse;gap:var(--flows-basicsV2-size-m)}.flows_basicsV2_modal_footer button,.flows_basicsV2_modal_footer a{flex:1}.flows_basicsV2_modal_footer .flows_basicsV2_button{width:100%}.flows_basicsV2_modal_close{position:absolute;top:var(--flows-basicsV2-size-xl);right:var(--flows-basicsV2-size-xl)}.flows_basicsV2_modal_dots{margin-top:var(--flows-basicsV2-size-xxl);display:flex;justify-content:center}.flows_basicsV2_hint_hotspot{position:absolute;background-color:var(--flows-basicsV2-bg-primary);border-radius:50%;transition:background-color .12s ease-in-out;z-index:var(--flows-basicsV2-zIndex);width:var(--flows-basicsV2-size-l);height:var(--flows-basicsV2-size-l);cursor:pointer;border:var(--flows-basicsV2-border-primary);background-image:var(--flows-basicsV2-primary-button-gradient);box-shadow:var(--flows-basicsV2-primary-button-shadow)}.flows_basicsV2_hint_hotspot:hover{background-color:var(--flows-basicsV2-bg-primary-hover)}.flows_basicsV2_hint_hotspot:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background-color:var(--flows-basicsV2-bg-primary);animation:flows-basicsV2-ping 2s cubic-bezier(0,0,.2,1) infinite}.flows_basicsV2_hint_tooltip.flows_basicsV2_hint_tooltip{transition:none}.flows_basicsV2_hint_tooltip{z-index:calc(var(--flows-basicsV2-zIndex) + 1)}.flows_basicsV2_hint_tooltip[data-open=false]{animation:flows-basicsV2-scaleOut .15s ease-out;opacity:0}.flows_basicsV2_card{background-color:var(--flows-basicsV2-bg-default);border:var(--flows-basicsV2-border);color:var(--flows-basicsV2-fg-default);border-radius:var(--flows-basicsV2-borderRadius-l);padding:var(--flows-basicsV2-card-padding);position:relative}.flows_basicsV2_card_title{margin-right:24px;margin-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_card_footer{margin-top:var(--flows-basicsV2-size-l);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:var(--flows-basicsV2-size-s);row-gap:var(--flows-basicsV2-size-l)}.flows_basicsV2_card_buttons_wrapper{flex:1;flex-basis:auto;display:flex;justify-content:flex-end}.flows_basicsV2_card_buttons_wrapper .flows_basicsV2_card_buttons{flex-wrap:wrap-reverse}.flows_basicsV2_card_buttons{display:flex;gap:var(--flows-basicsV2-size-s);flex-wrap:wrap}.flows_basicsV2_card_buttons button,.flows_basicsV2_modal_footer a{flex:1}.flows_basicsV2_card_dots{margin-top:var(--flows-basicsV2-size-xxl);display:flex;justify-content:center}.flows_basicsV2_card_close{position:absolute;top:var(--flows-basicsV2-size-xl);right:var(--flows-basicsV2-size-xl)}.flows_basicsV2_floating_checklist{position:fixed;z-index:var(--flows-basicsV2-zIndex);display:flex;flex-direction:column;gap:var(--flows-basicsV2-size-m);align-items:flex-start}.flows_basicsV2_floating_checklist[data-position=bottom-right]{right:var(--flows-basicsV2-size-l);bottom:var(--flows-basicsV2-size-l);flex-direction:column-reverse;align-items:flex-end}.flows_basicsV2_floating_checklist[data-position=bottom-left]{left:var(--flows-basicsV2-size-l);bottom:var(--flows-basicsV2-size-l);flex-direction:column-reverse}.flows_basicsV2_floating_checklist[data-position=top-right]{right:var(--flows-basicsV2-size-l);top:var(--flows-basicsV2-size-l);align-items:flex-end}.flows_basicsV2_floating_checklist[data-position=top-left]{left:var(--flows-basicsV2-size-l);top:var(--flows-basicsV2-size-l)}.flows_basicsV2_floating_checklist[data-position=top-right] .flows_basicsV2_floating_checklist_widget_button_chevron,.flows_basicsV2_floating_checklist[data-position=top-left] .flows_basicsV2_floating_checklist_widget_button_chevron{transform:rotate(180deg)}.flows_basicsV2_floating_checklist[data-position=top-right] .flows_basicsV2_floating_checklist_widget_button_chevron[data-open=true],.flows_basicsV2_floating_checklist[data-position=top-left] .flows_basicsV2_floating_checklist_widget_button_chevron[data-open=true]{transform:rotate(0)}.flows_basicsV2_floating_checklist_widget_button{cursor:pointer;display:flex;align-items:center;transition:background-color .12s ease-in-out,border-color .12s ease-in-out;font-family:var(--flows-basicsV2-font-family);font-size:var(--flows-basicsV2-button-font-size);line-height:var(--flows-basicsV2-button-line-height);font-weight:600;white-space:nowrap;gap:var(--flows-basicsV2-size-s);padding:var(--flows-basicsV2-size-s) var(--flows-basicsV2-size-m);border-radius:var(--flows-basicsV2-borderRadius-m);background-color:var(--flows-basicsV2-bg-primary);border:var(--flows-basicsV2-border-primary);color:var(--flows-basicsV2-fg-onPrimary);background-image:var(--flows-basicsV2-primary-button-gradient);box-shadow:var(--flows-basicsV2-primary-button-shadow)}.flows_basicsV2_floating_checklist_widget_button:hover{background-color:var(--flows-basicsV2-bg-primary-hover)}.flows_basicsV2_floating_checklist_widget_button_chevron{transition:transform .15s ease-in-out;flex-shrink:0}.flows_basicsV2_floating_checklist_widget_button_chevron[data-open=true]{transform:rotate(180deg)}.flows_basicsV2_floating_checklist_item_title{width:100%;text-align:left}.flows_basicsV2_floating_checklist_item_chevron{transition:transform .15s ease-in-out;flex-shrink:0}.flows_basicsV2_floating_checklist_item_chevron[data-expanded=true]{transform:rotate(180deg)}.flows_basicsV2_floating_checklist_popover{background-color:var(--flows-basicsV2-bg-default);border:var(--flows-basicsV2-border);color:var(--flows-basicsV2-fg-default);border-radius:var(--flows-basicsV2-borderRadius-l);box-shadow:var(--flows-basicsV2-shadow-large);position:relative;animation:flows-basicsV2-scaleIn .15s ease-out;max-width:var(--flows-basicsV2-floating-checklist-popover-maxWidth);max-height:calc(100vh - 86px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--flows-basicsV2-floating-checklist-scrollbar-color)}.flows_basicsV2_floating_checklist_popover[data-open=false]{animation:flows-basicsV2-scaleOut .15s ease-out;opacity:0}.flows_basicsV2_floating_checklist_header{padding:var(--flows-basicsV2-size-l);padding-bottom:0}.flows_basicsV2_floating_checklist_title{margin-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_floating_checklist_items{display:flex;flex-direction:column;gap:var(--flows-basicsV2-size-xs);padding-left:var(--flows-basicsV2-size-s);padding-right:var(--flows-basicsV2-size-s);padding-bottom:var(--flows-basicsV2-size-s)}.flows_basicsV2_floating_checklist_item{border:1px solid transparent;border-radius:var(--flows-basicsV2-borderRadius-m);overflow:hidden}.flows_basicsV2_floating_checklist_item[data-expanded=true]{border:var(--flows-basicsV2-border);background-color:var(--flows-basicsV2-bg-subtle)}.flows_basicsV2_floating_checklist_item_expand_button{width:100%;cursor:pointer;display:flex;gap:var(--flows-basicsV2-size-s);padding:var(--flows-basicsV2-size-m);align-items:center;font-size:var(--flows-basicsV2-base-font-size);line-height:var(--flows-basicsV2-base-line-height);font-weight:var(--flows-basicsV2-title-font-weight)}.flows_basicsV2_floating_checklist_item_expand_button[data-expanded=false]:hover{background-color:var(--flows-basicsV2-bg-hover);transition:background-color .12s ease-in-out}.flows_basicsV2_floating_checklist_item_content{height:0;overflow:hidden;transition:height .15s ease-in-out}.flows_basicsV2_floating_checklist_item_content[data-expanded=true]{height:var(--flows-content-height)}.flows_basicsV2_floating_checklist_item_content_inner{padding:var(--flows-basicsV2-size-m);padding-top:0;display:flex;flex-direction:column;gap:var(--flows-basicsV2-size-s)}.flows_basicsV2_floating_checklist_item_buttons{display:flex;gap:var(--flows-basicsV2-size-s)}.flows_basicsV2_floating_checklist_close{position:absolute;top:var(--flows-basicsV2-size-l);right:var(--flows-basicsV2-size-l)}.flows_basicsV2_floating_checklist_item_indicator{width:16px;height:16px;border-radius:50%;border:var(--flows-basicsV2-border-primary);flex-shrink:0}.flows_basicsV2_floating_checklist_item_indicator_completed{background-color:var(--flows-basicsV2-bg-primary);color:var(--flows-basicsV2-fg-onPrimary);display:flex;align-items:center;justify-content:center}.flows_basicsV2_floating_checklist_skip_button{display:flex;padding-right:var(--flows-basicsV2-size-m);padding-left:var(--flows-basicsV2-size-m);padding-top:var(--flows-basicsV2-size-s);padding-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_floating_checklist_progress{display:flex;align-items:center;gap:var(--flows-basicsV2-size-s);padding:0 var(--flows-basicsV2-size-l);padding-top:var(--flows-basicsV2-size-m);padding-bottom:var(--flows-basicsV2-size-s)}.flows_basicsV2_floating_checklist_progress_text{font-size:var(--flows-basicsV2-base-font-size);line-height:var(--flows-basicsV2-base-line-height);font-family:var(--flows-basicsV2-font-family);flex-shrink:0;margin:0}.flows_basicsV2_floating_checklist_completed{padding:0 var(--flows-basicsV2-size-l);padding-top:var(--flows-basicsV2-size-s);padding-bottom:var(--flows-basicsV2-size-l)}.flows_basicsV2_floating_checklist_completed_inner{display:flex;flex-direction:column;gap:var(--flows-basicsV2-size-xs);border:var(--flows-basicsV2-border);padding:var(--flows-basicsV2-size-l);border-radius:var(--flows-basicsV2-borderRadius-m);text-align:center;background-color:var(--flows-basicsV2-bg-subtle)}.flows_basicsV2_floating_checklist_completed_title{margin-bottom:var(--flows-basicsV2-size-xs)}.flows_basicsV2_floating_checklist_completed_button{margin-top:var(--flows-basicsV2-size-m)}