@layer components{.tabs_wrap{--_dir:1;--_interval:6s;--_slide:.5s;gap:var(--space-7);width:100%;display:grid;&.side{@media (width>=48rem){grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}}}.tabs_bar{flex-direction:column;min-width:0;display:flex}.tabs_links{scrollbar-width:none;min-width:0;display:flex;overflow-x:auto;.tabs_wrap.side &{gap:var(--space-2);flex-direction:column;overflow-x:visible}}.tabs_wrap:not(.underline,.side){& .tabs_bar{align-items:center}& .tabs_links{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid;&:has(>:only-child){grid-template-columns:minmax(0,1fr)}&:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}align-items:stretch;gap:var(--space-1);padding:var(--space-1);background-color:var(--cream-40);border:var(--border-width) solid var(--border);border-radius:var(--radius-small);overflow-x:visible;@media (width>=48rem){flex-wrap:wrap;justify-content:center;width:auto;display:inline-flex}}& .tabs_link{min-height:2.75rem;padding:var(--space-2) var(--space-4);background-color:rgb(var(--midnight-eagle-rgb) / 0);border-radius:var(--radius-sm);color:var(--midnight-eagle-120);font-family:var(--font-sans);font-size:.875rem;font-weight:var(--weight-semibold);text-align:center;text-wrap:balance;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);justify-content:center;align-items:center;line-height:1.2;display:flex;@media (width>=48rem){flex:none}@media (hover:hover){&:hover{background-color:var(--midnight-eagle-a06)}}&.is-active{background-color:var(--midnight-eagle-120);color:var(--cream-40)}&:focus-visible{outline:var(--focus-width) solid currentcolor;outline-offset:.125rem}}}.theme-dark .tabs_wrap:not(.underline,.side){& .tabs_links{background-color:var(--white-a06);border-color:rgb(var(--white-rgb) / .14)}& .tabs_link{color:var(--white-a75);@media (hover:hover){&:hover{background-color:var(--white-a10);color:var(--color-white)}}&.is-active{background-color:var(--opal-120);color:var(--color-white)}}}.tabs_wrap.underline .tabs_links{border-bottom:var(--border-width) solid var(--midnight-eagle-a15)}.tabs_link{.tabs_wrap.underline &{min-width:4.5rem;min-height:2.75rem;padding:.75rem var(--space-2);text-wrap:balance;flex:1 1 0;@media (width>=48rem){padding-inline:var(--space-4)}border-bottom:.125rem solid rgb(var(--midnight-eagle-rgb) / 0);color:var(--midnight-eagle-a55);text-align:center;transition:color var(--hover-duration) var(--hover-ease), border-color var(--hover-duration) var(--hover-ease);background:0 0;&.is-active{border-bottom-color:var(--text);color:var(--text)}@media (hover:hover){&:hover{color:var(--text)}}}.tabs_wrap.side &{min-width:0;padding:var(--space-3) var(--space-5);border:var(--border-width) solid var(--border);border-radius:var(--radius-round);text-align:start;flex:none;&.is-active{background-color:var(--text);color:var(--background)}}}.tabs_wrap.auto.underline{& .tabs_link.is-active{position:relative;&:after{content:"";inset-inline:0;bottom:calc(var(--border-width) * -1);height:var(--border-width);background-color:var(--text);transform-origin:0;position:absolute;scale:0 1}}&.running:not(.is-paused) .tabs_link.is-active{border-bottom-color:var(--border);&:after{animation:tabs-progress var(--_interval) linear forwards}}}@keyframes tabs-progress{0%{scale:0 1}to{scale:1}}.tabs_panels{min-width:0;display:grid;overflow:clip}.tabs_panels>*{opacity:0;visibility:hidden;min-width:0;transition:opacity var(--open-duration) var(--open-ease), visibility var(--open-duration) var(--open-ease);grid-area:1/1;.tabs_wrap:not(.is-ready) &:first-child,&.is-active{opacity:1;visibility:visible}}.stacki-designer .tabs_wrap.preview .tabs_panels{gap:var(--space-6);overflow:visible}.stacki-designer .tabs_wrap.preview .tabs_panels>*{opacity:1;visibility:visible;grid-area:auto;animation:none;translate:none}.tabs_wrap.auto[data-moved] .tabs_panels>*{&.is-active{animation:tabs-in var(--_slide) var(--open-ease) both}&.is-leaving{visibility:visible;animation:tabs-out var(--_slide) var(--open-ease) both}}@keyframes tabs-in{0%{translate:calc(var(--_dir) * 100%) 0;opacity:0}to{opacity:1;translate:0}}@keyframes tabs-out{0%{opacity:1;translate:0}to{translate:calc(var(--_dir) * -100%) 0;opacity:0}}.tabs_controls{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.tabs_steps{gap:var(--space-2);display:flex}}