/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

:root {
    --catalog-image-border-radius: 22px;
}

summary {
    display: flex;
    align-items: center;
    overflow-y: hidden;
}

summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    margin-block-end: 16px;
}

details summary md-outlined-icon-button {
    margin-inline-end: 8px;
}

details:not([open]) #top-app-bar-nav {
    display: contents;
}

main>* {
    max-width: 1760px;
}

main>p img,
main>img {
    max-width: 100%;
}

img:not(figure *),
figure {
    border-radius: var(--catalog-image-border-radius);
    min-height: 56px;
    object-fit: cover;
}

catalog-component-header img {
    height: var(--catalog-header-image-height, 50%);
}

.figure-wrapper {
    display: flex;
    justify-content: center;
}

figure {
    border: 1px solid var(--md-sys-color-outline);
    display: inline-flex;
    padding-inline: 28px;
    align-items: center;
}

div:has(> table) {
    display: flex;
    justify-content: center;
}

p:has(> img) {
    display: flex;
    justify-content: center;
}

main> :not(catalog-component-header) {
    margin-inline: auto;
    box-sizing: border-box;
    overflow-x: auto;
    display: block;
}

main> :not(catalog-component-header, details),
main>details>summary {
    max-width: min(100%, 980px);
    margin-inline: auto;
}

main>table {
    max-width: max-content;
}

table {
    border-spacing: 0;
}

td,
th {
    border-block-start: 1px solid var(--md-sys-color-outline-variant);
    border-inline-start: 1px solid var(--md-sys-color-outline-variant);
    padding: 8px 16px;
}

tr:last-of-type td,
tr:last-of-type th {
    border-block-end: 1px solid var(--md-sys-color-outline-variant);
}

tr td:last-of-type,
tr th:last-of-type {
    border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

th {
    background-color: var(--md-sys-color-surface-container);
    text-shadow: 0 1px 1px var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 1.25em;
}

:not(pre)>code {
    display: inline-flex;
    background-color: var(--md-sys-color-surface-variant);
    text-shadow: 0 1px 1px var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    padding: 4px;
    border-radius: 8px;
}

tr th:first-of-type {
    border-start-start-radius: var(--catalog-shape-xl);
}

tr th:last-of-type {
    border-start-end-radius: var(--catalog-shape-xl);
}

tr:last-of-type td:first-of-type {
    border-end-start-radius: var(--catalog-shape-xl);
}

tr:last-of-type td:last-of-type {
    border-end-end-radius: var(--catalog-shape-xl);
}

/* Hides offscreen accesible text for h1,2,3 hover links. */
a .offscreen {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.heading {
    align-items: center;
    position: relative;
    overflow-x: visible;
}

.heading.h2 {
    font-size: var(--catalog-title-l-font-size);
}

.heading.h3 {
    font-size: var(--catalog-title-m-font-size);
}

.heading.h4 {
    font-size: var(--catalog-title-s-font-size);
}

.heading a {
    display: flex;
    align-items: center;
    position: absolute;
    inset: 0;
    inset-inline-start: calc(-1 * var(--catalog-spacing-xl) + 4px);
    opacity: 0;
    font-size: calc(1.5em - 4px);
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.heading:hover a,
.heading:focus-within a {
    text-decoration: none;
    opacity: 1;
}

.example *:defined>md-circular-progress {
    display: none;
}

.example :is(playground-preview, playground-file-editor):not(:defined) {
    display: flex;
    box-sizing: border-box;
    background-color: var(--md-sys-color-surface-variant);
    justify-content: center;
    align-items: center;
}

blockquote {
    margin: var(--catalog-spacing-l);
}

main>blockquote:not(catalog-component-header, details) {
    padding: var(--catalog-spacing-l);
    border-radius: var(--catalog-shape-l);
    background-color: var(--md-sys-color-secondary-container);
    display: flex;
    gap: var(--catalog-spacing-s);
}

main>blockquote:not(catalog-component-header, details) .content {
    flex-grow: 1;
}

blockquote .content>*:first-child {
    margin-block-start: 4px;
}

blockquote .content>*:last-child {
    margin-block-end: 0;
}

blockquote,
blockquote a {
    color: var(--md-sys-color-on-secondary-container);
}

blockquote a {
    text-decoration: underline;
    font-weight: 700;
}

blockquote.important {
    background-color: var(--md-sys-color-primary-container);
}

blockquote.important,
blockquote.important a {
    color: var(--md-sys-color-on-primary-container);
}

blockquote.warning {
    background-color: var(--md-sys-color-error-container);
}

blockquote.warning,
blockquote.warning a {
    color: var(--md-sys-color-on-error-container);
}