:root {
  --sds-g-text-color: #242424;
  --sds-g-root-color-background: var(--sds-g-color-neutral-base-100);
}

html {
  background-color: var(--sds-g-color-neutral-base-95);
}

body {
  margin: 0;
  font-size: var(--sds-g-font-size-base);
  background-color: var(--sds-g-color-neutral-base-95);
}

a {
  color: var(--sds-g-color-brand-base-50);
  text-decoration: none;
}

code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--sds-g-color-neutral-base-90);
  border-radius: 6px;
}

header .top-shelf {
  background: var(--sds-g-color-neutral-base-100);
  padding: var(--sds-g-spacing-4);
}

header .bottom-shelf {
  background: var(--sds-g-color-palette-blue-20);
  padding: var(--sds-g-spacing-4);
  color: var(--sds-g-color-palette-neutral-95);
}
header a {
  color: currentColor;
}

header .menu {
  display: flex;
  gap: var(--sds-g-spacing-6);
  font-size: var(--sds-g-font-scale-neg-1);
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo svg {
  width: 40px;
  margin-inline-end: var(--sds-g-spacing-2);
}

.logo .title {
  margin-inline-start: var(--sds-g-spacing-5);
  padding-inline-start: var(--sds-g-spacing-5);
  border-left: 1px solid var(--sds-g-color-neutral-base-80);
  color: var(--sds-g-color-palette-blue-15);
}

/* content container */

.content {
  width: 100%;
  min-width: 400px;
  max-width: calc(100% - 265px);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--sds-g-spacing-6);
  padding-top: var(--sds-g-spacing-5);
  padding-bottom: var(--sds-g-spacing-5);
}

.container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

@media (min-width: 1012px) {
  .container {
    max-width: 1280px;
  }
}

/* Content Area */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-weight: var(--sds-g-font-weight-bold);
  margin-block: var(--sds-g-spacing-4);
  color: var(--sds-g-color-palette-blue-15);
  letter-spacing: -0.01em;
}

.content h1 {
  font-size: var(--sds-g-font-scale-8);
  margin-block-start: var(--sds-g-spacing-7);
  margin-block-end: var(--sds-g-spacing-5);
  font-weight: 600;
}

.content h1:first-of-type {
  margin-block-start: 0;
}

.content h2 {
  font-size: var(--sds-g-font-scale-5);
  margin-top: var(--sds-g-spacing-5);
  font-weight: 600;
}

.content h3 {
  font-size: var(--sds-g-font-scale-3);
  margin-top: var(--sds-g-spacing-5);
}

.content h4 {
  font-size: var(--sds-g-font-scale-2);
  margin-top: var(--sds-g-spacing-5);
}

.content h5 {
  font-size: var(--sds-g-font-scale-1);
}

.content p {
  margin-block: var(--sds-g-spacing-4);
}

.content p:only-of-type {
  margin: 0;
}

.content ul,
.content ol {
  margin-inline-start: var(--sds-g-spacing-5);
  list-style-type: disc;
}

.content blockquote {
  background-color: var(--sds-g-color-palette-violet-90);
  padding: var(--sds-g-spacing-4) var(--sds-g-spacing-5);
  color: var(--sds-g-color-palette-violet-30);
  border-radius: var(--sds-g-radius-border-4);
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px inset;
}

blockquote code {
  background-color: var(--sds-g-color-palette-violet-80);
}

blockquote a {
  color: var(--sds-g-color-palette-violet-20);
  text-decoration: underline;
}

table tr {
  border-top: 1px solid var(--sds-g-color-neutral-base-80);
  background-color: var(--sds-g-color-neutral-base-100);
}

table tr:nth-child(2n) {
  background-color: var(--sds-g-color-neutral-base-95);
}

table th,
table td {
  padding: var(--sds-g-spacing-2) var(--sds-g-spacing-4);
  border: 1px solid var(--sds-g-color-neutral-base-80);
}

/* sidebar nav */

.nav {
  width: 265px;
  padding-top: var(--sds-g-spacing-6);
  background-color: var(--sds-g-color-neutral-base-95);
}

/* code block */

.shiki {
  margin: var(--sds-g-spacing-5);
  padding: var(--sds-g-spacing-4) var(--sds-g-spacing-5);
  border-radius: var(--sds-g-radius-border-4);
  box-shadow: var(--sds-g-shadow-2);
  border: 1px solid var(--sds-g-color-neutral-base-90);
}
.shiki code {
  padding: 0;
  background-color: inherit;
  border-radius: 0;
}

/* Sidebar Nav */

.group-list {
  padding-left: 1rem;
}

[aria-level='1'] ~ [aria-level='2'] {
  padding-left: 1rem;
}

[aria-level='2'] ~ [aria-level='3'] {
  padding-left: 1rem;
}

[aria-level='3'] ~ [aria-level='4'] {
  padding-left: 2rem;
  display: none;
}

[aria-level='4'] ~ [aria-level='5'] {
  padding-left: 3rem;
  display: none;
}

[aria-level='5'] ~ [aria-level='6'] {
  padding-left: 4rem;
  display: none;
}