:host{--_fg: var(--osg-container-color, var(--container-color));--_bg: var(--osg-container-bg, var(--container-bg));--_border: var(--osg-container-border-color, var(--container-border-color));--_radius: var(--osg-container-border-radius, var(--container-border-radius));--_shadow: var(--osg-container-shadow, var(--elevation-1));--_title-color: var(--osg-container-title-color, var(--container-title-color));--_title-bg: var(--osg-container-title-bg, var(--container-title-bg));--surface: raised;display:block;container-type:inline-size;color-scheme:inherit}@container style(--surface: raised){*{--surface-bg: var(--surface-bg-raised);--surface-color: var(--surface-color-raised);--surface-color-muted: light-dark(var(--gray-cool-60), var(--gray-cool-20));--surface-heading: light-dark(var(--gray-cool-70), var(--gray-cool-3));--surface-border: var(--container-border-color);--surface-link: var(--surface-link-raised);--surface-link-hover: var(--surface-link-raised-hover)}}.container{overflow:hidden;color:var(--_fg);border:1px solid var(--_border);border-radius:var(--_radius);background-color:var(--_bg);box-shadow:var(--_shadow)}:host([pop="false"]){--_shadow: none}:host([tabs]) .container{border-start-start-radius:0}header{padding:0.5rem 1rem;font-weight:500;font-size:1rem;color:var(--_title-color);border-bottom:1px solid var(--_border);background:var(--_title-bg);border-start-start-radius:calc(var(--_radius) - 1px);border-start-end-radius:calc(var(--_radius) - 1px)}:host([condensed="false"]) header{padding:1rem 2rem}:host([tabs]) header{border-start-start-radius:0}.body{padding:1rem}:host([condensed="false"]) .body{padding:1.5rem 2rem}:host([table]) .body{display:block;overflow-x:auto;overflow-y:visible;padding:0}footer{padding:0.5rem 1rem;border-end-start-radius:calc(var(--_radius) - 1px);border-end-end-radius:calc(var(--_radius) - 1px)}:host([condensed="false"]) footer{padding:1rem 2rem}:host([buttons]) footer{display:flex;flex-wrap:wrap;gap:0.5em;justify-content:flex-end}:host(:state(no-header)) header{display:none}:host(:state(no-footer)) footer{padding:0}:host(:state(no-header)) .body{border-start-start-radius:calc(var(--_radius) - 1px);border-start-end-radius:calc(var(--_radius) - 1px)}:host([tabs]:state(no-header)) .body{border-start-start-radius:0}:host(:state(no-footer)) .body{border-end-start-radius:calc(var(--_radius) - 1px);border-end-end-radius:calc(var(--_radius) - 1px)}::slotted(h1),::slotted(h2),::slotted(h3){margin-block:0;font-weight:500;font-size:1.125em}
