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

$navHeight: 3.5rem;

body > main {
  padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});

  @media (min-width: map-get($breakpoints, "sm")) {
    padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "md")) {
    padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "lg")) {
    grid-column-gap: calc(var(--spacing-gutter) * 4);
    display: grid;
    grid-template-columns: 200px auto;
    padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "xl")) {
    padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
  }

  > * {
    min-width: 0; // HACK for childs in overflow
  }
}


// Anchors hacks for internal links
// ––––––––––––––––––––

div[role="document"] > section::before {
  display: block;
  height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
  margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
  content: '';


  @media (min-width: map-get($breakpoints, "sm")) {
    height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
    margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "md")) {
    height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
    margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "lg")) {
    height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
    margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
  }

  @media (min-width: map-get($breakpoints, "xl")) {
    height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
    margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
  }
}


// External links
// ––––––––––––––––––––

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


// Form grid
// ––––––––––––––––––––

form.grid {
  > input:not([type=checkbox]):not([type=radio]),
  > button {
    margin-bottom: 0;
  }
}


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