.component-example-preview{background-color:#0000;background-image:radial-gradient(circle,color-mix(in srgb,var(--jkl-color-border-subdued)40%,transparent)1px,transparent 1px);border-block:1px solid var(--jkl-color-border-subdued);align-items:center;gap:var(--jkl-spacing-m);margin-inline:calc(-1*var(--jkl-spacing-m));min-height:12svh;padding:var(--jkl-spacing-xl)var(--jkl-spacing-m);background-size:20px 20px;flex-wrap:wrap;justify-content:center;display:flex}.component-example-size-toolbar{margin-inline:calc(-1*var(--jkl-spacing-m));padding:var(--jkl-spacing-m)}.component-example-header{padding-block-end:var(--jkl-spacing-s)}
.migration-example__header{align-items:center;gap:var(--jkl-spacing-s);flex-wrap:wrap;display:flex}.migration-example__header h3{margin-block:0}.migration-example__steps{margin-block:var(--jkl-spacing-m)0;counter-reset:migration-step;flex-direction:column;padding:0;list-style:none;display:flex}.migration-example__step{gap:var(--jkl-spacing-s)var(--jkl-spacing-m);grid-template-columns:2rem 1fr;display:grid;position:relative}.migration-example__step:not(:last-child):after{content:"";background:var(--jkl-color-border-default);width:2px;position:absolute;top:2rem;bottom:0;left:calc(1rem - 1px)}.migration-example__step:before{counter-increment:migration-step;content:counter(migration-step);background:var(--jkl-color-background-container);border:2px solid var(--jkl-color-border-default);width:2rem;height:2rem;font-size:var(--jkl-font-size-s);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;line-height:1;display:flex}.migration-example__step--instruction{padding-block:var(--jkl-spacing-xs)}.migration-example__step--instruction:before{background:var(--jkl-color-background-default);border-style:dashed}.migration-example__step-label{grid-column:2;align-self:center;font-weight:600}.migration-example__step-label.muted{font-weight:400}.migration-example .code-block{width:100%;grid-column:2;margin-block-end:var(--jkl-spacing-m)}