{"version":3,"sources":["../../../src/govuk/objects/_width-container.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;AACH,kBAAkB;;AAElB,iBAAiB;;AAEjB,wBAAwB;AACxB,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,+DAA+D;AAC/D,EAAE;AACF,yDAAyD;AACzD,gCAAgC;AAChC,6CAA6C;AAC7C,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,gEAAgE;EAChE,iBAAiB;;EAEjB,mCAAmC;EACnC,gCAAgC;EAChC,+BAA+B;;EAE/B,yEAAyE;EACzE;IACE,iFAAiF;IACjF,+EAA+E;;IAE/E,6DAA6D;IAC7D,gDAAgD;IAChD,sFAAsF;IACtF,oFAAoF;EACtF;;EAEA,mCAAmC;EACnC;IACE,2BAA2B;IAC3B,0BAA0B;;IAE1B,yEAAyE;IACzE;MACE,iFAAiF;MACjF,+EAA+E;;MAE/E,6DAA6D;MAC7D,gDAAgD;MAChD,iFAAiF;MACjF,+EAA+E;IACjF;EACF;;EAEA,wEAAwE;EACxE,6DAA6D;EAC7D;IACE,kBAAkB;IAClB,iBAAiB;;IAEjB,uDAAuD;IACvD,yDAAyD;IACzD;MACE,kBAAkB;MAClB,iBAAiB;IACnB;EACF;AACF;;AAEA;EACE;IACE,8BAA8B;EAChC;AACF","file":"_width-container.scss","sourcesContent":["////\n/// @group objects/layout\n////\n@use \"sass:string\";\n\n@import \"../base\";\n\n/// Width container mixin\n///\n/// Used to create page width and custom width container classes.\n///\n/// @param {String} $width [$govuk-page-width] - Width in pixels\n///\n/// @example scss - Creating a 1200px wide container class\n///  .app-width-container--wide {\n///    @include govuk-width-container(1200px);\n///  }\n///\n/// @access public\n\n@mixin govuk-width-container($width: $govuk-page-width) {\n  // By default, limit the width of the container to the page width\n  max-width: $width;\n\n  // On mobile, add half width gutters\n  margin-right: $govuk-gutter-half;\n  margin-left: $govuk-gutter-half;\n\n  // Respect 'display cutout' safe area (avoids notches and rounded corners)\n  @supports (margin: string.unquote(\"max(calc(0px))\")) {\n    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n    // Use max() to pick largest margin, default or with safe area\n    // Escaped due to Sass max() vs. CSS native max()\n    margin-right: string.unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})\");\n    margin-left: string.unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})\");\n  }\n\n  // On tablet, add full width gutters\n  @media #{govuk-from-breakpoint(tablet)} {\n    margin-right: $govuk-gutter;\n    margin-left: $govuk-gutter;\n\n    // Respect 'display cutout' safe area (avoids notches and rounded corners)\n    @supports (margin: string.unquote(\"max(calc(0px))\")) {\n      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n      // Use max() to pick largest margin, default or with safe area\n      // Escaped due to Sass max() vs. CSS native max()\n      margin-right: string.unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-right})\");\n      margin-left: string.unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-left})\");\n    }\n  }\n\n  // As soon as the viewport is greater than the width of the page plus the\n  // gutters, just centre the content instead of adding gutters.\n  @media (min-width: #{($width + $govuk-gutter * 2)}) {\n    margin-right: auto;\n    margin-left: auto;\n\n    // Since a safe area may have previously been set above,\n    // we need to duplicate this margin that centers the page.\n    @supports (margin: string.unquote(\"max(calc(0px))\")) {\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n}\n\n@include govuk-exports(\"govuk/objects/width-container\") {\n  .govuk-width-container {\n    @include govuk-width-container;\n  }\n}\n"]}