/* docs/stylesheets/extra.css */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #050505;
  --md-primary-fg-color--light: #111827;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #16a34a;
  --kx-header-surface: rgba(22, 22, 23, 0.92);
  --kx-header-surface-scrolled: rgba(22, 22, 23, 0.84);
  --kx-header-border: rgba(255, 255, 255, 0.14);
  --kx-lang-menu-bg: rgba(255, 255, 255, 0.78);
  --kx-lang-menu-fg: #111827;
  --kx-lang-menu-muted: #52605a;
  --kx-lang-menu-border: rgba(15, 23, 42, 0.12);
  --kx-lang-menu-hover: rgba(8, 165, 94, 0.09);
  --kx-lang-menu-active: rgba(8, 165, 94, 0.14);
  --kx-lang-menu-shadow: 0 1.1rem 2.4rem rgba(15, 23, 42, 0.18);
}

body[data-md-color-scheme="slate"] {
  --kx-lang-menu-bg: rgba(17, 19, 22, 0.74);
  --kx-lang-menu-fg: #f8fafc;
  --kx-lang-menu-muted: #a6b0ab;
  --kx-lang-menu-border: rgba(255, 255, 255, 0.14);
  --kx-lang-menu-hover: rgba(34, 197, 94, 0.16);
  --kx-lang-menu-active: rgba(34, 197, 94, 0.22);
  --kx-lang-menu-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.46);
}

.md-header {
  background: var(--kx-header-surface) !important;
  background-color: var(--kx-header-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    -webkit-backdrop-filter 180ms ease,
    backdrop-filter 180ms ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.md-header.md-header--shadow {
  background: var(--kx-header-surface-scrolled) !important;
  background-color: var(--kx-header-surface-scrolled) !important;
  background-image: none !important;
  border-bottom-color: var(--kx-header-border);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.md-header:has(.md-select:hover),
.md-header:has(.md-select:focus-within) {
  background: var(--kx-header-surface-scrolled) !important;
  background-color: var(--kx-header-surface-scrolled) !important;
  background-image: none !important;
  border-bottom-color: var(--kx-header-border);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.md-tabs,
.md-tabs__inner {
  background: rgba(22, 22, 23, 0.84) !important;
  background-color: rgba(22, 22, 23, 0.84) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.md-tabs {
  border-bottom: 1px solid transparent;
}

.md-header.md-header--shadow ~ .md-container .md-tabs,
.md-header.md-header--shadow ~ .md-container .md-tabs__inner {
  background: rgba(22, 22, 23, 0.78) !important;
  background-color: rgba(22, 22, 23, 0.78) !important;
  border-bottom-color: var(--kx-header-border);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.82);
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: #ffffff;
}

.md-header__button.md-logo {
  align-items: center;
  background: transparent;
  display: inline-flex;
  height: 2.5rem;
  margin: 0.25rem 0.75rem 0.25rem 0;
  padding: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  width: auto;
}

.md-header__button.md-logo:hover {
  background: transparent;
  opacity: 0.9;
  transform: translateY(-1px);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  filter: drop-shadow(0 0.08rem 0.12rem rgba(0, 0, 0, 0.36));
  height: 2rem;
  max-width: min(12.8rem, 46vw);
  width: auto;
}

html {
  overflow-x: hidden;
}

.md-header__option,
.md-select {
  position: relative;
}

.md-select .md-header__button {
  border-radius: 999px;
  transition: background 160ms ease, transform 160ms ease;
}

.md-select:hover .md-header__button,
.md-select .md-header__button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.md-select__inner {
  background: var(--kx-lang-menu-bg);
  border: 1px solid var(--kx-lang-menu-border);
  border-radius: 0.85rem;
  box-shadow: var(--kx-lang-menu-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  left: auto !important;
  max-width: min(18rem, calc(100vw - 1rem));
  min-width: 12rem;
  overflow: hidden !important;
  padding: 0.35rem;
  right: 0 !important;
  transform: none !important;
  width: max-content;
}

.md-select__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  min-width: 100%;
  padding: 0;
}

.md-select__item {
  margin: 0;
}

.md-select__link {
  align-items: center;
  border-radius: 0.65rem;
  color: var(--kx-lang-menu-fg) !important;
  display: flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.5rem;
  line-height: 1.2;
  min-height: 2.25rem;
  overflow: visible;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}

.md-select__link::before {
  border: 1px solid var(--kx-lang-menu-border);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 0.48rem;
  width: 0.48rem;
}

.md-select__link:hover,
.md-select__link:focus-visible {
  background: var(--kx-lang-menu-hover);
  color: var(--kx-lang-menu-fg) !important;
}

html[lang="zh"] .md-select__link[hreflang="zh"],
html[lang="zh-Hans"] .md-select__link[hreflang="zh"],
html[lang="en"] .md-select__link[hreflang="en"],
html[lang="id"] .md-select__link[hreflang="id"] {
  background: var(--kx-lang-menu-active);
}

html[lang="zh"] .md-select__link[hreflang="zh"]::before,
html[lang="zh-Hans"] .md-select__link[hreflang="zh"]::before,
html[lang="en"] .md-select__link[hreflang="en"]::before,
html[lang="id"] .md-select__link[hreflang="id"]::before {
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 0.18rem rgba(22, 163, 74, 0.16);
}

@media screen and (max-width: 59.9375em) {
  .md-header__button.md-logo {
    height: 2.2rem;
    margin-right: 0.45rem;
    padding: 0;
  }

  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.55rem;
    max-width: 42vw;
  }

  .md-select__inner {
    max-width: calc(100vw - 1rem);
    min-width: min(12.5rem, calc(100vw - 1rem));
    right: 0.35rem !important;
    width: min(14rem, calc(100vw - 1rem));
  }

  .md-select__link {
    font-size: 0.82rem;
    min-height: 2.65rem;
    padding: 0.58rem 0.72rem;
  }
}

/* * 仅在屏幕宽度大于 1220px (即电脑端) 时生效。
 * 手机和平板依然保持默认样式，不会乱版。
 */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 80%; /* 设为 95% 让表格视野最大化 */
    /* 如果觉得太宽，也可以改为固定像素，例如: max-width: 1600px; */
  }
}

/* 可选：微调表格内的字体大小，让一行能塞下更多字 */
.md-typeset table {
  font-size: 0.85rem;
}

.md-typeset img[src*="/assets/datasheets/generated/"][src*=".svg"] {
  background: #ffffff;
}

.md-banner {
  display: none !important;
}

.md-footer-meta__inner--centered,
.md-footer-meta__inner {
  justify-content: center;
}

.md-copyright--centered {
  width: 100%;
  text-align: center;
}

.md-copyright--centered .md-copyright__highlight,
.md-copyright--centered .md-copyright__line {
  display: block;
  text-align: center;
}

body[data-md-color-scheme="slate"] .mermaid {
  display: block;
  margin: 1.5rem 0;
  overflow-x: auto;
}

body[data-md-color-scheme="slate"] .mermaid text,
body[data-md-color-scheme="slate"] .mermaid .label,
body[data-md-color-scheme="slate"] .mermaid .nodeLabel,
body[data-md-color-scheme="slate"] .mermaid .edgeLabel,
body[data-md-color-scheme="slate"] .mermaid .edgeLabel p,
body[data-md-color-scheme="slate"] .mermaid .cluster-label text,
body[data-md-color-scheme="slate"] .mermaid span {
  color: #000000 !important;
  fill: #000000 !important;
  opacity: 1 !important;
}

body[data-md-color-scheme="slate"] .mermaid foreignObject,
body[data-md-color-scheme="slate"] .mermaid foreignObject *,
body[data-md-color-scheme="slate"] .mermaid .nodeLabel *,
body[data-md-color-scheme="slate"] .mermaid .label *,
body[data-md-color-scheme="slate"] .mermaid .edgeLabel * {
  color: #000000 !important;
  fill: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
}

body[data-md-color-scheme="slate"] .mermaid .edgeLabel rect,
body[data-md-color-scheme="slate"] .mermaid .labelBkg {
  fill: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}

body[data-md-color-scheme="slate"] .mermaid .flowchart-link,
body[data-md-color-scheme="slate"] .mermaid .arrowheadPath,
body[data-md-color-scheme="slate"] .mermaid path,
body[data-md-color-scheme="slate"] .mermaid line {
  stroke: #64748b !important;
}