////
/// @group objects/layout
////
@use "sass:string";

@import "../base";

/// 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: string.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: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
    margin-left: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
  }

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

    // Respect 'display cutout' safe area (avoids notches and rounded corners)
    @supports (margin: string.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: string.unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
      margin-left: string.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.
  @media (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: string.unquote("max(calc(0px))")) {
      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 */