@cloudscape-design/components 3.0.0

package/app-layout/visual-refresh/styles.scoped.css

@@ -0,0 +1,1179 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+section.awsui_appbar_hyvsj_n9r5c_93:not(#\9) {
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  grid-column: 3;
+  grid-row: 2;
+  grid-template-columns: auto 1fr auto;
+  /* 
+  Because the Breadcrumbs component cannot be styled directly it is 
+  wrapped in a generic element that will apply style adjustments as needed.
+  */
+  /*
+  In large viewports the buttons that trigger the Navigation and Tools 
+  drawers from the AppBar are suppressed and replaced by the buttons 
+  that render in the Navigation and Tools components. Additionally, 
+  the content wrapper around the breadcrumbs component has variable 
+  top and bottom padding based on whether or not the Notifications 
+  and Header components exist.
+  */
+  /*
+  In mobile viewports the AppBar becomes sticky and is repositioned to
+  span the entire column definition of the Layout grid.
+  */
+}
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-nav_hyvsj_n9r5c_117:not(#\9) {
+  grid-column: 1;
+  margin-right: 16px;
+  margin-right: var(--space-m-17eucw, 16px);
+}
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121:not(#\9) {
+  grid-column: 2;
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+}
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-tools_hyvsj_n9r5c_125:not(#\9) {
+  grid-column: 3;
+  margin-left: 16px;
+  margin-left: var(--space-m-17eucw, 16px);
+}
+@media (min-width: 689px) {
+  section.awsui_appbar_hyvsj_n9r5c_93:not(#\9) {
+    /*
+    If Breadcrumbs do not exist then the AppBar should be suppressed
+    because in large viewports the triggers are rendered
+    in the Navigation and Tools components.
+    */
+    /*
+    If there is no Notifications content then the AppBar should 
+    appear to be the first rendered content even though the 
+    Notifications DOM node will still exist. The top padding 
+    should vertically align it with the Navigation and Tools circular buttons.
+    */
+    /*
+    If there is Notifications content then the AppBar should have 
+    minimal top padding in addition to the bottom margin on the 
+    Notifications component.
+    */
+    /*
+    If the Header does not exist then the AppBar is the last 
+    rendered content before the Main component. Additional 
+    bottom padding is added to create space between the 
+    Breadcrumbs and Main components that expands the height 
+    of the dark header.
+    */
+    /*
+    If the content type supports a dark sticky header then 
+    minimal bottom padding should be on the breadcrumbs to
+    reduce the the vertical distance from the main content.
+    */
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160) {
+    display: none;
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-nav_hyvsj_n9r5c_117:not(#\9),
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-tools_hyvsj_n9r5c_125:not(#\9) {
+    display: none;
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121:not(#\9):not(.awsui_has-notifications-content_hyvsj_n9r5c_167) {
+    padding-top: 16px;
+    padding-top: var(--space-scaled-m-pv0fmt, 16px);
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121.awsui_has-notifications-content_hyvsj_n9r5c_167:not(#\9) {
+    padding-top: 12px;
+    padding-top: var(--space-scaled-2x-s-9svxjy, 12px);
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121:not(#\9):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173),
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121:not(#\9):not(.awsui_has-header_hyvsj_n9r5c_173).awsui_content-type-wizard_hyvsj_n9r5c_174 {
+    padding-bottom: 16px;
+    padding-bottom: var(--space-m-17eucw, 16px);
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121.awsui_content-type-cards_hyvsj_n9r5c_177:not(#\9),
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121.awsui_content-type-table_hyvsj_n9r5c_178:not(#\9) {
+    padding-bottom: 4px;
+    padding-bottom: var(--space-xxs-ynfts5, 4px);
+    z-index: 799;
+  }
+}
+@media (max-width: 688px) {
+  section.awsui_appbar_hyvsj_n9r5c_93:not(#\9) {
+    background-color: #000716;
+    background-color: var(--color-background-home-header-mpq08f, #000716);
+    border-bottom: 1px solid #e9ebed;
+    border-bottom: 1px solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+    box-shadow: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
+    box-shadow: var(--shadow-panel-toggle-3fk0ch, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+    grid-column: 1/span 5;
+    grid-row: 1;
+    height: calc(2 * 16px + 8px);
+    height: calc(2 * var(--space-m-17eucw, 16px) + var(--space-scaled-xs-6859qs, 8px));
+    padding: 0 16px;
+    padding: 0 var(--space-m-17eucw, 16px);
+    position: sticky;
+    top: var(--awsui-offset-top-ujkcpl);
+    z-index: 1000;
+    /*
+    Remove any existing top and bottom padding from the Breadcrumbs since
+    they are now sticky positioned in the viewport with the AppBar.
+    */
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-nav_hyvsj_n9r5c_117:not(#\9),
+section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_appbar-tools_hyvsj_n9r5c_125:not(#\9) {
+    display: block;
+  }
+  section.awsui_appbar_hyvsj_n9r5c_93 > .awsui_breadcrumbs_hyvsj_n9r5c_121:not(#\9) {
+    padding: 0;
+  }
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+div.awsui_background_hyvsj_n9r5c_213:not(#\9) {
+  display: contents;
+}
+div.awsui_background_hyvsj_n9r5c_213 > .awsui_notifications-appbar-header_hyvsj_n9r5c_216:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  grid-column: 1/span 5;
+  grid-row: 1/span 3;
+  /*
+  The cards and table content types have a sticky dark header that is 
+  offset beneath the sticky notifications if they exist. If the background 
+  is not sticky then it will scroll out of the viewport leaving a white space
+  behind the notifications above the content dark header.
+  */
+}
+@media (min-width: 689px) {
+  div.awsui_background_hyvsj_n9r5c_213 > .awsui_notifications-appbar-header_hyvsj_n9r5c_216.awsui_content-type-cards_hyvsj_n9r5c_177.awsui_has-notifications-content_hyvsj_n9r5c_167.awsui_sticky-notifications_hyvsj_n9r5c_228:not(#\9), div.awsui_background_hyvsj_n9r5c_213 > .awsui_notifications-appbar-header_hyvsj_n9r5c_216.awsui_content-type-table_hyvsj_n9r5c_178.awsui_has-notifications-content_hyvsj_n9r5c_167.awsui_sticky-notifications_hyvsj_n9r5c_228:not(#\9) {
+    position: sticky;
+    top: var(--awsui-offset-top-ujkcpl);
+    z-index: 799;
+  }
+}
+div.awsui_background_hyvsj_n9r5c_213 > .awsui_overlap_hyvsj_n9r5c_234:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  grid-column: 1/span 5;
+  grid-row: 4;
+  /*
+  The cards and table content types have sticky header content that 
+  will retain position on viewport scroll. They are setting the 
+  dynamicOverlapHeight property in the AppLayout context with a container query 
+  that observes the content height. The background needs to be sticky in 
+  desktop viewports without overlapping notification content if it exists.
+  */
+}
+@media (min-width: 689px) {
+  div.awsui_background_hyvsj_n9r5c_213 > .awsui_overlap_hyvsj_n9r5c_234.awsui_content-type-cards_hyvsj_n9r5c_177:not(#\9), div.awsui_background_hyvsj_n9r5c_213 > .awsui_overlap_hyvsj_n9r5c_234.awsui_content-type-table_hyvsj_n9r5c_178:not(#\9) {
+    position: sticky;
+    top: var(--awsui-offset-top-with-notifications-ujkcpl);
+    z-index: 799;
+  }
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+header.awsui_content_hyvsj_n9r5c_174:not(#\9) {
+  grid-column: 3;
+  grid-row: 3;
+  padding-bottom: 24px;
+  padding-bottom: var(--space-dark-header-padding-bottom-jg1586, 24px);
+}
+@media (min-width: 689px) {
+  header.awsui_content_hyvsj_n9r5c_174:not(#\9) {
+    /*
+    If Notifications exist and Breadcrumbs do not then Notifications 
+    is the previous adjacent sibling to the Header. Add minimal top padding 
+    in addition to the bottom padding on the Notifications.
+    */
+    /*
+    If Breadcrumbs exists it is necessarily the previous adjacent 
+    sibling and the Header should have no padding. Add minimal top 
+    padding for vertical space between the Breadcrumbs and Header.
+    */
+    /*
+    If Notifications and Breadcrumbs do not exist then the Header 
+    is the first rendered center content. The top padding should 
+    vertically align the Header with the Navigation and Tools 
+    circular buttons.
+    */
+  }
+  header.awsui_content_hyvsj_n9r5c_174.awsui_has-notifications-content_hyvsj_n9r5c_167:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160) {
+    padding-top: 8px;
+    padding-top: var(--space-scaled-xs-6859qs, 8px);
+  }
+  header.awsui_content_hyvsj_n9r5c_174.awsui_has-breadcrumbs_hyvsj_n9r5c_160:not(#\9) {
+    padding-top: 4px;
+    padding-top: var(--space-xxs-ynfts5, 4px);
+  }
+  header.awsui_content_hyvsj_n9r5c_174:not(#\9):not(.awsui_has-notifications-content_hyvsj_n9r5c_167):not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160) {
+    padding-top: 8px;
+    padding-top: var(--space-scaled-xs-6859qs, 8px);
+  }
+}
+@media (max-width: 688px) {
+  header.awsui_content_hyvsj_n9r5c_174:not(#\9) {
+    padding: 16px 0 24px;
+    padding: var(--space-m-17eucw, 16px) 0 var(--space-dark-header-padding-bottom-jg1586, 24px);
+    /*
+    Breadcrumbs has moved to first position and sticky so Notifications 
+    are now the previous adjacent sibling if they exist.
+    */
+  }
+  header.awsui_content_hyvsj_n9r5c_174.awsui_has-notifications-content_hyvsj_n9r5c_167:not(#\9) {
+    padding-top: 8px;
+    padding-top: var(--space-scaled-xs-6859qs, 8px);
+  }
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+  The first and last column definitions have two responsibilities.
+  If Navigation and/or Tools exist then that will determine the width of
+  the first and last columns, respectively, and the content in these drawers
+  will create horizontal space from the center column content. However, if the
+  navigationHide and/or toolsHide properties have been set then the first
+  and last column width will default to the minimum content gap properties to
+  create the necessary visual space around the main content.
+
+  The minimum content width property is set to zero and applied under all
+  circumstances regardless of whether the minContentWidth property is
+  explicitly set in script.
+  */
+.awsui_layout_hyvsj_n9r5c_322:not(#\9) {
+  --awsui-content-gap-left-ujkcpl: 0px;
+  --awsui-content-gap-right-ujkcpl: 0px;
+  --awsui-content-height-ujkcpl: calc(100vh - var(--awsui-header-height-ujkcpl) - var(--awsui-footer-height-ujkcpl));
+  --awsui-default-max-content-width-ujkcpl: 1280px;
+  --awsui-default-min-content-width-ujkcpl: 0px;
+  --awsui-footer-height-ujkcpl: 0px;
+  --awsui-header-height-ujkcpl: 0px;
+  --awsui-layout-width-ujkcpl: 0px;
+  --awsui-main-offset-left-ujkcpl: 0px;
+  --awsui-max-content-width-ujkcpl: 0px;
+  --awsui-min-content-width-ujkcpl: 280px;
+  --awsui-notifications-height-ujkcpl: 0px;
+  --awsui-offset-top-ujkcpl: 0px;
+  --awsui-offset-top-with-notifications-ujkcpl: 0px;
+  --awsui-overlap-height-ujkcpl: var(--space-dark-header-overlap-distance-hfejul, 36px);
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  display: grid;
+  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-ujkcpl) 1fr;
+  grid-template-columns: min-content minmax(var(--awsui-content-gap-left-ujkcpl), 1fr) minmax(var(--awsui-default-min-content-width-ujkcpl), var(--awsui-default-max-content-width-ujkcpl)) minmax(var(--awsui-content-gap-right-ujkcpl), 1fr) min-content;
+  position: relative;
+  /*
+  Only use the max content width custom property for the middle column definition
+  if the maxContentWidth property has been explicitly set to a non-zero value and
+  subsequently set the has-max-content-width data attribute to true.
+  */
+  /*
+  Warning! This is a hack! We are implementing a short term fix to prevent the 
+  tools drawer from potentially getting pushed off screen. Currently there is no 
+  protection against a navigationWidth, minContentWidth, and toolsWidth that are 
+  in excess ove the available space in the viewport. To accomodate this we remove 
+  the minContentWidth and set it to zero in small viewports and below until the 
+  isMobile breakpoint sets the drawers to overlay at 100vw.
+  */
+  /*
+  Override the dark header overlap height property if isOverlapDisabled is true.
+  The is computed state from props that can be found in the AppLayout context.
+  */
+  /*
+  If disableBodyScroll is false (this is the overwhelming majority
+  of use cases and the default scenario) then the scrollable element
+  will be the document body which is a parent of the AppLayout component.
+  The Layout should have a minimum but not fixed content height set to the
+  viewport height less the header and footer height set by the resize
+  observers in the component. The offset top value for components
+  with position: sticky (AppBar, Navigation, Notifications, Tools) will
+  be set to the header height value. The offset top value for AppLayout
+  contentMain children with position: sticky will be the combined value of the
+  header and notifications height in addition to the notifications top margin
+  and some additional vertical space for aesthetics.
+  */
+  /*
+  If disableBodyScroll is true (very uncommon use case) then the
+  AppLayout component and not the document body will be the scrollable
+  element. This requires a fixed height instead of a minimum height
+  with a vertical scroll policy. The offset top value for components
+  with position: sticky (AppBar, Navigation, Notifications, Tools) will
+  be set zero since the AppLayout is nearest scrollable parent and any
+  existing header does not matter. The offset top value for AppLayout
+  contentMain children with position: sticky will be the value of the
+  notifications height in addition to the notifications top margin
+  and some additional vertical space for aesthetics.
+  */
+  /*
+  In desktop viewports the content gap property for the left and right 
+  columns should override the default of zero if the navigationHide 
+  or toolsHide property is set. This ensures adequate horizontal space
+  for the center column from the edges of the viewport when there is 
+  not left or right content.
+
+  Warning! If these design tokens change it will adversely impact the 
+  calculation used to determine the Split Panel maximum width in the 
+  handleSplitPanelMaxWidth function in the context.
+  */
+  /*
+  In mobile viewports the Navigation and Tools drawers are hidden
+  and triggered by the AppBar which then take up the entire viewport.
+  The center column needs permanent space from the horizontal viewport 
+  edges regardless of whether or not there is a Navigation or Tools. 
+  */
+}
+@media (min-width: 1401px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_has-max-content-width_hyvsj_n9r5c_404) {
+    --awsui-default-max-content-width-ujkcpl: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_has-max-content-width_hyvsj_n9r5c_404) {
+    --awsui-default-max-content-width-ujkcpl: 1440px;
+  }
+}
+@media (min-width: 2541px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_has-max-content-width_hyvsj_n9r5c_404) {
+    --awsui-default-max-content-width-ujkcpl: 1620px;
+  }
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_has-max-content-width_hyvsj_n9r5c_404:not(#\9) {
+  --awsui-default-max-content-width-ujkcpl: var(--awsui-max-content-width-ujkcpl);
+}
+@media (min-width: 993px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9) {
+    --awsui-default-min-content-width-ujkcpl: var(--awsui-min-content-width-ujkcpl, 280px);
+  }
+}
+@media (max-width: 992px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9) {
+    --awsui-default-min-content-width-ujkcpl: 0px;
+  }
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_is-overlap-disabled_hyvsj_n9r5c_431:not(#\9) {
+  --awsui-overlap-height-ujkcpl: 0;
+}
+.awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_disable-body-scroll_hyvsj_n9r5c_434) {
+  --awsui-offset-top-ujkcpl: var(--awsui-header-height-ujkcpl);
+  min-height: var(--awsui-content-height-ujkcpl);
+}
+.awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_disable-body-scroll_hyvsj_n9r5c_434):not(.awsui_has-sticky-notifications_hyvsj_n9r5c_438) {
+  --awsui-offset-top-with-notifications-ujkcpl: var(--awsui-header-height-ujkcpl);
+}
+.awsui_layout_hyvsj_n9r5c_322:not(#\9):not(.awsui_disable-body-scroll_hyvsj_n9r5c_434).awsui_has-sticky-notifications_hyvsj_n9r5c_438 {
+  --awsui-offset-top-with-notifications-ujkcpl: calc(
+      var(--awsui-header-height-ujkcpl) + var(--awsui-notifications-height-ujkcpl) + var(--space-xs-rsr2qu, 8px) + var(--space-xxxs-k2w98v, 2px)
+    );
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_disable-body-scroll_hyvsj_n9r5c_434:not(#\9) {
+  --awsui-offset-top-ujkcpl: 0px;
+  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-ujkcpl) 1fr auto;
+  height: var(--awsui-content-height-ujkcpl);
+  overflow-y: scroll;
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_disable-body-scroll_hyvsj_n9r5c_434.awsui_has-split-panel_hyvsj_n9r5c_452.awsui_split-panel-position-bottom_hyvsj_n9r5c_452:not(#\9) {
+  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-ujkcpl) repeat(2, auto);
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_disable-body-scroll_hyvsj_n9r5c_434:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_n9r5c_438) {
+  --awsui-offset-top-with-notifications-ujkcpl: 0px;
+}
+.awsui_layout_hyvsj_n9r5c_322.awsui_disable-body-scroll_hyvsj_n9r5c_434.awsui_has-sticky-notifications_hyvsj_n9r5c_438:not(#\9) {
+  --awsui-offset-top-with-notifications-ujkcpl: calc(
+      var(--awsui-notifications-height-ujkcpl) + var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px)
+    );
+}
+@media (min-width: 689px) {
+  .awsui_layout_hyvsj_n9r5c_322.awsui_has-content-gap-left_hyvsj_n9r5c_464:not(#\9) {
+    --awsui-content-gap-left-ujkcpl: var(--space-scaled-2x-xxxl-lbp35j, 40px);
+  }
+  .awsui_layout_hyvsj_n9r5c_322.awsui_has-content-gap-right_hyvsj_n9r5c_467:not(#\9) {
+    --awsui-content-gap-right-ujkcpl: var(--space-scaled-2x-xxxl-lbp35j, 40px);
+  }
+}
+@media (max-width: 688px) {
+  .awsui_layout_hyvsj_n9r5c_322:not(#\9) {
+    --awsui-content-gap-left-ujkcpl: var(--space-l-4vl6xu, 20px);
+    --awsui-content-gap-right-ujkcpl: var(--space-l-4vl6xu, 20px);
+  }
+}
+
+/*
+This CSS class is applied to the document body to prevent overflow scrolling
+when the navigation or tools drawers are open in responsive viewports. 
+*/
+.awsui_block-body-scroll_hyvsj_n9r5c_482:not(#\9) {
+  overflow: hidden;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_container_hyvsj_n9r5c_490:not(#\9) {
+  grid-column: 3;
+  grid-row: 4/span 2;
+  padding-bottom: 40px;
+  padding-bottom: var(--space-layout-content-bottom-kg9l42, 40px);
+  /*
+  If disableContentPaddings is enabled then the Main content has a different 
+  behavior inside the Layout grid. By default it will render across the entire 
+  grid column span. If the Navigation is open on the left, we increment the 
+  start column by one. If the Tools or Split Panel (in side position) is open 
+  on the right, we decrement the column end by one.
+  */
+  /*
+  If disableContentPaddings is not enabled (the majority of use cases) then 
+  the following code block will compute the padding behavior for the Main 
+  under various circumstances.
+  */
+}
+.awsui_container_hyvsj_n9r5c_490.awsui_disable-content-paddings_hyvsj_n9r5c_507:not(#\9) {
+  grid-column: 1/6;
+  padding: 0;
+}
+@media (min-width: 689px) {
+  .awsui_container_hyvsj_n9r5c_490.awsui_disable-content-paddings_hyvsj_n9r5c_507.awsui_is-navigation-open_hyvsj_n9r5c_512:not(#\9) {
+    grid-column-start: 2;
+  }
+  .awsui_container_hyvsj_n9r5c_490.awsui_disable-content-paddings_hyvsj_n9r5c_507.awsui_is-tools-open_hyvsj_n9r5c_515:not(#\9), .awsui_container_hyvsj_n9r5c_490.awsui_disable-content-paddings_hyvsj_n9r5c_507.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_split-panel-position-side_hyvsj_n9r5c_515:not(#\9) {
+    grid-column-end: 5;
+  }
+}
+@media (min-width: 689px) {
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507) {
+    /*
+    Notifications is the previous adjacent sibling to the Main in 
+    desktop viewports if there are no Breadcrumbs or Header. Use additional
+    to padding on the Main.
+    */
+    /*
+    Main is the only rendered center content if there are no Notifications, 
+    Breadcrumbs, or Header. Use minimal top padding.
+    */
+    /*
+    If the Header exists then it is necessarily the previous adjacent 
+    sibling to the Main which requires no top padding.
+    */
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-default_hyvsj_n9r5c_535.awsui_has-notifications-content_hyvsj_n9r5c_167:not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173), .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-form_hyvsj_n9r5c_535.awsui_has-notifications-content_hyvsj_n9r5c_167:not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173) {
+    padding-top: 16px;
+    padding-top: var(--space-scaled-m-pv0fmt, 16px);
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-default_hyvsj_n9r5c_535:not(.awsui_has-notifications-content_hyvsj_n9r5c_167):not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173), .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-form_hyvsj_n9r5c_535:not(.awsui_has-notifications-content_hyvsj_n9r5c_167):not(.awsui_has-breadcrumbs_hyvsj_n9r5c_160):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173) {
+    padding-top: 8px;
+    padding-top: var(--space-scaled-xs-6859qs, 8px);
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_has-header_hyvsj_n9r5c_173, .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173 {
+    padding-top: 0;
+  }
+}
+@media (max-width: 688px) {
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507) {
+    /*
+    If the Notifications exist but the Header does not then the 
+    Notifications is the previous adjacent sibling to the Main 
+    requiring additional top padding. This is because the Breadcrumbs
+    are now rendered first and positioned sticky.
+    */
+    /*
+    Main is the only rendered center content if there are no Notifications or Header.
+    */
+    /*
+    If the Header exists then it is necessarily the previous adjacent 
+    sibling to the Main which requires no top padding.
+    */
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-default_hyvsj_n9r5c_535.awsui_has-notifications-content_hyvsj_n9r5c_167:not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173), .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-form_hyvsj_n9r5c_535.awsui_has-notifications-content_hyvsj_n9r5c_167:not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173) {
+    padding-top: 16px;
+    padding-top: var(--space-scaled-m-pv0fmt, 16px);
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-default_hyvsj_n9r5c_535:not(.awsui_has-notifications-content_hyvsj_n9r5c_167):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173), .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_content-type-form_hyvsj_n9r5c_535:not(.awsui_has-notifications-content_hyvsj_n9r5c_167):not(.awsui_has-header_hyvsj_n9r5c_173):not(.awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173) {
+    padding-top: 16px;
+    padding-top: var(--space-scaled-m-pv0fmt, 16px);
+  }
+  .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_has-header_hyvsj_n9r5c_173, .awsui_container_hyvsj_n9r5c_490:not(#\9):not(.awsui_disable-content-paddings_hyvsj_n9r5c_507).awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173 {
+    padding-top: 0;
+  }
+}
+.awsui_container_hyvsj_n9r5c_490.awsui_content-type-cards_hyvsj_n9r5c_177:not(#\9), .awsui_container_hyvsj_n9r5c_490.awsui_content-type-table_hyvsj_n9r5c_178:not(#\9), .awsui_container_hyvsj_n9r5c_490.awsui_content-type-wizard_hyvsj_n9r5c_174:not(#\9) {
+  padding-top: 0;
+}
+
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.awsui_unfocusable_hyvsj_n9r5c_576 *:not(#\9) {
+  visibility: hidden !important;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_navigation-container_hyvsj_n9r5c_584:not(#\9) {
+  --awsui-navigation-width-ujkcpl: 280px;
+  display: flex;
+  grid-column: 1;
+  grid-row: 1/span 5;
+  height: var(--awsui-content-height-ujkcpl);
+  position: sticky;
+  top: var(--awsui-offset-top-ujkcpl);
+  z-index: 850;
+}
+@media (min-width: 2541px) {
+  .awsui_navigation-container_hyvsj_n9r5c_584:not(#\9) {
+    --awsui-navigation-width-ujkcpl: 320px;
+  }
+}
+@media (max-width: 688px) {
+  .awsui_navigation-container_hyvsj_n9r5c_584:not(#\9) {
+    left: 0;
+    position: fixed;
+    top: var(--awsui-offset-top-ujkcpl);
+    z-index: 1001;
+  }
+}
+
+nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9) {
+  padding: 12px 20px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
+  /*
+  Apply the animation only in desktop viewports because the AppBar will 
+  take control in responsive viewports.
+  */
+}
+@keyframes awsui_showButtons_hyvsj_n9r5c_1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+nav.awsui_show-navigation_hyvsj_n9r5c_608.awsui_is-navigation-open_hyvsj_n9r5c_512:not(#\9) {
+  display: none;
+}
+@media (min-width: 689px) {
+  nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512) {
+    display: block;
+  }
+  nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512).awsui_animating_hyvsj_n9r5c_630 {
+    animation: awsui_showButtons_hyvsj_n9r5c_1 115ms;
+    animation: awsui_showButtons_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512).awsui_animating_hyvsj_n9r5c_630 {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512).awsui_animating_hyvsj_n9r5c_630, .awsui-mode-entering nav.awsui_show-navigation_hyvsj_n9r5c_608:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512).awsui_animating_hyvsj_n9r5c_630 {
+    animation: none;
+    transition: none;
+  }
+}
+
+nav.awsui_navigation_hyvsj_n9r5c_584:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  box-shadow: 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
+  bottom: 0;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  position: relative;
+  word-wrap: break-word;
+  /*
+  A non-semantic node is added with a fixed width equal to the final Navigation 
+  width. This will create the visual appearance of horizontal movement and 
+  prevent unwanted text wrapping.
+  */
+}
+@keyframes awsui_openNavigation_hyvsj_n9r5c_1 {
+  from {
+    opacity: 0;
+    width: calc(20px * 2 + 40px);
+    width: calc(var(--space-layout-toggle-padding-axl9jr, 20px) * 2 + var(--space-layout-toggle-diameter-hzvqtj, 40px));
+  }
+  to {
+    opacity: 1;
+    width: var(--awsui-navigation-width-ujkcpl);
+  }
+}
+nav.awsui_navigation_hyvsj_n9r5c_584:not(#\9):not(.awsui_is-navigation-open_hyvsj_n9r5c_512) {
+  width: 0;
+  display: none;
+}
+nav.awsui_navigation_hyvsj_n9r5c_584.awsui_is-navigation-open_hyvsj_n9r5c_512.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: awsui_openNavigation_hyvsj_n9r5c_1 115ms;
+  animation: awsui_openNavigation_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  nav.awsui_navigation_hyvsj_n9r5c_584.awsui_is-navigation-open_hyvsj_n9r5c_512.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled nav.awsui_navigation_hyvsj_n9r5c_584.awsui_is-navigation-open_hyvsj_n9r5c_512.awsui_animating_hyvsj_n9r5c_630:not(#\9), .awsui-mode-entering nav.awsui_navigation_hyvsj_n9r5c_584.awsui_is-navigation-open_hyvsj_n9r5c_512.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: none;
+  transition: none;
+}
+nav.awsui_navigation_hyvsj_n9r5c_584 > .awsui_animated-content_hyvsj_n9r5c_690:not(#\9) {
+  width: var(--awsui-navigation-width-ujkcpl);
+}
+@media (max-width: 688px) {
+  nav.awsui_navigation_hyvsj_n9r5c_584:not(#\9) {
+    --awsui-navigation-width-ujkcpl: 100vw;
+  }
+}
+
+.awsui_hide-navigation_hyvsj_n9r5c_699:not(#\9) {
+  position: absolute;
+  right: 16px;
+  right: var(--space-m-17eucw, 16px);
+  top: 15px;
+  top: var(--size-vertical-panel-icon-offset-ti40n4, 15px);
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_notifications_hyvsj_n9r5c_216:not(#\9) {
+  grid-column: 3;
+  grid-row: 1;
+  z-index: 825;
+  /*
+  In desktop viewports the notifications will always be the first 
+  slot rendered in the center column. The padding should create 
+  a centered vertical alignment with the circular buttons for the
+  navigation and tools drawers.
+  */
+  /*
+  In mobile viewports the notifications should never be sticky even 
+  if the property is set. Padding is added to give adequate 
+  vertical space from the sticky AppBar the subsequent adjacent sibling.
+  */
+}
+@media (min-width: 689px) {
+  .awsui_notifications_hyvsj_n9r5c_216:not(#\9) {
+    margin: 8px 0;
+    margin: var(--space-xs-rsr2qu, 8px) 0;
+    /*
+    var(--space-xs-rsr2qu, 8px) token needs to align with the $offsetTopWithNotifications 
+    calculation in the layout CSS. 
+    */
+  }
+  .awsui_notifications_hyvsj_n9r5c_216.awsui_sticky-notifications_hyvsj_n9r5c_228:not(#\9) {
+    position: sticky;
+    top: calc(var(--awsui-offset-top-ujkcpl) + 8px);
+    top: calc(var(--awsui-offset-top-ujkcpl) + var(--space-xs-rsr2qu, 8px));
+  }
+  .awsui_notifications_hyvsj_n9r5c_216:not(#\9):not(.awsui_has-notifications-content_hyvsj_n9r5c_167) {
+    margin: 0;
+  }
+}
+@media (max-width: 688px) {
+  .awsui_notifications_hyvsj_n9r5c_216:not(#\9) {
+    grid-row: 2;
+    margin: 12px 0;
+    margin: var(--space-scaled-s-cu1hzn, 12px) 0;
+  }
+  .awsui_notifications_hyvsj_n9r5c_216.awsui_sticky-notifications_hyvsj_n9r5c_228:not(#\9) {
+    position: static;
+  }
+  .awsui_notifications_hyvsj_n9r5c_216:not(#\9):not(.awsui_has-notifications-content_hyvsj_n9r5c_167) {
+    margin: 0;
+  }
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+When the Split Panel is in the bottom position it will be an additional
+row entry in the grid definition within the Layout component. The state of 
+the Navigation and Tools components will adjust the start and end column
+within. In the bottom position, the Split Panel is simply a direct child 
+of the Tools component flex container and should consume 100% of the 
+parent height.
+*/
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766:not(#\9) {
+  bottom: var(--awsui-footer-height-ujkcpl);
+  display: none;
+  grid-column: 1/6;
+  height: auto;
+  position: sticky;
+  z-index: 851;
+  /*
+  Unlike the side position the Split Panel is persistent in the DOM 
+  when in the bottom position.
+  */
+  /*
+  Warning! This is a hack! The existing design token for the split panel 
+  shadow in the bottom position does not render in the refactored code.
+  It appears to be related to the fact that the legacy split panel element 
+  has a height equal to the expanded height and a corresponding translation 
+  of the Y position so it is moved off the screen. This will need to be 
+  refactored with an adjustment to the split panel design token.
+  */
+  /*
+  When the data attribute changes indicating the Split Panel has been opened
+  apply the animation to the height property.
+  */
+}
+@keyframes awsui_openSplitPanelBottom_hyvsj_n9r5c_1 {
+  from {
+    height: 0;
+    height: var(--awsui-split-panel-reported-header-size-ujkcpl, 0);
+  }
+  to {
+    height: var(--awsui-split-panel-reported-size-ujkcpl);
+  }
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_disable-body-scroll_hyvsj_n9r5c_434:not(#\9) {
+  bottom: 0;
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-navigation-open_hyvsj_n9r5c_512.awsui_position-bottom_hyvsj_n9r5c_801:not(#\9) {
+  grid-column-start: 2;
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801:not(#\9) {
+  grid-column-end: 5;
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_position-bottom_hyvsj_n9r5c_801:not(#\9) {
+  display: block;
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766:not(#\9):not(.awsui_is-split-panel-open_hyvsj_n9r5c_515).awsui_position-bottom_hyvsj_n9r5c_801 {
+  box-shadow: rgba(0, 7, 22, 0.1) 0px -32px 32px -24px;
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801:not(#\9) {
+  box-shadow: 0px -36px 36px -36px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-split-bottom-otfetg, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
+}
+section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: awsui_openSplitPanelBottom_hyvsj_n9r5c_1 115ms;
+  animation: awsui_openSplitPanelBottom_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801.awsui_animating_hyvsj_n9r5c_630:not(#\9), .awsui-mode-entering section.awsui_split-panel-bottom_hyvsj_n9r5c_766.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-bottom_hyvsj_n9r5c_801.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+section.awsui_split-panel-side_hyvsj_n9r5c_830:not(#\9) {
+  height: 100%;
+  overflow-x: hidden;
+  /*
+  The min and max widths are applied when the Split Panel is opened otherwise 
+  it would not be possible to animate the width and the box shadow would 
+  be persistent in the DOM when closed.
+  */
+  /*
+  A non-semantic node is added with a fixed width equal to the final Split Panel 
+  width. This will create the visual appearance of horizontal movement and 
+  prevent unwanted text wrapping.
+  */
+}
+@keyframes awsui_openSplitPanelSide_hyvsj_n9r5c_1 {
+  from {
+    opacity: 0;
+    width: 280px;
+    width: var(--awsui-split-panel-min-width-ujkcpl, 280px);
+  }
+  to {
+    opacity: 1;
+    width: var(--awsui-split-panel-reported-size-ujkcpl);
+  }
+}
+section.awsui_split-panel-side_hyvsj_n9r5c_830:not(#\9):not(.awsui_is-split-panel-open_hyvsj_n9r5c_515), section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_position-bottom_hyvsj_n9r5c_801:not(#\9) {
+  width: 0;
+}
+section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-side_hyvsj_n9r5c_857:not(#\9) {
+  box-shadow: 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
+  max-width: 280px;
+  max-width: var(--awsui-split-panel-max-width-ujkcpl, 280px);
+  min-width: 280px;
+  min-width: var(--awsui-split-panel-min-width-ujkcpl, 280px);
+}
+section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-side_hyvsj_n9r5c_857.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: awsui_openSplitPanelSide_hyvsj_n9r5c_1 115ms;
+  animation: awsui_openSplitPanelSide_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-side_hyvsj_n9r5c_857.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-side_hyvsj_n9r5c_857.awsui_animating_hyvsj_n9r5c_630:not(#\9), .awsui-mode-entering section.awsui_split-panel-side_hyvsj_n9r5c_830.awsui_is-split-panel-open_hyvsj_n9r5c_515.awsui_position-side_hyvsj_n9r5c_857.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: none;
+  transition: none;
+}
+section.awsui_split-panel-side_hyvsj_n9r5c_830 > .awsui_animated-content_hyvsj_n9r5c_690:not(#\9) {
+  height: 100%;
+  max-width: inherit;
+  width: var(--awsui-split-panel-reported-size-ujkcpl);
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+The Tools component container has a max width calculation that depends on the 
+state of the other siblings within the Layout grid definition. The layout width
+is set in the resize observer in the Layout component. The main offset left 
+will calculate the distance from the start of the Layout component. The minimum 
+content width has a default value that can be set directly with the minContentWidth
+property. The content gap right is computed in the Layout styles based on the 
+viewport size and state of the Tools drawer.
+*/
+.awsui_tools-container_hyvsj_n9r5c_894:not(#\9) {
+  /* stylelint-disable scss/operator-no-newline-after */
+  --awsui-tools-max-width-ujkcpl: calc(var(--awsui-layout-width-ujkcpl) - var(--awsui-main-offset-left-ujkcpl) - var(--awsui-default-min-content-width-ujkcpl) - var(--awsui-content-gap-right-ujkcpl));
+  /* stylelint-enable scss/operator-no-newline-after */
+  --awsui-tools-width-ujkcpl: 290px;
+  display: flex;
+  grid-column: 5;
+  grid-row: 1/span 5;
+  height: var(--awsui-content-height-ujkcpl);
+  max-width: var(--awsui-tools-max-width-ujkcpl);
+  position: sticky;
+  top: var(--awsui-offset-top-ujkcpl);
+  z-index: 850;
+}
+@media (min-width: 2541px) {
+  .awsui_tools-container_hyvsj_n9r5c_894:not(#\9) {
+    --awsui-tools-width-ujkcpl: 360px;
+  }
+}
+@media (max-width: 688px) {
+  .awsui_tools-container_hyvsj_n9r5c_894:not(#\9) {
+    --awsui-tools-max-width-ujkcpl: none;
+    --awsui-tools-width-ujkcpl: auto;
+    position: fixed;
+    right: 0;
+    top: var(--awsui-offset-top-ujkcpl);
+    z-index: 1001;
+  }
+}
+
+.awsui_tools_hyvsj_n9r5c_894:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  box-shadow: 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+  position: relative;
+  word-wrap: break-word;
+  /*
+  A non-semantic node is added with a fixed width equal to the final Tools 
+  width. This will create the visual appearance of horizontal movement and 
+  prevent unwanted text wrapping.
+  */
+  /*
+  A right border is needed if the Tools is open and the buttons are persistent in
+  the DOM. This creates a visual vertical boundary between the Tools and the Buttons 
+  only when they are both present. This is the circumstance when there is a Split Panel
+  in the side position.
+  */
+}
+@keyframes awsui_openTools_hyvsj_n9r5c_1 {
+  from {
+    opacity: 0;
+    opacity: var(--awsui-tools-animation-starting-opacity-ujkcpl, 0);
+    width: calc(20px * 2 + 40px);
+    width: calc(var(--space-layout-toggle-padding-axl9jr, 20px) * 2 + var(--space-layout-toggle-diameter-hzvqtj, 40px));
+  }
+  to {
+    opacity: 1;
+    width: var(--awsui-tools-width-ujkcpl);
+  }
+}
+.awsui_tools_hyvsj_n9r5c_894:not(#\9):not(.awsui_is-tools-open_hyvsj_n9r5c_515) {
+  width: 0;
+  display: none;
+}
+.awsui_tools_hyvsj_n9r5c_894.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: awsui_openTools_hyvsj_n9r5c_1 115ms;
+  animation: awsui_openTools_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_tools_hyvsj_n9r5c_894.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_tools_hyvsj_n9r5c_894.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_animating_hyvsj_n9r5c_630:not(#\9), .awsui-mode-entering .awsui_tools_hyvsj_n9r5c_894.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_tools_hyvsj_n9r5c_894 > .awsui_animated-content_hyvsj_n9r5c_690:not(#\9) {
+  width: var(--awsui-tools-width-ujkcpl);
+}
+@media (min-width: 689px) {
+  .awsui_tools_hyvsj_n9r5c_894.awsui_is-tools-open_hyvsj_n9r5c_515.awsui_has-tools-form-persistence_hyvsj_n9r5c_977:not(#\9) {
+    border-right: 2px solid #e9ebed;
+    border-right: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+  }
+}
+@media (max-width: 688px) {
+  .awsui_tools_hyvsj_n9r5c_894:not(#\9) {
+    --awsui-tools-width-ujkcpl: 100vw;
+  }
+}
+
+.awsui_hide-tools_hyvsj_n9r5c_987:not(#\9) {
+  position: absolute;
+  right: 16px;
+  right: var(--space-m-17eucw, 16px);
+  top: 15px;
+  top: var(--size-vertical-panel-icon-offset-ti40n4, 15px);
+  z-index: 1;
+}
+
+/*
+Warning! If these design tokens for padding change it will adversely impact 
+the calculation used to determine the Split Panel maximum width in the 
+handleSplitPanelMaxWidth function in the context.
+*/
+.awsui_show-tools_hyvsj_n9r5c_999:not(#\9) {
+  box-sizing: border-box;
+  padding: 12px 20px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
+  /*
+  Apply the animation only in desktop viewports because the AppBar will 
+  take control in responsive viewports.
+  */
+}
+@keyframes awsui_showButtons_hyvsj_n9r5c_1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.awsui_show-tools_hyvsj_n9r5c_999:not(#\9):not(.awsui_has-tools-form_hyvsj_n9r5c_977) {
+  display: none;
+}
+@media (min-width: 689px) {
+  .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form_hyvsj_n9r5c_977:not(#\9) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    gap: var(--space-xs-rsr2qu, 8px);
+  }
+  .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form_hyvsj_n9r5c_977.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: awsui_showButtons_hyvsj_n9r5c_1 115ms;
+    animation: awsui_showButtons_hyvsj_n9r5c_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms);
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form_hyvsj_n9r5c_977.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form_hyvsj_n9r5c_977.awsui_animating_hyvsj_n9r5c_630:not(#\9), .awsui-mode-entering .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form_hyvsj_n9r5c_977.awsui_animating_hyvsj_n9r5c_630:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui_show-tools_hyvsj_n9r5c_999.awsui_has-tools-form-persistence_hyvsj_n9r5c_977:not(#\9) {
+    background-color: #ffffff;
+    background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+    z-index: 1;
+  }
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+Warning! If these design tokens for width change it will adversely impact 
+the calculation used to determine the Split Panel maximum width in the 
+handleSplitPanelMaxWidth function in the context.
+*/
+.awsui_trigger_hyvsj_n9r5c_1056:not(#\9) {
+  background: #192534;
+  background: var(--color-background-layout-toggle-default-f9hnkv, #192534);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-panel-toggle-3fk0ch, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+  color: #ffffff;
+  color: var(--color-text-layout-toggle-20sb9r, #ffffff);
+  cursor: pointer;
+  height: 40px;
+  height: var(--space-layout-toggle-diameter-hzvqtj, 40px);
+  padding: 0 12px;
+  padding: 0 var(--space-s-hv8c1d, 12px);
+  width: 40px;
+  width: var(--space-layout-toggle-diameter-hzvqtj, 40px);
+}
+.awsui_trigger_hyvsj_n9r5c_1056[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_trigger_hyvsj_n9r5c_1056[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(3px - 1px);
+}
+.awsui_trigger_hyvsj_n9r5c_1056[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 3px);
+  top: calc(-1 * 3px);
+  width: calc(100% + 2 * 3px);
+  height: calc(100% + 2 * 3px);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_trigger_hyvsj_n9r5c_1056:not(#\9):focus {
+  outline: none;
+}
+.awsui_trigger_hyvsj_n9r5c_1056:not(#\9):hover {
+  background: #354150;
+  background: var(--color-background-layout-toggle-hover-gi0e0b, #354150);
+}
+.awsui_trigger_hyvsj_n9r5c_1056:not(#\9):active {
+  background: #354150;
+  background: var(--color-background-layout-toggle-active-d15dki, #354150);
+}
+.awsui_trigger_hyvsj_n9r5c_1056.awsui_selected_hyvsj_n9r5c_1094:not(#\9) {
+  background: #0972d3;
+  background: var(--color-background-layout-toggle-selected-default-e1giv3, #0972d3);
+  color: #ffffff;
+  color: var(--color-text-layout-toggle-selected-tzwifo, #ffffff);
+}
+.awsui_trigger_hyvsj_n9r5c_1056.awsui_selected_hyvsj_n9r5c_1094:not(#\9):hover {
+  background: #065299;
+  background: var(--color-background-layout-toggle-selected-hover-mes33s, #065299);
+}
+.awsui_trigger_hyvsj_n9r5c_1056.awsui_selected_hyvsj_n9r5c_1094:not(#\9):active {
+  background: #0972d3;
+  background: var(--color-background-layout-toggle-selected-active-9w7pk3, #0972d3);
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/