/**
 * Docs: Main (Grid)
 */

// Config
$navHeight: 3.5rem;

// Main grid
body > main {
  padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});

  @if map-get($breakpoints, "lg") {
    @media (min-width: map-get($breakpoints, "lg")) {
      --block-spacing-horizontal: calc(var(--spacing) * 1.75);
      grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
      display: grid;
      grid-template-columns: 200px auto;
    }
  }

  @if map-get($breakpoints, "xl") {
    @media (min-width: map-get($breakpoints, "xl")) {
      --block-spacing-horizontal: calc(var(--spacing) * 2);
    }
  }

  > aside,
  div[role="document"] {
    min-width: 0;
  }
}

// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after
{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: var(--icon-external);
  background-position: top center;
  background-size: 0.66rem auto;
  background-repeat: no-repeat;
  content: "";
}

// Embedded SVG
svg {
  height: 1rem;
}