[data-page="docs"] {
  display: grid;
  grid-template-columns: 250px auto 250px;

  /* Global/Local Navigation */
  aside {
    display: flex;
    position: sticky;
    flex-direction: column;
    height: calc(100vh - 65px);
    padding: calc(var(--spacing) * 6);
    padding-inline-start: calc(var(--spacing) * 8);
    overflow: scroll;
    background-color: var(--color-background);
    border-inline: 1px solid var(--border);
    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%;
          }
        }
      }
    }

    &.local-nav {
      .category {
        .links {
          .link {
            a[data-active="false"] {
              color: var(--color-muted-foreground);
            }
          }
        }
      }
    }
  }

  /* Output */
  .output {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px);
    overflow: scroll;
    scroll-behavior: smooth;

    /* Component */
    .component {
      display: grid;
      gap: calc(var(--spacing) * 12);
      padding: calc(var(--spacing) * 12);
      border-block: 1px solid var(--color-border);

      .usage-box,
      .installation-box {
        display: grid;
        gap: calc(var(--spacing) * 6);
        scroll-margin-block: calc(var(--spacing) * 6);

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

        .manual-area {
          display: grid;
          gap: calc(var(--spacing) * 12);

          .dependencies-wrapper,
          .files-wrapper {
            display: grid;
            gap: calc(var(--spacing) * 4);

            .hint {
              padding-inline-start: calc(var(--spacing) * 2);
              font-size: var(--text-base);
              font-weight: var(--font-weight-normal);
              line-height: var(--text-base--line-height);

              a {
                text-underline-offset: 4px;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }

    /* Components */
    .components {
      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-block: 1px solid var(--color-border);

        .card {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          text-transform: capitalize;

          &:not(:nth-last-child(-n + 3)) {
            border-block-end: 1px solid var(--color-border);
          }

          &:not(:nth-child(3n)) {
            border-inline-end: 1px solid var(--color-border);
          }

          .link {
            width: 100%;
            padding: calc(var(--spacing) * 12);
            text-align: center;
          }

          &:hover {
            background-color: var(--color-surface);
          }
        }
      }
    }

    /* Content */
    .content {
      flex: 2;
      padding: calc(var(--spacing) * 12);
      border-block: 1px solid var(--color-border);
    }

    /* Pagination */
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--spacing) * 12);

      &:not(:has(a:nth-child(2))) {
        justify-content: flex-end;
      }
    }
  }
}

/* Responsive  */
@media (width <= 1280px) {
  [data-page="docs"] {
    grid-template-columns: 250px auto;

    .local-nav {
      display: none;
    }
  }
}

@media (width <= 1024px) {
  [data-page="docs"] {
    grid-template-columns: 1fr;

    .global-nav {
      display: none;
    }

    .content,
    .component,
    .components,
    .pagination {
      padding: calc(var(--spacing) * 6) !important;

      &.components {
        padding-inline: 0 !important;

        .cards {
          grid-template-columns: repeat(2, 1fr);

          .card {
            &:not(:nth-last-child(-n + 2)) {
              border-block-end: 1px solid var(--color-border);
            }

            &:not(:nth-child(2n)) {
              border-inline-end: 1px solid var(--color-border);
            }
          }
        }
      }
    }
  }
}
