@layer components{.tab-list{box-sizing:border-box;background:var(--muted);border-radius:var(--radius-lg);grid-auto-columns:minmax(0,max-content);grid-auto-flow:column;align-items:center;gap:.125rem;min-width:0;max-width:100%;padding:.25rem;display:inline-grid;&:where([data-size=xs]) .tab-trigger{padding-block:.25rem;padding-inline:.5rem;font-size:.75rem}&:where([data-size=sm]) .tab-trigger{padding-block:.3125rem;padding-inline:.625rem;font-size:.8125rem}&:where([data-size=md]) .tab-trigger{padding-block:.375rem;padding-inline:.75rem;font-size:.875rem}&:where([data-size=lg]) .tab-trigger{padding-block:.5rem;padding-inline:1rem;font-size:1rem}&:where([data-size=xl]) .tab-trigger{padding-block:.625rem;padding-inline:1.25rem;font-size:1.125rem}&[data-variant=line][data-size=xs] .tab-trigger{padding-block:.25rem;padding-inline:.5rem}&[data-variant=line][data-size=sm] .tab-trigger{padding-block:.375rem;padding-inline:.75rem}&[data-variant=line][data-size=md] .tab-trigger{padding-block:.5rem;padding-inline:1rem}&[data-variant=line][data-size=lg] .tab-trigger{padding-block:.625rem;padding-inline:1.25rem}&[data-variant=line][data-size=xl] .tab-trigger{padding-block:.75rem;padding-inline:1.5rem}&[data-variant=line]{border-bottom:1px solid var(--border);background:0 0;border-radius:0;gap:0;padding:0;& .tab-trigger{border-bottom:2px solid #0000;border-radius:0;margin-bottom:-1px;padding-block:.5rem;padding-inline:1rem;&[aria-selected=true]{color:var(--foreground);border-bottom-color:var(--primary);box-shadow:none;background:0 0}}}&[aria-orientation=vertical]{grid-auto-rows:minmax(0,max-content);grid-auto-columns:auto;grid-auto-flow:row;align-items:stretch;width:auto;& .tab-trigger{text-align:start}}}.tab-trigger{text-overflow:ellipsis;white-space:nowrap;text-align:center;border-radius:calc(var(--radius) * .6);min-width:0;min-height:0;color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;outline:none;padding-block:.375rem;padding-inline:.75rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:all .15s;display:block;overflow:hidden;& :is(svg,img,.tab-icon){vertical-align:middle;margin-inline-end:.5em;line-height:1;display:inline-block}& :is(svg,img){block-size:1em;inline-size:1em;translate:0 -.0625em}&[aria-selected=true]{background:var(--background);color:var(--foreground);box-shadow:0 1px 3px oklch(0% 0 0/.08), 0 0 0 1px var(--border)}&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}&:disabled{cursor:not-allowed;opacity:.5}}.tabs{flex-direction:column;min-width:0;display:flex;&>.tab-list{align-self:flex-start}&[data-align=center]>.tab-list{align-self:center}&[data-align=end]>.tab-list{align-self:flex-end}&:where([data-side=bottom]){&>.tab-list{order:2}&>.tab-content{margin-top:0;margin-bottom:.75rem}}&:where(:not([data-side]):has(>.tab-list[aria-orientation=vertical])){flex-direction:row;align-items:flex-start;gap:1rem;&>.tab-list{max-width:40%}&>.tab-content{flex:1;min-width:0;margin:0}&:dir(rtl){flex-direction:row-reverse}}&:where([data-side=left],[data-side=right]){grid-template-columns:auto minmax(0,1fr);grid-template-areas:"list panel";column-gap:1rem;display:grid;&>.tab-list{grid-area:list;grid-auto-rows:minmax(0,max-content);grid-auto-columns:auto;grid-auto-flow:row;align-content:start;align-self:stretch;align-items:stretch;max-width:none;height:0;min-height:100%}&[data-align=center]>.tab-list{align-content:center}&[data-align=end]>.tab-list{align-content:end}&>.tab-content{grid-area:panel;min-width:0;margin:0}&>.tab-list .tab-trigger{writing-mode:vertical-rl;text-orientation:sideways;text-align:center;& :is(svg,img){rotate:90deg}}}&:where([data-side=right]),&:where([data-side=left]):dir(rtl){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"panel list"}&:where([data-side=right]):dir(rtl){grid-template-columns:auto minmax(0,1fr);grid-template-areas:"list panel"}@supports (writing-mode:sideways-lr){&:where([data-side=left])>.tab-list .tab-trigger{writing-mode:sideways-lr;& :is(svg,img){rotate:-90deg}}}}.tabs[data-side=bottom]>.tab-list[data-variant=line]{border-bottom:none;border-top:1px solid var(--border);& .tab-trigger{border-top:2px solid #0000;border-bottom:none;margin-top:-1px;margin-bottom:0;&[aria-selected=true]{border-top-color:var(--primary)}}}.tabs:is([data-side=left],[data-side=right],:not([data-side]):has(>.tab-list[aria-orientation=vertical]))>.tab-list[data-variant=line]{border-bottom:none;& .tab-trigger{border-bottom:none;margin-bottom:0}}.tabs:is([data-side=left],:not([data-side]):has(>.tab-list[aria-orientation=vertical]))>.tab-list[data-variant=line]{border-right:1px solid var(--border);& .tab-trigger{border-right:2px solid #0000;margin-right:-1px;&[aria-selected=true]{border-right-color:var(--primary)}}}.tabs[data-side=right]>.tab-list[data-variant=line]{border-left:1px solid var(--border);& .tab-trigger{border-left:2px solid #0000;margin-left:-1px;&[aria-selected=true]{border-left-color:var(--primary)}}}.tab-list[data-variant=attached]{z-index:1;background:0 0;border-radius:0;gap:.25rem;padding:0;position:relative;& .tab-trigger{border:1px solid var(--border);background:var(--muted);box-shadow:none;border-radius:var(--radius-md) var(--radius-md) 0 0;&[aria-selected=true]{background:var(--card);color:var(--card-foreground);box-shadow:none;border-bottom-color:var(--card)}}}.tabs:has(>.tab-list[data-variant=attached]){gap:0;&>.tab-content{margin:0}&>.tab-list[data-variant=attached]{margin-bottom:-1px;max-width:calc(100% - var(--radius-xl));margin-inline-end:var(--radius-xl)}&[data-align=end]>.tab-list[data-variant=attached]{margin-inline:var(--radius-xl) 0}&[data-align=center]>.tab-list[data-variant=attached]{margin-inline:var(--radius-xl);max-width:calc(100% - 2 * var(--radius-xl))}&[data-side=bottom]>.tab-list[data-variant=attached]{margin-top:-1px;margin-bottom:0;& .tab-trigger{border-radius:0 0 var(--radius-md) var(--radius-md);&[aria-selected=true]{border-bottom-color:var(--border);border-top-color:var(--card)}}}&:is([data-side=left],[data-side=right],:not([data-side]):has(>.tab-list[aria-orientation=vertical])){&>.tab-list[data-variant=attached]{max-width:none;padding-bottom:var(--radius-xl);grid-auto-rows:minmax(0,max-content);grid-auto-columns:auto;grid-auto-flow:row;margin-block:0;margin-inline:0;& .tab-trigger{width:100%}}&[data-align=end]>.tab-list[data-variant=attached]{padding-block:var(--radius-xl) 0}&[data-align=center]>.tab-list[data-variant=attached]{padding-block:var(--radius-xl)}}&:not([data-side]):has(>.tab-list[aria-orientation=vertical]){&>.tab-list[data-variant=attached]{max-width:40%}&>.tab-content:not([hidden]){flex-direction:column;align-self:stretch;display:flex;&>.card{flex:1}}}&:is([data-side=left],:not([data-side]):has(>.tab-list[aria-orientation=vertical]))>.tab-list[data-variant=attached]{margin-right:-1px;& .tab-trigger{border-radius:var(--radius-md) 0 0 var(--radius-md);&[aria-selected=true]{border-bottom-color:var(--border);border-right-color:var(--card)}}}&[data-side=right]>.tab-list[data-variant=attached]{margin-left:-1px;& .tab-trigger{border-radius:0 var(--radius-md) var(--radius-md) 0;&[aria-selected=true]{border-bottom-color:var(--border);border-left-color:var(--card)}}}&:not([data-side]):not(:has(>.tab-list[aria-orientation=vertical])):not([data-align=center]):not([data-align=end])>.tab-content>.card{border-start-start-radius:0}&:not([data-side]):not(:has(>.tab-list[aria-orientation=vertical]))[data-align=end]>.tab-content>.card{border-start-end-radius:0}&[data-side=top]:not([data-align=center]):not([data-align=end])>.tab-content>.card{border-start-start-radius:0}&[data-side=top][data-align=end]>.tab-content>.card{border-start-end-radius:0}&[data-side=bottom]:not([data-align=center]):not([data-align=end])>.tab-content>.card{border-end-start-radius:0}&[data-side=bottom][data-align=end]>.tab-content>.card{border-end-end-radius:0}&:is([data-side=left],:not([data-side]):has(>.tab-list[aria-orientation=vertical])):not([data-align=center]):not([data-align=end])>.tab-content>.card{border-top-left-radius:0}&:is([data-side=left],:not([data-side]):has(>.tab-list[aria-orientation=vertical]))[data-align=end]>.tab-content>.card{border-bottom-left-radius:0}&[data-side=right]:not([data-align=center]):not([data-align=end])>.tab-content>.card{border-top-right-radius:0}&[data-side=right][data-align=end]>.tab-content>.card{border-bottom-right-radius:0}}.tab-content{margin-top:.75rem;&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}&[hidden]{display:none}}@media (prefers-reduced-motion:reduce){.tab-trigger{transition:none}}@media (forced-colors:active){.tab-trigger[aria-selected=true]{box-shadow:none;border:2px solid highlight}.tab-trigger:disabled{color:graytext}.tab-list[data-variant=line] .tab-trigger[aria-selected=true]{border:none;border-bottom:2px solid highlight}}}