@layer m3-components{.m3-tabs{--_h:48px;--_h-top:64px;--_fs:14px;--_lh:20px;--_px:16px;--_ind-h:3px;width:100%;min-width:0;display:block}.m3-tabs[data-variant=secondary]{--_ind-h:2px}.m3-tabs__list{scrollbar-width:none;overscroll-behavior-x:contain;border-bottom:1px solid var(--md-sys-color-outline-variant);align-items:stretch;display:flex;position:relative;overflow:auto hidden}.m3-tabs__list::-webkit-scrollbar{display:none}.m3-tabs__list[data-edge-start]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 24px);mask-image:linear-gradient(90deg,#0000,#000 24px)}.m3-tabs__list[data-edge-end]{-webkit-mask-image:linear-gradient(270deg,#0000,#000 24px);mask-image:linear-gradient(270deg,#0000,#000 24px)}.m3-tabs__list[data-edge-start][data-edge-end]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000);mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000)}.m3-tabs__tab{--m3-sl:var(--md-sys-color-on-surface);--_c:var(--md-sys-color-on-surface-variant);--m3-icon-size:var(--md-sys-size-icon);min-width:90px;min-height:var(--_h);padding:0 var(--_px);color:var(--_c);cursor:pointer;-webkit-tap-highlight-color:transparent;font:500 var(--_fs)/var(--_lh) var(--md-ref-typeface-brand);letter-spacing:.1px;white-space:nowrap;transition:color var(--md-sys-motion-t-fx-small);border-radius:var(--md-sys-shape-corner-medium);background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;display:flex}.m3-tabs[data-fill] .m3-tabs__tab{flex:1 1 0}.m3-tabs[data-icons=top] .m3-tabs__tab{min-height:var(--_h-top)}.m3-tabs__tab[data-state=active]{--_c:var(--md-sys-color-primary);--m3-sl:var(--md-sys-color-primary)}.m3-tabs[data-variant=secondary] .m3-tabs__tab[data-state=active]{--_c:var(--md-sys-color-on-surface);--m3-sl:var(--md-sys-color-on-surface)}.m3-tabs__tab.m3-state:before{inset:4px 0}.m3-tabs__tab:focus-visible{outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:calc(-2px + -1 * var(--md-sys-focus-width))}.m3-tabs__tab:disabled{cursor:default;color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);pointer-events:none}.m3-tabs__content{align-items:center;gap:var(--md-sys-space-2);display:inline-flex}.m3-tabs__tab[data-icon=top] .m3-tabs__content{flex-direction:column;gap:2px}.m3-tabs__tab[data-icon=top] .m3-tabs__badge{position:absolute;inset-block-start:6px;inset-inline-start:calc(50% + 6px)}.m3-tabs__label{text-overflow:ellipsis;overflow:hidden}.m3-tabs__badge{border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-secondary-container);min-width:18px;height:18px;color:var(--md-sys-color-on-secondary-container);font:500 11px/18px var(--md-ref-typeface-brand);letter-spacing:.5px;text-align:center;font-variant-numeric:tabular-nums;padding-inline:5px}.m3-tabs__ind{--_dur:clamp(.12s * var(--md-sys-motion-scale), 1ms * (90 + 11 * sqrt(var(--_d,100))) * var(--md-sys-motion-scale), .25s * var(--md-sys-motion-scale));block-size:var(--_ind-h);inline-size:var(--_w,0);translate:var(--_x,0) 0;border-radius:var(--_ind-h) var(--_ind-h) 0 0;background:var(--md-sys-color-primary);pointer-events:none;position:absolute;inset-block-end:0;inset-inline-start:0}.m3-tabs[data-variant=secondary] .m3-tabs__ind{border-radius:0}.m3-tabs__ind[data-ready]{transition:translate var(--_dur) var(--md-sys-motion-ease-standard),inline-size var(--_dur) var(--md-sys-motion-ease-standard),opacity var(--md-sys-motion-t-fx-small)}.m3-tabs__panel{padding-top:var(--md-sys-gap-stack);gap:var(--md-sys-gap-stack);outline:none;grid-template-columns:minmax(0,1fr);align-content:start;display:grid}.m3-tabs__panel:focus-visible{outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-tabs__panel[data-state=active]{animation:m3-tabs-panel-in var(--md-sys-motion-t-fx-medium) both}@keyframes m3-tabs-panel-in{0%{opacity:0}}:root[data-motion=reduce] .m3-tabs__ind[data-ready]{transition:none}@media (prefers-reduced-motion:reduce){:root:not([data-motion=expressive]) .m3-tabs__ind[data-ready]{transition:none}}@media (forced-colors:active){.m3-tabs__ind{background:highlight}.m3-tabs__tab[data-state=active]{color:highlight}}}@layer m3-density{:root[data-density=compact] .m3-tabs{--_h:40px;--_h-top:54px;--_fs:13px;--_lh:18px;--_px:12px;--m3-icon-size:var(--md-sys-size-icon)}}
