@import "../base";

////
/// @group objects/layout
////

/// Width container mixin
///
/// Used to create page width and custom width container classes.
///
/// @param {String} $width [$govuk-page-width] - Width in pixels
///
/// @example scss - Creating a 1200px wide container class
///  .app-width-container--wide {
///    @include govuk-width-container(1200px);
///  }
///
/// @access public

@mixin govuk-width-container($width: $govuk-page-width) {

  // By default, limit the width of the container to the page width
  max-width: $width;

  // On mobile, add half width gutters
  margin-right: $govuk-gutter-half;
  margin-left: $govuk-gutter-half;

  // Respect 'display cutout' safe area (avoids notches and rounded corners)
  @supports (margin: unquote("max(calc(0px))")) {
    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));

    // Use max() to pick largest margin, default or with safe area
    // Escaped due to Sass max() vs. CSS native max()
    margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
    margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
  }

  // On tablet, add full width gutters
  @include govuk-media-query($from: tablet) {
    margin-right: $govuk-gutter;
    margin-left: $govuk-gutter;

    // Respect 'display cutout' safe area (avoids notches and rounded corners)
    @supports (margin: unquote("max(calc(0px))")) {
      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));

      // Use max() to pick largest margin, default or with safe area
      // Escaped due to Sass max() vs. CSS native max()
      margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
      margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
    }
  }

  // As soon as the viewport is greater than the width of the page plus the
  // gutters, just centre the content instead of adding gutters.
  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
    margin-right: auto;
    margin-left: auto;

    // Since a safe area may have previously been set above,
    // we need to duplicate this margin that centers the page.
    @supports (margin: unquote("max(calc(0px))")) {
      margin-right: auto;
      margin-left: auto;
    }
  }

  @include _govuk-if-ie8 {
    width: $width;
    // Since media queries are not supported in IE8,
    // we need to duplicate this margin that centers the page.
    margin-right: auto;
    margin-left: auto;
  }
}

@include govuk-exports("govuk/objects/width-container") {
  .govuk-width-container {
    @include govuk-width-container;
  }
}

/*# sourceMappingURL=_width-container.scss.map */