{"version":3,"sources":["../src/src/layout/container.scss","../src/src/support/variables/layout.scss","../src/src/layout/grid.scss","../src/src/support/mixins/layout.scss","../src/src/layout/grid-offset.scss","../src/src/layout/layout.scss","../src/src/layout/mixins.scss"],"names":[],"mappings":"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","file":"layout.css","sourcesContent":["// Fixed-width, centered column for site content.\n// Handy container styles that match our breakpoints\n\n// 544px\n.container-sm {\n  max-width: $width-sm;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n// 768px\n.container-md {\n  max-width: $container-md;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n// 1004px - this matches the current fixed width: 980px + padding: px-3\n.container-lg {\n  max-width: $container-lg;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n// 1280px\n.container-xl {\n  max-width: $container-xl;\n  margin-right: auto;\n  margin-left: auto;\n}\n","// Layout variables\n\n// these are values for the display CSS property\n$display-values: (\n  block,\n  flex,\n  inline,\n  inline-block,\n  inline-flex,\n  none,\n  table,\n  table-cell\n) !default;\n\n// maps edges to respective corners for border-radius\n$edges: (\n  top: (top-left, top-right),\n  right: (top-right, bottom-right),\n  bottom: (bottom-right, bottom-left),\n  left: (bottom-left, top-left)\n) !default;\n\n// These are our margin and padding utility spacers. The default step size we\n// use is 8px. This gives us a key of:\n//    0 => 0px\n//    1 => 4px\n//    2 => 8px\n//    3 => 16px\n//    4 => 24px\n//    5 => 32px\n//    6 => 40px\n$spacer: 8px !default;\n\n// Our spacing scale\n$spacer-0: 0 !default;                  // 0\n$spacer-1: round($spacer / 2) !default; // 4px\n$spacer-2: $spacer !default;            // 8px\n$spacer-3: $spacer * 2 !default;        // 16px\n$spacer-4: $spacer * 3 !default;        // 24px\n$spacer-5: $spacer * 4 !default;        // 32px\n$spacer-6: $spacer * 5 !default;        // 40px\n\n// The list of spacer values\n$spacers: (\n  $spacer-0,\n  $spacer-1,\n  $spacer-2,\n  $spacer-3,\n  $spacer-4,\n  $spacer-5,\n  $spacer-6,\n) !default;\n\n// And the map of spacers, for easier looping:\n// @each $scale, $length in $spacer-map { ... }\n$spacer-map: (\n  0: $spacer-0,\n  1: $spacer-1,\n  2: $spacer-2,\n  3: $spacer-3,\n  4: $spacer-4,\n  5: $spacer-5,\n  6: $spacer-6,\n) !default;\n\n// Increases the core spacing scale first by 8px for $spacer-7, then by 16px\n// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,\n// 80, 96, etc.\n$spacer-7:  $spacer * 6 !default;  // 48px\n$spacer-8:  $spacer * 8 !default;  // 64px\n$spacer-9:  $spacer * 10 !default; // 80px\n$spacer-10: $spacer * 12 !default; // 96px\n$spacer-11: $spacer * 14 !default; // 112px\n$spacer-12: $spacer * 16 !default; // 128px\n\n$spacers-large: (\n  7: $spacer-7,\n  8: $spacer-8,\n  9: $spacer-9,\n  10: $spacer-10,\n  11: $spacer-11,\n  12: $spacer-12,\n) !default;\n\n$spacer-map-extended: map-merge(\n  (\n    0: 0,\n    1: $spacer-1,\n    2: $spacer-2,\n    3: $spacer-3,\n    4: $spacer-4,\n    5: $spacer-5,\n    6: $spacer-6,\n  ),\n  $spacers-large,\n) !default;\n\n// Em spacer variables\n$em-spacer-1: 0.0625em !default; // 1/16\n$em-spacer-2: 0.125em !default;  // 1/8\n$em-spacer-3: 0.25em !default;   // 1/4\n$em-spacer-4: 0.375em !default;  // 3/8\n$em-spacer-5: 0.5em !default;    // 1/2\n$em-spacer-6: 0.75em !default;   // 3/4\n\n// Size scale\n// Used for buttons, inputs, labels, avatars etc.\n$size: 16px !default;\n\n$size-0: 0 !default;\n$size-1: $size !default;           // 16px\n$size-2: $size-1 +  4px !default;  // 20px\n$size-3: $size-2 +  4px !default;  // 24px\n$size-4: $size-3 +  4px !default;  // 28px\n$size-5: $size-4 +  4px !default;  // 32px\n$size-6: $size-5 +  8px !default;  // 40px\n$size-7: $size-6 +  8px !default;  // 48px\n$size-8: $size-7 + 16px !default;  // 64px\n\n// Fixed-width container variables\n$container-width: 980px !default;\n$grid-gutter:     10px !default;\n\n// Breakpoint widths\n$width-xs: 0 !default;\n// Small screen / phone\n$width-sm: 544px !default;\n// Medium screen / tablet\n$width-md: 768px !default;\n// Large screen / desktop (980 + (16 * 2)) <= container + gutters\n$width-lg: 1012px !default;\n// Extra large screen / wide desktop\n$width-xl: 1280px !default;\n\n// Responsive container widths\n$container-sm: $width-sm !default;\n$container-md: $width-md !default;\n$container-lg: $width-lg !default;\n$container-xl: $width-xl !default;\n\n// Breakpoints in the form (name: length)\n$breakpoints: (\n  sm: $width-sm,\n  md: $width-md,\n  lg: $width-lg,\n  xl: $width-xl\n) !default;\n\n// This map in the form (breakpoint: variant) is used to iterate over\n// breakpoints and create both responsive and non-responsive classes in one\n// loop:\n//\n// ```scss\n// @each $breakpoint, $variant of $responsive-variants {\n//   @include breakpoint($breakpoint) {\n//     .foo#{$variant}-bar { foo: bar !important; }\n//   }\n// }\n// ```\n$responsive-variants: (\n  \"\": \"\",\n  sm: \"-sm\",\n  md: \"-md\",\n  lg: \"-lg\",\n  xl: \"-xl\",\n) !default;\n\n// responive utility position values\n$responsive-positions: (\n  static,\n  relative,\n  absolute,\n  fixed,\n  sticky\n) !default;\n\n$sidebar-width: (\n  sm: 220px,\n  md: 256px,\n  lg: 296px,\n  xl: 320px\n) !default;\n\n$sidebar-narrow-width: (\n  md: 240px,\n  lg: 256px,\n  xl: 296px\n) !default;\n\n$sidebar-wide-width: (\n  md: 296px,\n  lg: 320px,\n  xl: 344px\n) !default;\n\n$gutter: (\n  md: $spacer-3,\n  lg: $spacer-4,\n  xl: $spacer-5\n) !default;\n\n$gutter-condensed: (\n  md: $spacer-3,\n  lg: $spacer-3,\n  xl: $spacer-4\n) !default;\n\n$gutter-spacious: (\n  md: $spacer-4,\n  lg: $spacer-5,\n  xl: $spacer-6\n) !default;\n","// GRID\n\n// Columns\n.col-1 { width: (1 / 12 * 100%); }\n.col-2 { width: (2 / 12 * 100%); }\n.col-3 { width: (3 / 12 * 100%); }\n.col-4 { width: (4 / 12 * 100%); }\n.col-5 { width: (5 / 12 * 100%); }\n.col-6 { width: (6 / 12 * 100%); }\n.col-7 { width: (7 / 12 * 100%); }\n.col-8 { width: (8 / 12 * 100%); }\n.col-9 { width: (9 / 12 * 100%); }\n.col-10 { width: (10 / 12 * 100%); }\n.col-11 { width: (11 / 12 * 100%); }\n.col-12 { width: 100%; }\n\n@each $breakpoint in map-keys($breakpoints) {\n  @include breakpoint($breakpoint) {\n    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }\n    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }\n    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }\n    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }\n    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }\n    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }\n    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }\n    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }\n    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }\n    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }\n    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }\n    .col-#{$breakpoint}-12 { width: 100%; }\n  }\n}\n\n// Gutters\n// Apply padding and a negative margin to the outside of the container\n@mixin gutters ($gutter-width: $spacer-3) {\n  margin-right: -$gutter-width;\n  margin-left: -$gutter-width;\n\n  > [class*=\"col-\"] {\n    padding-right: $gutter-width !important;\n    padding-left: $gutter-width !important;\n  }\n}\n\n.gutter {\n  @include gutters($spacer-3);\n}\n\n.gutter-condensed {\n  @include gutters($spacer-2);\n}\n\n.gutter-spacious {\n  @include gutters($spacer-4);\n}\n\n@each $breakpoint in map-keys($breakpoints) {\n  @include breakpoint($breakpoint) {\n    .gutter-#{$breakpoint} { @include gutters($spacer-3); }\n    .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }\n    .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }\n  }\n}\n","// Responsive media queries\n\n@mixin breakpoint($breakpoint) {\n  @if $breakpoint == \"\" {\n    @content;\n  }\n\n  @else {\n    // Retrieves the value from the key\n    $value: map-get($breakpoints, $breakpoint);\n\n    // If the key exists in the map\n    @if $value != null {\n      // Prints a media query based on the value\n      @media (min-width: $value) {\n        @content;\n      }\n    }\n\n    // If the key doesn't exist in the map\n    @else {\n      @warn \"Unfortunately, no value could be retrieved from `#{$breakpoint}`. \"\n        + \"Please make sure it is defined in `$breakpoints` map.\";\n    }\n  }\n}\n\n// Retina media query\n\n@mixin retina-media-query {\n  @media\n    only screen and (-webkit-min-device-pixel-ratio: 2),\n    only screen and (min--moz-device-pixel-ratio: 2),\n    only screen and (-moz-min-device-pixel-ratio: 2),\n    only screen and (-o-min-device-pixel-ratio: 2/1),\n    only screen and (min-device-pixel-ratio: 2),\n    only screen and (min-resolution: 192dpi),\n    only screen and (min-resolution: 2dppx) {\n    @content;\n  }\n}\n\n// Clearfix\n//\n// Clears floats via mixin.\n\n@mixin clearfix {\n  &::before {\n    display: table;\n    content: \"\";\n  }\n\n  &::after {\n    display: table;\n    clear: both;\n    content: \"\";\n  }\n}\n","// Optional offset options to work with grid.scss\n\n// Offset Columns\n\n@each $breakpoint, $variant in $responsive-variants {\n  @include breakpoint($breakpoint) {\n    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }\n    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }\n    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }\n    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }\n    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }\n    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }\n    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }\n    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }\n    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }\n    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }\n    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }\n  }\n}\n","// Layout component\n\n.Layout {\n  display: grid;\n  --Layout-sidebar-width: #{map-get($sidebar-width, \"sm\")};\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(#{$width-sm} - 1px)) {\n    @include flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(#{$width-md} - 1px)) {\n      @include flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(#{$width-lg} - 1px)) {\n      @include flow-as-row;\n    }\n  }\n\n  // Flow as column\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column\n  // stylelint-disable-next-line primer/no-undefined-vars\n  grid-gap: var(--Layout-gutter);\n\n  .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  .Layout-divider {\n    display: none;\n  }\n\n  .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  // Gutter spacing\n\n  @include breakpoint(lg) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    --Layout-gutter: 0;\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @include breakpoint(lg) {\n      --Layout-gutter: 32px;\n    }\n\n    @include breakpoint(xl) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  // Sidebar width\n\n  @each $breakpoint in map-keys($sidebar-width) {\n    @include breakpoint($breakpoint) {\n      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};\n    }\n  }\n\n  &.Layout--sidebar-narrow {\n    @each $breakpoint in map-keys($sidebar-narrow-width) {\n      @include breakpoint($breakpoint) {\n        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};\n      }\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @each $breakpoint in map-keys($sidebar-wide-width) {\n      @include breakpoint($breakpoint) {\n        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};\n      }\n    }\n  }\n\n  // Sidebar position\n\n  &.Layout--sidebarPosition-start {\n    .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: 1fr 0 auto;\n\n    .Layout-main {\n      grid-column: 1;\n    }\n\n    .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  // Sidebar divider\n\n  &.Layout--divided {\n    .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      // stylelint-disable-next-line primer/spacing\n      margin-right: -1px;\n      // stylelint-disable-next-line primer/colors\n      background: var(--color-border-primary);\n    }\n\n    .Layout-main {\n      grid-column: 3 / span 1;\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  // stylelint-disable-next-line primer/no-undefined-vars\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n\n  // Centered main column\n  // FIXME: right-aligned sidebar\n  .Layout-main-centered-md,\n  .Layout-main-centered-lg,\n  .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    > .container-md,\n    > .container-lg,\n    > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  .Layout-main-centered-md {\n    // stylelint-disable-next-line primer/no-undefined-vars\n    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  .Layout-main-centered-lg {\n    // stylelint-disable-next-line primer/no-undefined-vars\n    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  .Layout-main-centered-xl {\n    // stylelint-disable-next-line primer/no-undefined-vars\n    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n","// Layout mixins\n\n@mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  .Layout-sidebar,\n  .Layout-divider,\n  .Layout-main {\n      width: 100% !important;\n      grid-column: 1 !important;\n    }\n\n  &.Layout--divided {\n    @include flow-as-row-divider;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    .Layout-sidebar {\n      display: none;\n    }\n  }\n}\n\n@mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  .Layout-divider {\n    height: 1px;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-bg-canvas-inset);\n      border-color: var(--color-border-primary);\n      border-style: solid;\n      border-width: $border-width 0;\n    }\n  }\n}\n"]}