{"version":3,"sources":["../../../../src/nhsuk/core/objects/_width-container.scss"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,uBAAuB;AACvB,oBAAoB;;AAEpB,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,wBAAwB;AACxB,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,+DAA+D;AAC/D,EAAE;AACF,6GAA6G;AAC7G,EAAE;AACF,yDAAyD;AACzD,iCAAiC;AACjC,8CAA8C;AAC9C,MAAM;;AAEN;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,oCAAoC;EACpC;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,iEAAiE;EACjE,eAAe;;EAEf,mCAAmC;EACnC,gCAAgC;EAChC,+BAA+B;;EAE/B,oCAAoC;EACpC;IACE,2BAA2B;IAC3B,0BAA0B;EAC5B;AACF;;AAEA;EACE;IACE,8BAA8B;EAChC;;EAEA;IACE,oCAAoC;EACtC;AACF","file":"_width-container.scss","sourcesContent":["@use \"sass:string\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// @group objects/layout\n////\n\n/// Width container mixin\n///\n/// Used to create page width and custom width container classes.\n///\n/// @param {String} $width [$nhsuk-page-width] - Width in pixels\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @example scss - Creating a 1200px wide container class\n///   .app-width-container--wide {\n///     @include nhsuk-width-container(1200px);\n///   }\n\n@mixin nhsuk-width-container($width: $nhsuk-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: $nhsuk-gutter-half;\n  margin-left: $nhsuk-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(#{$nhsuk-gutter-half} + env(safe-area-inset-right));\n    $gutter-safe-area-left: calc(#{$nhsuk-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(#{$nhsuk-gutter-half}, #{$gutter-safe-area-right})\");\n    margin-left: string.unquote(\"max(#{$nhsuk-gutter-half}, #{$gutter-safe-area-left})\");\n  }\n\n  // On desktop, add full width gutters\n  @include nhsuk-media-query($from: desktop) {\n    margin-right: $nhsuk-gutter;\n    margin-left: $nhsuk-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(#{$nhsuk-gutter-half} + env(safe-area-inset-right));\n      $gutter-safe-area-left: calc(#{$nhsuk-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(#{$nhsuk-gutter}, #{$gutter-safe-area-right})\");\n      margin-left: string.unquote(\"max(#{$nhsuk-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  @include nhsuk-media-query($and: \"(min-width: #{($width + $nhsuk-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@mixin nhsuk-width-container-fluid {\n  // Full width container, spanning the entire width of the viewport\n  max-width: 100%;\n\n  // On mobile, add half width gutters\n  margin-right: $nhsuk-gutter-half;\n  margin-left: $nhsuk-gutter-half;\n\n  // On desktop, add full width gutters\n  @include nhsuk-media-query($from: desktop) {\n    margin-right: $nhsuk-gutter;\n    margin-left: $nhsuk-gutter;\n  }\n}\n\n@include nhsuk-exports(\"nhsuk/core/objects/width-container\") {\n  .nhsuk-width-container {\n    @include nhsuk-width-container;\n  }\n\n  .nhsuk-width-container-fluid {\n    @include nhsuk-width-container-fluid;\n  }\n}\n"]}