@mantine/core/styles/Stepper.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {.m-cbb4ea7e{--stepper-icon-size-xs:calc(2.125rem*var(--mantine-scale));--stepper-icon-size-sm:calc(2.25rem*var(--mantine-scale));--stepper-icon-size-md:calc(2.625rem*var(--mantine-scale));--stepper-icon-size-lg:calc(3rem*var(--mantine-scale));--stepper-icon-size-xl:calc(3.25rem*var(--mantine-scale));--stepper-icon-size:var(--stepper-icon-size-md);--stepper-color:var(--mantine-primary-color-filled);--stepper-content-padding:var(--mantine-spacing-md);--stepper-spacing:var(--mantine-spacing-md);--stepper-radius:calc(62.5rem*var(--mantine-scale));--stepper-fz:var(--mantine-font-size-md)}.m-aaf89d0b{align-items:var(--_steps-align-items,center);display:flex;flex-direction:var(--_steps-direction);flex-wrap:var(--_steps-wrap,nowrap);gap:var(--_steps-gap)}.m-aaf89d0b[data-wrap]{--_steps-wrap:wrap;--_steps-gap:var(--mantine-spacing-md) 0}.m-aaf89d0b[data-orientation=vertical]{--_steps-direction:column}.m-aaf89d0b[data-orientation=vertical][data-icon-position=left]{--_steps-align-items:flex-start}.m-aaf89d0b[data-orientation=vertical][data-icon-position=right]{--_steps-align-items:flex-end}.m-aaf89d0b[data-orientation=horizontal]{--_steps-direction:row}.m-2a371ac9{--_separator-offset:calc(var(--stepper-icon-size)/2 - 0.0625rem*var(--mantine-scale));background-color:var(--_separator-bg);flex:1;height:var(--_separator-height);margin:var(--_separator-mt) var(--_separator-mr) var(--_separator-mb) var(--_separator-ml);transition:background-color .15s ease;width:var(--_separator-width)}[data-mantine-color-scheme=light] .m-2a371ac9{--_separator-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2a371ac9{--_separator-bg:var(--mantine-color-dark-2)}.m-2a371ac9[data-active]{--_separator-bg:var(--stepper-color)}.m-2a371ac9[data-orientation=horizontal]{--_separator-height:calc(0.125rem*var(--mantine-scale));--_separator-ml:var(--mantine-spacing-md);--_separator-mr:var(--mantine-spacing-md);--_separator-mt:0;--_separator-mb:0}.m-2a371ac9[data-orientation=vertical]{--_separator-width:calc(0.125rem*var(--mantine-scale));--_separator-mt:calc(var(--mantine-spacing-xs)/2);--_separator-mb:calc(var(--mantine-spacing-xs) - 0.125rem*var(--mantine-scale))}.m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-2a371ac9[data-orientation=vertical][data-icon-position=right],[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:0;--_separator-mr:var(--_separator-offset)}[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=right]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-78da155d{padding-top:var(--stepper-content-padding)}.m-cbb57068{--_step-color:var(--step-color,var(--stepper-color));cursor:var(--_step-cursor,default);display:flex;flex-direction:var(--_step-direction)}.m-cbb57068[data-allow-click]{--_step-cursor:pointer}.m-cbb57068[data-icon-position=left]{--_step-direction:row}.m-cbb57068[data-icon-position=right]{--_step-direction:row-reverse}.m-f56b1e2c{align-items:center;flex-direction:var(--_step-direction)}.m-833edb7e{--_separator-spacing:calc(var(--mantine-spacing-xs)/2);justify-content:flex-start;margin-top:var(--_step-mt,var(--_separator-spacing));min-height:calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--_separator-spacing));overflow:hidden}.m-833edb7e:first-of-type{--_step-mt:0}.m-833edb7e:last-of-type .m-6496b3f3{display:none}.m-818e70b{position:relative}.m-6496b3f3{border-left:calc(.125rem*var(--mantine-scale)) solid var(--_separator-border-color);height:100vh;left:calc(var(--stepper-icon-size)/2);position:absolute;top:calc(var(--stepper-icon-size) + var(--_separator-spacing))}[data-mantine-color-scheme=light] .m-6496b3f3{--_separator-border-color:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-6496b3f3{--_separator-border-color:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-6496b3f3[data-active]{--_separator-border-color:var(--stepper-color)}.m-1959ad01{align-items:center;background-color:var(--_step-icon-bg);border:calc(.125rem*var(--mantine-scale)) solid var(--_step-icon-border-color);border-radius:var(--stepper-radius);color:var(--_step-icon-color);display:flex;font-size:var(--stepper-fz);font-weight:700;height:var(--stepper-icon-size);justify-content:center;min-height:var(--stepper-icon-size);min-width:var(--stepper-icon-size);position:relative;transition:background-color .15s ease,border-color .15s ease;width:var(--stepper-icon-size)}[data-mantine-color-scheme=light] .m-1959ad01{--_step-icon-bg:var(--mantine-color-gray-1);--_step-icon-border-color:var(--mantine-color-gray-1);--_step-icon-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1959ad01{--_step-icon-bg:var(--mantine-color-dark-5);--_step-icon-border-color:var(--mantine-color-dark-5);--_step-icon-color:var(--mantine-color-dark-1)}[data-mantine-color-scheme] .m-1959ad01[data-progress]{--_step-icon-border-color:var(--_step-color)}[data-mantine-color-scheme] .m-1959ad01[data-completed]{--_step-icon-color:var(--stepper-icon-color,var(--mantine-color-white));--_step-icon-bg:var(--_step-color);--_step-icon-border-color:var(--_step-color)}.m-a79331dc{align-items:center;color:var(--stepper-icon-color,var(--mantine-color-white));display:flex;inset:0;justify-content:center;position:absolute}.m-1956aa2a{display:flex;flex-direction:column;margin-left:var(--_step-body-ml);margin-right:var(--_step-body-mr);margin-top:var(--_step-body-mt);text-align:var(--_step-body-ta)}.m-1956aa2a[data-icon-position=left]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=left]{--_step-body-ta:right;--_step-body-ml:0;--_step-body-mr:var(--mantine-spacing-sm)}.m-1956aa2a[data-icon-position=right]{--_step-body-ta:right;--_step-body-mr:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=right]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm);--_step-body-mr:0}.m-12051f6c{font-size:var(--stepper-fz);font-weight:500;line-height:1}.m-164eea74{color:var(--mantine-color-dimmed);font-size:calc(var(--stepper-fz) - .125rem*var(--mantine-scale));line-height:1;margin-bottom:calc(var(--stepper-spacing)/3);margin-top:calc(var(--stepper-spacing)/3)}}