@use "../settings";

/**
 * 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)
#{settings.$semantic-root-element} {
  width: 100%;
  margin: 0; // 1

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

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

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

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

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

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

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