html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#main {
  height: 100%;
}

.hljs {
  background: var(--palette-background-darken);
  color: var(--palette-text-primary);
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
}
.hljs-string {
  color: var(--palette-secondary);
}
.hljs-operator {
  color: var(--palette-primary);
}
.hljs-keyword {
  color: var(--palette-tertiary);
}
.hljs-type {
  color: var(--palette-tertiary);
}
.hljs-built_in {
  color: var(--palette-primary);
}
.hljs-literal {
  color: var(--palette-secondary);
}
.hljs-comment {
  color: var(--palette-success);
}

.anchor-link {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.section-header:hover .anchor-link {
  opacity: 0.7;
}
.anchor-link:hover {
  opacity: 1 !important;
}

.docs-component-card {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.docs-component-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Navigation
   ---------------------------------------- */
.weave-nav-item--active {
  background: var(--palette-primary) !important;
  color: var(--palette-primary-text) !important;
}

.weave-nav-leaf:hover:not(.weave-nav-item--active) {
  background: var(--palette-surface);
}

.weave-nav-group-header:hover {
  background: var(--palette-surface);
  border-radius: 6px;
}

/* Drawer containment
   transform creates a new containing block so position:fixed children
   (e.g. demo AppBars inside examples) are clipped to this panel
   rather than the viewport, preventing them from escaping it. */
.weave-drawer-container__main {
  transform: translateZ(0);
}

.cp {
  height: 88px;
  position: relative;
  overflow: hidden;
  background: var(--palette-background-darken, var(--palette-background));
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  flex-shrink: 0;
}
.cp > * {
  position: absolute;
  box-sizing: border-box;
}


.cp-bar {
  background: var(--palette-primary);
}
.cp-bar2 {
  background: var(--palette-secondary);
}
.cp-line {
  background: var(--palette-text-primary);
  opacity: 0.18;
  border-radius: 1px;
}
.cp-pill {
  background: var(--palette-primary);
  border-radius: 10px;
}
.cp-box {
  border: 2px solid var(--palette-primary);
  border-radius: 4px;
}
.cp-fill {
  background: var(--palette-surface);
  border-radius: 3px;
}
.cp-fdim {
  background: var(--palette-text-primary);
  opacity: 0.07;
}
.cp-dot {
  background: var(--palette-primary);
  border-radius: 50%;
}
.cp-ring {
  border: 2px solid var(--palette-primary);
  border-radius: 50%;
}
.cp > span {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.docs-page-layout {
  display: flex;
  min-height: 100%;
}

.docs-toc {
  display: none;
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  padding: 16px 0 16px 8px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

@media (min-width: 1280px) {
  .docs-toc {
    display: block;
  }
}

.docs-toc__title {
  padding: 0 12px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--palette-divider, rgba(128, 128, 128, 0.2));
}

.docs-toc__item {
  padding: 4px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  color: var(--palette-text-secondary);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.docs-toc__item:hover {
  color: var(--palette-text-primary);
}

.docs-toc__item--active {
  border-left-color: var(--palette-primary);
  color: var(--palette-primary);
}