welcome-ui/dist/Stepper.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_e6wyb_2{position:relative;gap:var(--stepper-gap-content);padding-block:var(--stepper-padding-block);padding-inline:var(--stepper-padding-inline);border-width:var(--stepper-border-width-default);border-radius:var(--stepper-border-radius);border-color:var(--stepperBorderColor, var(--stepper-color-border-default));background-color:var(--stepper-color-background);transition-duration:var(--duration-fast);box-shadow:var(--stepperBoxShadow, var(--elevation-10));overflow:hidden}._wrapper_e6wyb_16{display:flex;align-items:center;overflow-x:auto;border-style:solid;transition-property:border-color,box-shadow;transition-timing-function:ease-in-out}._wrapper_e6wyb_16 svg{width:var(--stepper-size-icon);height:var(--stepper-size-icon)}._wrapper_e6wyb_16._fade-left_e6wyb_28:before,._wrapper_e6wyb_16._fade-right_e6wyb_28:after{content:"";position:absolute;top:0;bottom:0;width:70px;pointer-events:none;z-index:1}._wrapper_e6wyb_16._fade-left_e6wyb_28:before{left:0;background:linear-gradient(to right,var(--stepper-color-background),transparent)}._wrapper_e6wyb_16._fade-right_e6wyb_28:after{right:0;background:linear-gradient(to left,var(--stepper-color-background),transparent)}._wrapper_e6wyb_16:hover{--stepperBorderColor: var(--stepper-color-border-hover);--stepperBoxShadow: var(--elevation-20)}._separator_e6wyb_49{flex-shrink:0;color:var(--stepper-color-icon-default)}._item_e6wyb_53{display:flex;align-items:center;flex-shrink:0;transition-property:background-color,border-color,color;transition-timing-function:ease-in-out;gap:var(--stepper-step-gap-content);padding-block:var(--stepper-step-padding-block);padding-inline:var(--stepper-step-padding-inline);border-width:var(--stepper-step-border-width-active);border-radius:var(--stepper-step-border-radius);transition-duration:var(--duration-medium);background-color:var(--stepperItemBackgroundColor, var(--stepper-step-color-background-unchecked-default));border-color:var(--stepperItemBorderColor, transparent);color:var(--stepperItemColor, var(--stepper-step-color-text-unchecked-default))}._item_e6wyb_53 svg{width:var(--stepper-step-size-icon);height:var(--stepper-step-size-icon);color:var(--stepperItemIconColor, var(--stepper-step-color-icon-unchecked-default))}._item_e6wyb_53[aria-current=true]{--stepperItemColor: var(--stepper-step-color-text-checked-default);--stepperItemBorderColor: var(--stepper-step-color-border-checked-default);--stepperItemBackgroundColor: var( --stepper-step-color-background-checked-default )}._item_e6wyb_53[aria-current=true] svg{--stepperItemIconColor: var(--stepper-step-color-icon-checked-default)}._item_e6wyb_53._clickable_e6wyb_87{cursor:pointer}._item_e6wyb_53._clickable_e6wyb_87:hover{--stepperItemColor: var(--stepper-step-color-text-unchecked-hover);--stepperItemBackgroundColor: var( --stepper-step-color-background-checked-hover )}._item_e6wyb_53._clickable_e6wyb_87:hover:not(._completed_e6wyb_96) svg{--stepperItemIconColor: var( --stepper-step-color-icon-unchecked-hover )}._item_e6wyb_53._clickable_e6wyb_87[aria-current=true]{--stepperItemColor: var(--stepper-step-color-text-checked-default);--stepperItemBackgroundColor: var( --stepper-step-color-background-checked-default );--stepperItemBorderColor: var( --stepper-step-color-border-checked-default )}._item_e6wyb_53._clickable_e6wyb_87[aria-current=true]:hover{--stepperItemBackgroundColor: var( --stepper-step-color-background-checked-hover );--stepperItemBorderColor: var( --stepper-step-color-border-checked-hover )}._item_e6wyb_53._clickable_e6wyb_87[aria-current=true]:not(._completed_e6wyb_96) svg{--stepperItemIconColor: var(--stepper-step-color-icon-checked-hover)}._item_e6wyb_53._completed_e6wyb_96 svg{--stepperItemIconColor: var(--stepper-step-color-icon-success)}}