.state{--stateVisualSize:4em;--stateStrokeWidth:1;justify-content:center;align-items:center;gap:var(--spacing-sm);width:fit-content;max-width:100%;padding:var(--spacing-xl)0;text-align:center;color:var(--text-mute);flex-direction:column;margin:auto;display:flex}.state .stateVisual{width:var(--stateVisualSize);height:var(--stateVisualSize);flex:none;place-items:center;display:grid}.state .stateIcon{justify-content:center;align-items:center;display:flex}.state .stateIconAnimated{color:var(--primary)}.state .stateIconAnimated path{stroke:currentColor}.state .stateContent{align-items:center;gap:var(--spacing-2xs);flex-direction:column;max-width:100%;display:flex}.state .stateTitle{font-size:var(--font-sm);margin:0;font-weight:300}.state .stateDescription{max-width:20em;font-size:var(--font-sm);margin:0;font-weight:200;line-height:1.6}.state .stateActions{justify-content:center;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.state .stateActions .button .icon{opacity:1!important}.state .stateHint{max-width:24em;font-size:var(--font-sm);margin:0}.state .stateSpinner{width:var(--stateVisualSize);height:var(--stateVisualSize);color:var(--text,currentColor);flex:none;display:block;overflow:hidden}.state .stateSpinner .stateStill{display:none}.state .stateDots{direction:inherit;white-space:nowrap;unicode-bidi:isolate;flex:none;display:inline-flex}.state .stateDots span{opacity:0;text-align:center;flex:0 0 .3em;animation:2.4s ease-in-out infinite stateDot}.state .stateDots span:nth-child(2){animation-delay:.26s}.state .stateDots span:nth-child(3){animation-delay:.52s}.state.stateInline{align-items:center;gap:var(--spacing-2xs);vertical-align:middle;text-align:start;flex-direction:row;margin:0;padding:0;display:inline-flex}.state.stateInline .stateContent{flex-direction:row;align-items:baseline;display:inline-flex}.state.stateSm{--stateVisualSize:18px;gap:var(--spacing-2xs);padding:0}.state.stateLg{--stateVisualSize:5em}@keyframes stateDot{0%,12%,to{opacity:0}20%,65%{opacity:1}78%{opacity:0}}@media (prefers-reduced-motion:reduce){.state .stateSpinner .stateMotion{display:none}.state .stateSpinner .stateStill{display:initial}.state .stateDots span{opacity:1;animation:none}}