@use "kit-deps" as *;
@use "components/typography" as *;

.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: $space-8;
  align-items: start;

  @include media_down("xl") {
    grid-template-columns: 1fr;
  }
}

.docs-sidebar {
  position: sticky;
  top: $space-5;

  @include media_down("xl") {
    position: relative;
    top: 0;
  }

  .docs-sidebar-title {
    display: inline-flex;
    padding: $space-2 $space-3;
    margin-bottom: $space-3;
    color: $color-black;
    background: $color-primary;
    font-size: $font-size-sm;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
  }

  .list.list-nav {
    max-width: none;
  }
}

.docs-content {
  min-width: 0;
}

.docs-section {
  scroll-margin-top: $space-6;
  padding-top: $space-12;
  margin-bottom: $space-12 * 2;
  border-top: 2px solid $color-dark;

  &:first-child {
    padding-top: 0;
  }

  &:target {
    border-top-color: $color-secondary;

    > .section-title {
      color: $color-secondary;
    }
  }
}

.docs-intro {
  max-width: 820px;
}

.docs-page {
  padding-bottom: $space-12 * 2;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.docs-section-description {
  max-width: 760px;
  margin-top: -$space-4;
  margin-bottom: $space-8;
  color: $color-text-medium;
}

.code-example {
	max-width: 900px;
	margin-top: $space-8;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;

  .code-example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $space-3;
    padding: $space-2 $space-3;
    color: $color-black;
    background: $color-primary;
  }

  .code-example-title {
    font-size: $font-size-sm;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
  }

  .code-example-copy {
    border: 0;
    padding: $space-1 $space-2;
    color: $color-primary;
    background: $color-black;
    font-family: $font-family-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    cursor: pointer;

    @include hover_touch {
      color: $color-black;
      background: $color-warning;
    }
  }

  pre {
    margin: 0;
    padding: $space-4;
    overflow: auto;
    background: $color-dark;
  }

  code {
    display: block;
    font-size: $font-size-sm;
    line-height: $line-height-relaxed;
    background: transparent;
  }

  .hljs {
    padding: 0;
    background: transparent;
  }
}