body {
  background-color: var(--color-secondary);
  color: var(--color-foreground);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

#root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-inline: 10%;
  overflow-y: scroll;

  /* Navigation */
  [data-layout="navigation"] {
    display: flex;
    position: sticky;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--border);
    background-color: var(--color-background);
    border-block-start: none;
    inset-block-start: 0;

    .menu {
      display: none;
      width: calc(var(--spacing) * 8);
    }

    .links {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 0.5);

      .logo {
        & > svg {
          width: calc(var(--spacing) * 5);
          height: calc(var(--spacing) * 5);
          color: var(--color-purple-500);
        }
      }
    }

    .actions {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 0.5);

      a,
      button:last-child {
        width: calc(var(--spacing) * 8);
      }

      [data-slot="separator"] {
        height: calc(var(--spacing) * 6);
        margin-inline: calc(var(--spacing) * 2);
      }

      .search {
        display: flex;
        align-items: center;
        height: calc(var(--spacing) * 8);
        padding-inline: calc(var(--spacing) * 2);
        border: none;
        border-radius: var(--radius-sm);
        background-color: var(--color-surface);
        color: color-mix(in oklab, var(--surface-foreground) 60%, transparent);
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        gap: var(--spacing);

        .commands {
          display: flex;
          align-items: center;
          gap: var(--spacing);

          kbd {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(var(--spacing) * 5);
            height: calc(var(--spacing) * 5);
            border: 1px solid var(--color-border);
            border-radius: 0.25rem;
            background-color: var(--color-background);
            color: var(--color-muted-foreground);
            font-size: 0.7rem;
          }
        }
      }
    }
  }

  /* Page */
  [data-page] {
    flex: 2;
  }

  /* Footer */
  [data-layout="footer"] {
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
    color: var(--color-muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-align: center;

    a {
      text-decoration: underline;
      text-underline-offset: var(--spacing);
    }
  }
}

/* Content */
[data-content] {
  display: grid;
  gap: calc(var(--spacing) * 12);

  article {
    display: grid;
    gap: calc(var(--spacing) * 6);

    p {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }

    h3 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-xl--line-height);
    }

    a {
      font-weight: var(--font-weight-medium);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    ul {
      display: grid;
      margin-inline-start: calc(var(--spacing) * 6);
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      list-style: disc;
      gap: calc(var(--spacing) * 2);
    }
  }

  &[data-content="typography"] {
    article {
      & > *:nth-child(2) {
        padding: 10%;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background-color: var(--color-background);
        text-align: center;
        text-wrap: balance;
      }
    }

    .h1 {
      font-size: var(--text-4xl);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: var(--tracking-tight);
      line-height: var(--text-4xl--line-height);
    }

    .h2 {
      font-size: var(--text-3xl);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-tight);
      line-height: var(--text-3xl--line-height);
    }

    .h3 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-tight);
      line-height: var(--text-2xl--line-height);
    }

    .h4 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-tight);
      line-height: var(--text-xl--line-height);
    }

    blockquote {
      padding-inline: calc(var(--spacing) * 6) 0 !important;
      font-size: var(--text-sm);
      font-style: italic;
      line-height: var(--text-sm--line-height);
      text-align: start !important;
      border-inline-start: 2px solid var(--color-border);
    }

    ul {
      display: grid;
      justify-content: center;
      margin-inline-start: 0 !important;
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      list-style: disc;
      text-align: start !important;
      gap: calc(var(--spacing) * 2);
    }

    div > code {
      padding: 0.2rem 0.3rem;
      border-radius: var(--radius-sm);
      background-color: var(--color-muted);
      font-family: monospace;
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }

    .lead {
      color: var(--color-muted-foreground);
      font-size: var(--text-xl);
      line-height: var(--text-xl--line-height);
    }

    .large {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-semibold);
      line-height: var(--text-lg--line-height);
    }

    .small {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-sm--line-height);
    }

    .muted {
      color: var(--color-muted-foreground);
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
  }

  &[data-content="dark-mode"] {
    [data-slot="tabs-list"] {
      width: 100%;
      height: 64px;
      margin-block-end: calc(var(--spacing) * 6);
    }

    [data-slot="tabs-content"][data-state="active"] {
      display: grid;
      gap: calc(var(--spacing) * 12);
    }
  }

  &[data-content="installation"] {
    .frameworks {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 0;
      list-style: none;
      gap: calc(var(--spacing) * 3);

      .framework {
        flex-direction: column;
        height: auto;
        padding: calc(var(--spacing) * 10);
        text-decoration: none;

        & > *:first-child {
          width: calc(var(--spacing) * 10);
          height: calc(var(--spacing) * 10);
        }
      }
    }
  }
}

/* Menu Links */
.menu-box {
  .global-nav {
    display: grid;
    padding: calc(var(--spacing) * 6);
    overflow-y: scroll;
    gap: calc(var(--spacing) * 8);

    .category {
      display: grid;
      gap: calc(var(--spacing) * 2);

      .label {
        display: flex;
        align-items: center;
        color: var(--color-muted-foreground);
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        text-transform: uppercase;
        gap: calc(var(--spacing) * 2);

        svg {
          width: calc(var(--spacing) * 4);
          height: calc(var(--spacing) * 4);
        }
      }

      .links {
        display: grid;
        gap: var(--spacing);
        margin-inline-start: calc(var(--spacing) * -3);

        .link {
          a {
            justify-content: start;
            width: 100%;
          }

          .logo {
            & > svg {
              width: calc(var(--spacing) * 5);
              height: calc(var(--spacing) * 5);
              color: var(--color-purple-500);
            }
          }
        }
      }
    }
  }
}

/* Dark Mode */
.dark {
  body {
    background-color: var(--color-background);
  }
}

/* Responsive */
@media (width <= 1536px) {
  #root {
    padding-inline: 5%;
  }
}

@media (width <= 1280px) {
  #root {
    padding-inline: 0;
  }
}

@media (width <= 1024px) {
  #root {
    [data-layout="navigation"] {
      .menu {
        display: flex;
      }

      .links {
        display: none;
      }

      .actions {
        .search {
          .commands {
            display: none;
          }
        }
      }
    }

    [data-content] {
      &[data-content="dark-mode"] {
        [data-slot="tabs-list"] {
          height: 40px;

          [data-slot="tabs-trigger"] {
            .label {
              display: none;
            }
          }
        }
      }

      &[data-content="installation"] {
        .frameworks {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}
