@use "sass:map";
@use "../settings" as *;

/**
 * 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 {
      // Centered viewport
      $first-breakpoint: true;
      padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
      @each $key, $values in $breakpoints {
        @if $values {
          @media (min-width: map.get($values, "breakpoint")) {
            max-width: map.get($values, "viewport");
            @if $first-breakpoint {
              $first-breakpoint: false;
              padding-right: 0;
              padding-left: 0;
            }
          }
        }
      }
    }

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