@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.11

package/packages/core/src/scss/layout/container/_index.scss

@@ -1,628 +0,0 @@
-// @graupl/core container layout styles.
-//
-// This module provides the layout styles for the container component.
-//
-// The container component is a grid container that provides a layout for the main content of a page.
-// It is divided into four sections:
-// - Full-width: A full-width section that spans the entire width of the container.
-// - Feature: A feature section that is used for feature content.
-// - Breakout: A breakout section that is used for breakout content.
-// - Content: The main content section that contains all other content.
-//
-// Optionally, the container component can have sidebars, which divides the content section into five sections:
-// - Sidebar-left: A left sidebar section that is used for sidebar content.
-// - Sidebar-right: A right sidebar section that is used for sidebar content.
-// - Inner-content: A section that contains the main content of the page.
-// - Content-left: A section that contains the sidebar-left and inner-content sections.
-// - Content-right: A section that contains the inner-content and sidebar-right sections.
-//
-// The container layout is as follows:
-// | full-width | feature | breakout | content | breakout | feature | full-width |
-//
-// Nesting a container directly inside of another container will cause the
-// nested container to inherit the grid columns of the parent container.
-//
-// The following classes are generated by default:
-// - `.container`: The main container component.
-// - `.full-width`: A full-width container component.
-// - `.feature`: A feature container component.
-// - `.breakout`: A breakout container component.
-// - `.contain`: A utility class to contain child elements to the content section of the container grid.
-// - `.sidebars`: A utility class to enable sidebars in the container.
-// - `.sidebar-left`: A left sidebar container component.
-// - `.sidebar-right`: A right sidebar container component.
-// - `.content-left`: A left content container component.
-// - `.content-right`: A right content container component.
-// - `.inner-content`: A utility class to contain child elements to the inner content section of the container grid.
-//
-// The following custom properties control the generated classes:
-// - `--graupl-container-gap`: The gap between the container sections.
-// - `--graupl-container-content-max-width`: The maximum width of the content section.
-// - `--graupl-container-sidebar-width`: The width of the sidebar sections.
-// - `--graupl-container-breakout-max-width`: The maximum width of the breakout section.
-// - `--graupl-container-feature-max-width`: The maximum width of the feature section.
-// - `--graupl-container-full-width-section-min-width`: The minimum width of one side of the full-width section.
-// - `--graupl-container-full-width-section-max-width`: The maximum width of one side of the full-width section.
-// - `--graupl-container-feature-section-min-width`: The minimum width of one side of the feature section.
-// - `--graupl-container-feature-section-max-width`: The maximum width of one side of the feature section.
-// - `--graupl-container-breakout-section-min-width`: The minimum width of one side of the breakout section.
-// - `--graupl-container-breakout-section-max-width`: The maximum width of one side of the breakout section.
-// - `--graupl-container-content-section-min-width`: The minimum width of the content section.
-// - `--graupl-container-content-section-max-width`: The maximum width of the content section.
-// - `--graupl-container-full-width-section-width`: The calculated minmax width of the full-width section.
-// - `--graupl-container-feature-section-width`: The calculated minmax width of the feature section.
-// - `--graupl-container-breakout-section-width`: The calculated minmax width of the breakout section.
-// - `--graupl-container-content-section-width`: The calculated minmax width of the content section.
-// - `--graupl-container-sidebar-left-section-width`: The width of the left sidebar section.
-// - `--graupl-container-sidebar-right-section-width`: The width of the right sidebar section.
-// - `--graupl-container-inner-content-section-width`: The calculated minmax width of the inner content section.
-//
-// The following variables control the generated classes:
-// - `$container-selector-base`: The base selector for the container component.
-// - `$container-selector`: The selector for the container component.
-// - `$container-breakout-selector-base`: The base selector for the breakout container component.
-// - `$container-breakout-selector`: The selector for the breakout container component.
-// - `$container-feature-selector-base`: The base selector for the feature container component.
-// - `$container-feature-selector`: The selector for the feature container component.
-// - `$container-full-width-selector-base`: The base selector for the full-width container component.
-// - `$container-full-width-selector`: The selector for the full-width container component.
-// - `$container-contain-selector-base`: The base selector for the contain utility class.
-// - `$container-contain-selector`: The selector for the contain utility class.
-// - `$container-sidebars-selector-base`: The base selector for the sidebars utility class.
-// - `$container-sidebars-selector`: The selector for the sidebars utility class.
-// - `$container-content-selector-base`: The base selector for the content container component.
-// - `$container-content-selector`: The selector for the content container component.
-// - `$container-sidebar-selector-base`: The base selector for the sidebar container component.
-// - `$container-sidebar-selector`: The selector for the sidebar container component.
-// - `$container-left-selector-suffix`: The suffix for the left sidebar selector.
-// - `$container-right-selector-suffix`: The suffix for the right sidebar selector.
-// - `$container-inner-selector-prefix`: The prefix for the inner content selector.
-// - `$container-breakout-width`: The width of the breakout section will extend from the content section.
-// - `$container-feature-width`: The width of the feature section will extend from the breakout section.
-// - `$container-sidebar-width`: The width of the sidebar sections.
-//
-// @example
-//   <div class="container">
-//     Regular content
-//     <div class="full-width">
-//       Full-width content
-//     </div>
-//     <div class="feature">
-//       Feature content
-//     </div>
-//     <div class="breakout">
-//       Breakout content
-//     </div>
-//   </div>
-//
-// @example
-//   <div class="container">
-//     Regular content
-//     <div class="feature contain">
-//       Contained feature content
-//     </div>
-//   </div>
-//
-// @example
-//   <div class="container sidebars">
-//     <div class="sidebar-left">
-//       Left sidebar content
-//     </div>
-//     <div class="content-right">
-//       Content right content
-//     </div>
-//   </div>
-//
-// @example
-//   <div class="container sidebars">
-//     <div class="content-left">
-//       Content left content
-//     </div>
-//     <div class="sidebar-right">
-//       Right sidebar content
-//     </div>
-//   </div>
-//
-// @example
-//   <div class="container sidebars">
-//     <div class="sidebar-left">
-//       Left sidebar content
-//     </div>
-//     <div class="inner-content">
-//       Inner content content
-//     </div>
-//     <div class="sidebar-right">
-//       Right sidebar content
-//     </div>
-//   </div>
-
-@use "../../mixins/screen";
-@use "../../mixins/layer" as *;
-@use "defaults";
-@use "variables" as *;
-
-@include layer(layout) {
-  // .container
-  #{defaults.$container-selector-base}#{defaults.$container-selector} {
-    display: grid;
-    grid-template-columns:
-      [full-width-start] $container-full-width-section-width
-      [feature-start] $container-feature-section-width
-      [breakout-start] $container-breakout-section-width
-      [content-start] $container-content-section-width
-      [content-end]
-      $container-breakout-section-width [breakout-end]
-      $container-feature-section-width [feature-end]
-      $container-full-width-section-width [full-width-end];
-    container-type: inline-size;
-
-    // Container components should span the full width of their parent container
-    // and inherit the grid columns.
-    //
-    // > .container
-    > #{defaults.$container-selector-base}#{defaults.$container-selector} {
-      grid-column: 1/-1;
-      grid-template-columns: subgrid;
-      container-type: normal;
-    }
-
-    // Everything in the container that isn't a container component should
-    // be in the content section.
-    //
-    // > :not(.container, .breakout, .feature, .full-width)
-    > :not(
-        #{defaults.$container-selector-base}#{defaults.$container-selector},
-        #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-        #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-        #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-      ) {
-      grid-column: content;
-    }
-
-    // Contain components should inherit the container's grid columns and
-    // force all children to be in the content section.
-    //
-    // > .contain
-    #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-      display: grid;
-      grid-template-columns: subgrid;
-
-      // > :not(.container, .breakout, .feature, .full-width)
-      > :not(
-          #{defaults.$container-selector-base}#{defaults.$container-selector},
-          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-        ) {
-        grid-column: content;
-      }
-    }
-
-    // Set up the container components to span the appropriate grid columns.
-    //
-    // .breakout
-    #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {
-      grid-column: breakout;
-    }
-
-    // .feature
-    #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-      grid-column: feature;
-    }
-
-    // .full-width
-    #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {
-      grid-column: full-width;
-    }
-
-    // &.sidebars
-    &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
-      // .sidebar-left
-      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-
-        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)
-        > :not(
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}
-          ) {
-          grid-column: content;
-        }
-      }
-
-      // .sidebar-right
-      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-
-        // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
-        > :not(
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-          ) {
-          grid-column: content;
-        }
-      }
-
-      // .content-right
-      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-
-        // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
-        > :not(
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-          ) {
-          grid-column: content;
-        }
-
-        // Contain components should inherit the container's grid columns and
-        // force all children to be in the content section.
-        //
-        // > .contain
-        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-            ) {
-            grid-column: content;
-          }
-        }
-      }
-
-      // .content-left
-      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-
-        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
-        > :not(
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-          ) {
-          grid-column: content;
-        }
-
-        // Contain components should inherit the container's grid columns and
-        // force all children to be in the content section.
-        //
-        // > .contain
-        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-          // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
-              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-            ) {
-            grid-column: content;
-          }
-        }
-      }
-
-      // .inner-content
-      #{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-
-        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
-        > :not(
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
-            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-          ) {
-          grid-column: content;
-        }
-
-        // Contain components should inherit the container's grid columns and
-        // force all children to be in the content section.
-        //
-        // > .contain
-        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-          // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
-              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
-              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
-            ) {
-            grid-column: content;
-          }
-        }
-      }
-    }
-
-    @include screen.trigger(allow-sidebars) {
-      // &.sidebars
-      &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
-        grid-template-columns:
-          [full-width-start] $container-full-width-section-width
-          [feature-start] $container-feature-section-width
-          [breakout-start] $container-breakout-section-width
-          [content-start sidebar-left-start content-left-start] $container-sidebar-left-section-width
-          [sidebar-left-end inner-content-start content-right-start] $container-inner-content-section-width
-          [content-left-end inner-content-end sidebar-right-start] $container-sidebar-right-section-width
-          [content-right-end sidebar-right-end content-end]
-          $container-breakout-section-width [breakout-end]
-          $container-feature-section-width [feature-end]
-          $container-full-width-section-width [full-width-end];
-
-        // .sidebar-left
-        #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
-          grid-row: 1;
-
-          // Make sure other container classes do not break the layout inside of the sidebar.
-          //
-          // &:not(.container)
-          &:not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector}
-            ) {
-            // &, .container, .breakout, .feature, .full-width
-            &,
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-              grid-column-end: sidebar-left-end;
-            }
-          }
-
-          // Lock content to the sidebar-left section.
-          //
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-            ) {
-            grid-column: sidebar-left;
-          }
-
-          // Contain components should inherit the container's grid columns and
-          // force all children to be in the sidebar-left section.
-          //
-          // > .contain
-          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-            // > :not(.container, .breakout, .feature, .full-width)
-            > :not(
-                #{defaults.$container-selector-base}#{defaults.$container-selector},
-                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-              ) {
-              grid-column: sidebar-left;
-            }
-          }
-        }
-
-        // .sidebar-right
-        #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
-          grid-row: 1;
-
-          // Make sure other container classes do not break the layout inside of the sidebar.
-          //
-          // &:not(.container)
-          &:not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector}
-            ) {
-            // &, .container, .breakout, .feature, .full-width
-            &,
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-              grid-column-start: sidebar-right-start;
-            }
-          }
-
-          // Lock content to the sidebar-right section.
-          //
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-            ) {
-            grid-column: sidebar-right;
-          }
-
-          // Contain components should inherit the container's grid columns and
-          // force all children to be in the sidebar-right section.
-          //
-          // > .contain
-          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-            // > :not(.container, .breakout, .feature, .full-width)
-            > :not(
-                #{defaults.$container-selector-base}#{defaults.$container-selector},
-                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-              ) {
-              grid-column: sidebar-right;
-            }
-          }
-        }
-
-        // .content-right
-        #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
-          grid-row: 1;
-
-          // Make sure other container classes do not break the layout inside of the content.
-          //
-          // &:not(.container)
-          &:not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector}
-            ) {
-            // &, .container, .breakout, .feature, .full-width
-            &,
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-              grid-column-start: content-right-start;
-            }
-          }
-
-          // Lock content to the content-right section.
-          //
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-            ) {
-            grid-column: content-right;
-          }
-
-          // Contain components should inherit the container's grid columns and
-          // force all children to be in the content-right section.
-          //
-          // > .contain
-          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-            // > :not(.container, .breakout, .feature, .full-width)
-            > :not(
-                #{defaults.$container-selector-base}#{defaults.$container-selector},
-                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-              ) {
-              grid-column: content-right;
-            }
-          }
-        }
-
-        // .content-left
-        #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
-          grid-row: 1;
-
-          // Make sure other container classes do not break the layout inside of the content.
-          //
-          // &:not(.container)
-          &:not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector}
-            ) {
-            // &, .container, .breakout, .feature, .full-width
-            &,
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-              grid-column-end: content-left-end;
-            }
-          }
-
-          // Lock content to the content-left section.
-          //
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-            ) {
-            grid-column: content-left;
-          }
-
-          // Contain components should inherit the container's grid columns and
-          // force all children to be in the content-left section.
-          //
-          // > .contain
-          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-            // > :not(.container, .breakout, .feature, .full-width)
-            > :not(
-                #{defaults.$container-selector-base}#{defaults.$container-selector},
-                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-              ) {
-              grid-column: content-left;
-            }
-          }
-        }
-
-        // .inner-content
-        #{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
-          grid-row: 1;
-
-          // Make sure other container classes do not break the layout inside of the content.
-          //
-          // &:not(.container)
-          &:not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector}
-            ) {
-            // &, .container, .breakout, .feature, .full-width
-            &,
-            #{defaults.$container-selector-base}#{defaults.$container-selector},
-            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
-              grid-column: inner-content;
-            }
-          }
-
-          // Lock content to the inner-content section.
-          //
-          // > :not(.container, .breakout, .feature, .full-width)
-          > :not(
-              #{defaults.$container-selector-base}#{defaults.$container-selector},
-              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-            ) {
-            grid-column: inner-content;
-          }
-
-          // Contain components should inherit the container's grid columns and
-          // force all children to be in the inner-content section.
-          //
-          // > .contain
-          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
-            // > :not(.container, .breakout, .feature, .full-width)
-            > :not(
-                #{defaults.$container-selector-base}#{defaults.$container-selector},
-                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
-                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
-                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
-              ) {
-              grid-column: inner-content;
-            }
-          }
-        }
-      }
-    }
-  }
-}