md-layout.css

/**
 * @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-container {
  border-radius: var(--catalog-shape-xl);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.table-container .scroll-wrapper {
  max-height: calc(100vh - 380px);
}
table {
  width: 100%;
  border-spacing: 0;
  position: relative;
}

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;
}
th {
  border-block-start: none;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
}
tr th:first-of-type {
  border-inline-start: none;
}
tr th:last-of-type {
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}
tr:first-of-type td {
  border-block-start: none;
}
tr td:first-of-type {
  border-inline-start: none;
}
tr td: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;
}
thead {
  top: 0;
  position: sticky;
  z-index: 1;
}

: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;
}

/* 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);
}

.pagination {
  display: flex;
  margin-block: 1.5rem;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}

.scroll-wrapper {
  overflow-y: auto;
  max-height: 100%;
  border-radius: inherit;
  box-sizing: border-box;
  /* firefox */
  scrollbar-color: var(--md-sys-color-primary) transparent;
  scrollbar-width: thin;
}
:root {
  --scrollbar-width: 8px;
}

/* Chromium + Safari */
.scroll-wrapper::-webkit-scrollbar {
  background-color: transparent;
  width: var(--scrollbar-width);
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-primary);
  border-radius: calc(var(--scrollbar-width) / 2);
}
/* .table-container::-webkit-scrollbar { */
/*   background-color: transparent; */
/*   width: 8px; */
/* } */

/* .table-container::-webkit-scrollbar-thumb { */
/*   background-color: var(--md-sys-color-primary); */
/*   border-radius: 4px; */
/* } */

.field {
  margin-bottom: 1rem;
}
.field md-outlined-text-field {
  width: 100%;
}