.metrotabs-group{--metrotabs-accent:currentColor;--metrotabs-muted:color-mix(in srgb, currentColor 65%, transparent);--metrotabs-line:color-mix(in srgb, currentColor 12%, transparent);--metrotabs-radius:6px;margin-block:2em}.metrotabs-tablist{display:flex;flex-wrap:wrap;gap:.25rem;margin-block-end:1.5em}.metrotabs-tab-trigger{display:inline-flex;align-items:center;gap:.4em;padding:.55em 1em;border:0;background:none;color:var(--metrotabs-muted);font:inherit;font-weight:500;cursor:pointer;transition:color 0.15s,background-color 0.15s,border-color 0.15s;&:hover,&[aria-selected="true"]{color:inherit}&:focus-visible{outline:2px solid currentColor;outline-offset:-2px}}.tab-pane{scroll-margin-top:12em;&:focus-visible{outline:2px solid currentColor;outline-offset:4px}}.metrotabs-accordion-heading{display:none;margin:0;font-size:inherit;button{display:flex;justify-content:space-between;inline-size:100%;padding:.85em 0;border:0;border-block-end:1px solid var(--metrotabs-line);background:none;color:inherit;font:inherit;font-weight:600;text-align:start;cursor:pointer;&::after{content:"+"}&[aria-expanded="true"]::after{content:"\2212"}}}.metrotabs-group[data-mode="accordion"]{.metrotabs-tablist{display:none}.metrotabs-accordion-heading{display:block}.tab-pane{padding-block:1em}}.metrotabs-group.is-vertical:not([data-mode="accordion"]) .metro-tabs-block{display:grid;grid-template-columns:minmax(10rem,max-content) 1fr;gap:2rem;.metrotabs-tablist{grid-row:1 / span 999;flex-direction:column;align-self:start;margin:0}.metrotabs-tab-trigger{justify-content:start;text-align:start}}.metrotabs-group:is(.is-style-metro,:not([class*="is-style-"])){.metrotabs-tablist{gap:0;border-block-end:1px solid var(--metrotabs-line)}.metrotabs-tab-trigger{border-block-end:2px solid #fff0;margin-block-end:-1px;&[aria-selected="true"]{border-block-end-color:var(--metrotabs-accent)}}&.is-vertical .metrotabs-tablist{border-block-end:0;border-inline-start:1px solid var(--metrotabs-line);.metrotabs-tab-trigger{border-block-end:0;border-inline-start:2px solid #fff0;margin:0 0 0 -1px;&[aria-selected="true"]{border-inline-start-color:var(--metrotabs-accent)}}}}.metrotabs-group.is-style-pills .metrotabs-tab-trigger{border-radius:999px;&[aria-selected="true"]{background:color-mix(in srgb,currentColor 10%,transparent)}}.metrotabs-group.is-style-boxed{.metrotabs-tablist{gap:0;margin:0;border-block-end:1px solid var(--metrotabs-line)}.metrotabs-tab-trigger{border:1px solid #fff0;border-radius:var(--metrotabs-radius) var(--metrotabs-radius) 0 0;margin-block-end:-1px;&[aria-selected="true"]{border-color:var(--metrotabs-line);border-block-end-color:Canvas;background:Canvas}}&:not([data-mode="accordion"]) .tab-pane{padding:1.5em;border:1px solid var(--metrotabs-line);border-block-start:0}}.metrotabs-group.is-style-segmented .metrotabs-tablist{display:inline-flex;gap:2px;padding:3px;border-radius:calc(var(--metrotabs-radius) + 3px);background:color-mix(in srgb,currentColor 8%,transparent);.metrotabs-tab-trigger{border-radius:var(--metrotabs-radius);&[aria-selected="true"]{background:Canvas;box-shadow:0 1px 2px rgb(0 0 0 / .12)}}}@media (prefers-reduced-motion:no-preference){.metrotabs-group[data-animation="fade"] .tab-pane:not([hidden]){animation:metrotabs-fade 0.2s ease-out}.metrotabs-group[data-animation="slide"] .tab-pane:not([hidden]){animation:metrotabs-slide 0.25s ease-out}}@keyframes metrotabs-fade{from{opacity:0}}@keyframes metrotabs-slide{from{opacity:0;translate:0 .5rem}}.metrotabs-orphan>summary{cursor:pointer;font-weight:600}