/**
 * Sectioning
 * Container and responsive spacings for header, main, footer
 */

// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––

// Render the `main` element consistently in IE
main {
  display: block;
}

// Pico
// ––––––––––––––––––––

// 1. Remove the margin in all browsers (opinionated)
#{$semantic-root-element} {
  width: 100%;
  margin: 0; // 1

  > header,
  > main,
  > footer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;

    // Semantic container
    @if $enable-semantic-container {
      padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);

      // Centered viewport
      @if $enable-viewport {
        @if map-get($breakpoints, "sm") and $enable-viewport {
          @media (min-width: map-get($breakpoints, "sm")) {
            max-width: map-get($viewports, "sm");
            padding-right: 0;
            padding-left: 0;
          }
        }

        @if map-get($breakpoints, "md") and $enable-viewport {
          @media (min-width: map-get($breakpoints, "md")) {
            max-width: map-get($viewports, "md");
          }
        }

        @if map-get($breakpoints, "lg") and $enable-viewport {
          @media (min-width: map-get($breakpoints, "lg")) {
            max-width: map-get($viewports, "lg");
          }
        }

        @if map-get($breakpoints, "xl") and $enable-viewport {
          @media (min-width: map-get($breakpoints, "xl")) {
            max-width: map-get($viewports, "xl");
          }
        }
      }
    }

    // Semantic container
    @else {
      padding: var(--block-spacing-vertical) 0;
    }
  }
}