.docs-content {
  & > :not(.component-container) {
    &:is(h1, p) {
      margin-top: var(--spacing-20px);

      &:first-child {
        margin-top: 0;
      }
    }
    &:is(h2, h3, h4, h5, h6) {
      margin-top: var(--spacing-48px);

      &:first-child {
        margin-top: 0;
      }
    }
    &:is(ul) {
      li {
        margin-top: var(--spacing-12px);
        position: relative;
        align-items: center;
        display: block;
        margin-left: 22px;

        &::before {
          display: inline-block;
          content: " ";
          background-color: var(--color-foreground);
          width: 6px;
          height: 6px;
          position: absolute;
          left: -14px;
          top: 10px;
          border-radius: 1px;
          -webkit-border-radius: 1px;
          -moz-border-radius: 1px;
          -ms-border-radius: 1px;
          -o-border-radius: 1px;
        }
      }
    }
    &:is(ol) {
      padding-inline-start: 20px;
      list-style: decimal;
    }

    &:is(h1) {
      font-size: var(--text-h5);
      line-height: var(--text-h5--line-height);
      letter-spacing: var(--text-h5--letter-spacing);
      font-weight: var(--text-h5--font-weight);
    }
    &:is(h2) {
      font-size: var(--text-h7);
      line-height: var(--text-h7--line-height);
      letter-spacing: var(--text-h7--letter-spacing);
      font-weight: var(--text-h7--font-weight);
    }
    &:is(p):nth-child(2) {
      font-size: var(--text-p1);
      line-height: var(--text-p1--line-height);
      letter-spacing: var(--text-p1--letter-spacing);
      font-weight: var(--text-p1--font-weight);
      margin-top: var(--spacing-16px);
    }

    &:is(p, ol) {
      code {
        overflow: hidden;
        padding: var(--spacing-2px) var(--spacing-8px);
        background-color: var(--color-foreground);
        color: #abb2bf;
        font-size: 0.875rem;

        a {
          color: #98c379;
        }

        border-radius: var(--spacing-4px);
        -webkit-border-radius: var(--spacing-4px);
        -moz-border-radius: var(--spacing-4px);
        -ms-border-radius: var(--spacing-4px);
        -o-border-radius: var(--spacing-4px);
      }
    }

    &:is(pre) {
      margin-top: var(--spacing-12px);

      &:has(code) {
        overflow: hidden;
        border-radius: var(--spacing-8px);
        -webkit-border-radius: var(--spacing-8px);
        -moz-border-radius: var(--spacing-8px);
        -ms-border-radius: var(--spacing-8px);
        -o-border-radius: var(--spacing-8px);
      }
    }
  }

  b,
  strong {
    font-weight: 600;
  }

  [data-section="preview"],
  [data-section="code"] {
    position: relative;

    .copy-code svg {
      width: 24px;
      height: 24px;
    }
  }
  [data-section="preview"] {
    .copy-code {
      background-color: var(--color-white);
      color: var(--color-black);
      display: none;
    }
  }
  [data-section="code"] {
    .copy-code {
      background-color: var(--color-black);
      color: var(--color-white);
    }
  }

  .component-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-24px);
  }

  .header-with-link {
    margin-left: -3px;
    padding-left: 3px;
  }

  .copy-link {
    left: 2px;
    top: 7px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;

    svg {
      width: 12px;
      height: 12px;
    }

    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}

.docs-content {
  a:not(.no-underline) {
    color: blue;
    text-decoration: underline;

    &:is(:hover, :active) {
      color: var(--color-black-700);
    }
  }
}

.mobile-doc-menu-button-container {
  top: var(--header-height);
}
.mobile-doc-menu-button {
  svg,
  path {
    transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
  }
  &:is(:hover, :active) {
    path {
      stroke: var(--color-foreground);
    }
  }

  &[data-open="true"] {
    svg {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
    }
  }
}
.mobile-doc-menu {
  left: -100%;
  top: 44px;
  height: calc(100dvh - var(--header-height) - 44px);

  &[data-open="true"] {
    left: 0%;
  }
}

.dark {
  .docs-content {
    & > :not(.component-container) {
      &:is(p, ol) {
        code {
          background-color: var(--color-black-700);
          color: var(--color-white);
        }
      }
    }

    a:not(.no-underline) {
      color: lightblue;
      text-decoration: underline;

      &:is(:hover, :active) {
        color: var(--color-black-100);
      }
    }
  }
}

@media screen and (min-width: 992px) {
  .docs-content {
    .header-with-link {
      margin-left: -8px;
      padding-left: 8px;
    }

    .copy-link {
      left: 4px;
      top: 1px;
      width: 24px;
      height: 24px;

      svg {
        width: 16px;
        height: 16px;
      }
    }
  }
}

@media screen and (min-width: 1600px) {
  .docs-content {
    .copy-link {
      top: -3px;
      width: 32px;
      height: 32px;

      svg {
        width: 24px;
        height: 24px;
      }
    }
  }
}