.md-tabs{display:flex;width:100%}.md-tabs-example{width:100%}.md-tab{--_tab-state-color: transparent;--_tab-state-opacity: 0;--_tab-background-state-color: transparent;--_tab-background-state-opacity: 0;--_button-rest-shape: var(--_tab-shape);--_button-pressed-shape: var(--_tab-shape);--_button-state-color: var(--_tab-state-color);--_button-state-opacity: var(--_tab-state-opacity);--_button-background-state-color: var(--_tab-background-state-color);--_button-background-state-opacity: var(--_tab-background-state-opacity);--_button-pressed-state-color: var(--_tab-pressed-state-color);--_button-pressed-state-opacity: var(--_tab-pressed-state-opacity);--_elevation-level: var(--_tab-elevation);--_shadow-color: var(--_tab-shadow, var(--md-sys-color-shadow));position:relative;isolation:isolate;display:grid;grid-template-columns:max-content;grid-template-rows:1fr;justify-content:center;flex:1;min-width:var(--md-sys-measurement-space600);height:var(--_tab-height);box-sizing:border-box;padding:0 var(--md-sys-measurement-space200);border:0;border-bottom:var(--_tab-divider-height) solid var(--_tab-divider);border-radius:var(--_tab-shape);background:var(--_tab-container);color:var(--_tab-label);font-family:var(--_tab-font-family);font-size:var(--_tab-font-size);font-weight:var(--_tab-font-weight);line-height:var(--_tab-line-height);letter-spacing:var(--_tab-tracking);cursor:pointer}.md-tab-content{grid-area:1 / 1;display:flex;align-items:center;align-self:center;justify-self:center;gap:var(--md-sys-measurement-space50);white-space:nowrap}.md-tab-content>svg{flex:none;width:var(--_tab-icon-size);height:var(--_tab-icon-size);color:var(--_tab-icon)}.md-tabs[data-variant=primary][data-control=icon-label] .md-tab-content{flex-direction:column}.md-tab-active-indicator{grid-area:1 / 1;align-self:end;width:100%;height:var(--_tab-indicator-height);margin-bottom:calc(-1 * var(--_tab-divider-height));border-radius:var(--_tab-indicator-shape, var(--md-sys-shape-corner-none));background:var(--_tab-indicator);opacity:0;transform-origin:left center;pointer-events:none}.md-tab[aria-selected=true] .md-tab-active-indicator{opacity:1}.md-tabs[data-variant=secondary] .md-tab{grid-template-columns:1fr;padding-inline:0}.md-tabs[data-variant=secondary] .md-tab-content{padding-inline:var(--md-sys-measurement-space200);gap:var(--md-sys-measurement-space100)}.md-tab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--_button-background-state-color);opacity:var(--_button-background-state-opacity);pointer-events:none;transition:opacity 15ms linear,background-color 15ms linear}.md-tab:is(:focus-visible,[data-component-state=focused]){outline:var(--_tab-focus-width) solid var(--_tab-focus-color);outline-offset:var(--_tab-focus-offset);z-index:1}.md-tab[data-component-state=pressed]{--_button-background-state-color: var(--_button-state-color);--_button-background-state-opacity: var(--_button-state-opacity)}@media(prefers-reduced-motion:reduce){.md-tab::before{transition:none}}@media(forced-colors:active){.md-tab::before{display:none}.md-tab[aria-selected=true]{border-bottom-color:Highlight}}.md-tabs:where([data-variant=primary]) .md-tab{--_tab-indicator: var(--md-comp-primary-navigation-tab-active-indicator-color);--_tab-indicator-height: var(--md-comp-primary-navigation-tab-active-indicator-height);--_tab-indicator-shape: var(--md-comp-primary-navigation-tab-active-indicator-shape);--_tab-container: var(--md-comp-primary-navigation-tab-container-color);--_tab-elevation: var(--md-comp-primary-navigation-tab-container-elevation);--_tab-height: var(--md-comp-primary-navigation-tab-container-height);--_tab-shape: var(--md-comp-primary-navigation-tab-container-shape);--_tab-divider: var(--md-comp-primary-navigation-tab-divider-color);--_tab-divider-height: var(--md-comp-primary-navigation-tab-divider-height);--_tab-focus-color: var(--md-comp-primary-navigation-tab-focus-indicator-color);--_tab-focus-offset: var(--md-comp-primary-navigation-tab-focus-indicator-outline-offset);--_tab-focus-width: var(--md-comp-primary-navigation-tab-focus-indicator-thickness);--_tab-icon-size: var(--md-comp-primary-navigation-tab-with-icon-icon-size);--_tab-font-family: var(--md-comp-primary-navigation-tab-with-label-text-label-text-font);--_tab-line-height: var(--md-comp-primary-navigation-tab-with-label-text-label-text-line-height);--_tab-font-size: var(--md-comp-primary-navigation-tab-with-label-text-label-text-size);--_tab-tracking: var(--md-comp-primary-navigation-tab-with-label-text-label-text-tracking);--_tab-font-weight: var(--md-comp-primary-navigation-tab-with-label-text-label-text-weight)}.md-tabs:where([data-variant=primary]):where([data-control=icon-label]) .md-tab{--_tab-height: var(--md-comp-primary-navigation-tab-with-icon-and-label-text-container-height)}.md-tabs:where([data-variant=secondary]) .md-tab{--_tab-indicator: var(--md-comp-secondary-navigation-tab-active-indicator-color);--_tab-indicator-height: var(--md-comp-secondary-navigation-tab-active-indicator-height);--_tab-container: var(--md-comp-secondary-navigation-tab-container-color);--_tab-elevation: var(--md-comp-secondary-navigation-tab-container-elevation);--_tab-height: var(--md-comp-secondary-navigation-tab-container-height);--_tab-shadow: var(--md-comp-secondary-navigation-tab-container-shadow-color);--_tab-shape: var(--md-comp-secondary-navigation-tab-container-shape);--_tab-divider: var(--md-comp-secondary-navigation-tab-divider-color);--_tab-divider-height: var(--md-comp-secondary-navigation-tab-divider-height);--_tab-focus-color: var(--md-comp-secondary-navigation-tab-focus-indicator-color);--_tab-focus-offset: var(--md-comp-secondary-navigation-tab-focus-indicator-outline-offset);--_tab-focus-width: var(--md-comp-secondary-navigation-tab-focus-indicator-thickness);--_tab-font-family: var(--md-comp-secondary-navigation-tab-label-text-font);--_tab-line-height: var(--md-comp-secondary-navigation-tab-label-text-line-height);--_tab-font-size: var(--md-comp-secondary-navigation-tab-label-text-size);--_tab-tracking: var(--md-comp-secondary-navigation-tab-label-text-tracking);--_tab-font-weight: var(--md-comp-secondary-navigation-tab-label-text-weight);--_tab-icon-size: var(--md-comp-secondary-navigation-tab-with-icon-icon-size);--_tab-pressed-state-color: var(--md-comp-secondary-navigation-tab-pressed-state-layer-color);--_tab-pressed-state-opacity: var(--md-comp-secondary-navigation-tab-pressed-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-active-icon-color);--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-active-label-text-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-inactive-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-inactive-label-text-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_tab-label: var(--md-comp-secondary-navigation-tab-active-label-text-color);--_tab-icon: var(--md-comp-secondary-navigation-tab-with-icon-active-icon-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_tab-label: var(--md-comp-secondary-navigation-tab-inactive-label-text-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_tab-icon: var(--md-comp-secondary-navigation-tab-with-icon-inactive-icon-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_tab-label: var(--md-comp-secondary-navigation-tab-hover-label-text-color);--_tab-state-color: var(--md-comp-secondary-navigation-tab-hover-state-layer-color);--_tab-background-state-color: var(--md-comp-secondary-navigation-tab-hover-state-layer-color);--_tab-state-opacity: var(--md-comp-secondary-navigation-tab-hover-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-secondary-navigation-tab-hover-state-layer-opacity);--_tab-icon: var(--md-comp-secondary-navigation-tab-with-icon-hover-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_tab-state-color: var(--md-comp-primary-navigation-tab-active-hover-state-layer-color);--_tab-background-state-color: var(--md-comp-primary-navigation-tab-active-hover-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-active-hover-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-primary-navigation-tab-active-hover-state-layer-opacity);--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-active-hover-icon-color);--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-active-hover-label-text-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_tab-state-color: var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-color);--_tab-background-state-color: var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-inactive-hover-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-inactive-hover-label-text-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_tab-label: var(--md-comp-secondary-navigation-tab-focus-label-text-color);--_tab-state-color: var(--md-comp-secondary-navigation-tab-focus-state-layer-color);--_tab-background-state-color: var(--md-comp-secondary-navigation-tab-focus-state-layer-color);--_tab-state-opacity: var(--md-comp-secondary-navigation-tab-focus-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-secondary-navigation-tab-focus-state-layer-opacity);--_tab-icon: var(--md-comp-secondary-navigation-tab-with-icon-focus-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_tab-state-color: var(--md-comp-primary-navigation-tab-active-focus-state-layer-color);--_tab-background-state-color: var(--md-comp-primary-navigation-tab-active-focus-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-active-focus-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-primary-navigation-tab-active-focus-state-layer-opacity);--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-active-focus-icon-color);--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-active-focus-label-text-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_tab-state-color: var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-color);--_tab-background-state-color: var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-opacity);--_tab-background-state-opacity: var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-inactive-focus-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-inactive-focus-label-text-color)}.md-tabs:where([data-variant=secondary]) .md-tab:where(:where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_tab-label: var(--md-comp-secondary-navigation-tab-pressed-label-text-color);--_tab-state-color: var(--md-comp-secondary-navigation-tab-pressed-state-layer-color);--_tab-state-opacity: var(--md-comp-secondary-navigation-tab-pressed-state-layer-opacity);--_tab-icon: var(--md-comp-secondary-navigation-tab-with-icon-pressed-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_tab-state-color: var(--md-comp-primary-navigation-tab-active-pressed-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-active-pressed-state-layer-opacity);--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-active-pressed-icon-color);--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-active-pressed-label-text-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)){--_tab-pressed-state-color: var(--md-comp-primary-navigation-tab-active-pressed-state-layer-color);--_tab-pressed-state-opacity: var(--md-comp-primary-navigation-tab-active-pressed-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_tab-state-color: var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-color);--_tab-state-opacity: var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_tab-pressed-state-color: var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-color);--_tab-pressed-state-opacity: var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-opacity)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_tab-icon: var(--md-comp-primary-navigation-tab-with-icon-inactive-pressed-icon-color)}.md-tabs:where([data-variant=primary]) .md-tab:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_tab-label: var(--md-comp-primary-navigation-tab-with-label-text-inactive-pressed-label-text-color)}