@awsui/components-react/app-layout/styles.scoped.css

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

._arrow_lm6vo_1efj0_3:not(#\9){
  width:2rem;
  height:1rem;
}
._arrow-outer_lm6vo_1efj0_7:not(#\9), ._arrow-inner_lm6vo_1efj0_7:not(#\9){
  position:absolute;
  overflow:hidden;
  width:2rem;
  height:1rem;
  top:0;
  left:0;
}
._arrow-outer_lm6vo_1efj0_7:not(#\9)::after, ._arrow-inner_lm6vo_1efj0_7:not(#\9)::after{
  content:"";
  box-sizing:border-box;
  display:inline-block;
  position:absolute;
  border-radius:2px 0 0 0;
  bottom:0;
  left:0;
  width:1.4rem;
  height:1.4rem;
  transform:rotate(45deg);
  transform-origin:0 100%;
}
._arrow-outer_lm6vo_1efj0_7:not(#\9)::after{
  background-color:#0073bb;
  background-color:var(--color-border-status-info-3H8Hch, #0073bb);
}
._arrow-inner_lm6vo_1efj0_7:not(#\9){
  top:2px;
}
._arrow-inner_lm6vo_1efj0_7:not(#\9)::after{
  border-radius:1px 0 0 0;
  background-color:#f1faff;
  background-color:var(--color-background-status-info-1qprMO, #f1faff);
}
._arrow-position-right-top_lm6vo_1efj0_38 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after, ._arrow-position-right-bottom_lm6vo_1efj0_38 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after{
  box-shadow:-0.71px 0.71px 4px -2px rgba(0, 28, 36, 0.5);
  box-shadow:-0.71px 0.71px 4px -2px var(--color-shadow-default-nmeETv, rgba(0, 28, 36, 0.5));
}
._arrow-position-left-top_lm6vo_1efj0_41 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after, ._arrow-position-left-bottom_lm6vo_1efj0_41 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after{
  box-shadow:0.71px -0.71px 4px -2px rgba(0, 28, 36, 0.5);
  box-shadow:0.71px -0.71px 4px -2px var(--color-shadow-default-nmeETv, rgba(0, 28, 36, 0.5));
}
._arrow-position-top-center_lm6vo_1efj0_44 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after, ._arrow-position-top-responsive_lm6vo_1efj0_44 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after{
  box-shadow:-0.71px -0.71px 4px -2px rgba(0, 28, 36, 0.5);
  box-shadow:-0.71px -0.71px 4px -2px var(--color-shadow-default-nmeETv, rgba(0, 28, 36, 0.5));
}
._arrow-position-bottom-center_lm6vo_1efj0_47 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after, ._arrow-position-bottom-responsive_lm6vo_1efj0_47 > ._arrow-outer_lm6vo_1efj0_7:not(#\9)::after{
  box-shadow:0.71px 0.71px 4px -2px rgba(0, 28, 36, 0.5);
  box-shadow:0.71px 0.71px 4px -2px var(--color-shadow-default-nmeETv, rgba(0, 28, 36, 0.5));
}

._root_lm6vo_1efj0_51:not(#\9),
._layout-wrapper_lm6vo_1efj0_52:not(#\9){
  display:flex;
  flex-direction:column;
}

._close-button_lm6vo_1efj0_57:not(#\9){
  position:absolute;
  outline:none;
  right:1.6rem;
  right:var(--space-m-3o9QS_, 1.6rem);
  top:1.5rem;
  top:var(--size-vertical-panel-icon-offset-2Iktcb, 1.5rem);
}

._layout_lm6vo_1efj0_52:not(#\9){
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  background-color:#f2f3f3;
  background-color:var(--color-background-layout-main-KdLCQ3, #f2f3f3);
}
._layout-no-scroll_lm6vo_1efj0_70:not(#\9){
  overflow:hidden;
}

._layout-main_lm6vo_1efj0_74:not(#\9){
  flex:1;
  min-width:0;
  background-color:#f2f3f3;
  background-color:var(--color-background-layout-main-KdLCQ3, #f2f3f3);
}
._layout-main-scrollable_lm6vo_1efj0_79:not(#\9){
  overflow:auto;
}

._drawer_lm6vo_1efj0_83:not(#\9){
  flex-shrink:0;
  position:relative;
  box-shadow:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
  box-shadow:0 1px 1px 0 var(--color-shadow-medium-p-AJyl, rgba(0, 28, 36, 0.3)), 1px 1px 1px 0 var(--color-shadow-side-2Rp96d, rgba(0, 28, 36, 0.15)), -1px 1px 1px 0 var(--color-shadow-side-2Rp96d, rgba(0, 28, 36, 0.15));
  word-wrap:break-word;
}
._drawer_lm6vo_1efj0_83:not(#\9):not(._drawer-mobile_lm6vo_1efj0_89){
  z-index:850;
}
._drawer-closed_lm6vo_1efj0_92:not(#\9){
  cursor:pointer;
  min-width:4rem;
}
._drawer-closed_lm6vo_1efj0_92._drawer-mobile_lm6vo_1efj0_89:not(#\9){
  display:none;
}

._drawer-content_lm6vo_1efj0_100:not(#\9){
  position:fixed;
  overflow:auto;
  background-color:#ffffff;
  background-color:var(--color-background-layout-panel-content-3ogOy8, #ffffff);
}
._drawer-mobile_lm6vo_1efj0_89 > ._drawer-content_lm6vo_1efj0_100:not(#\9){
  z-index:1001;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
._drawer-closed_lm6vo_1efj0_92 > ._drawer-content_lm6vo_1efj0_100:not(#\9){
  width:4rem;
}
._drawer-closed_lm6vo_1efj0_92 > ._drawer-content_lm6vo_1efj0_100:not(#\9):hover{
  background:#eaeded;
  background:var(--color-background-layout-panel-hover-p5fVsz, #eaeded);
}
._drawer-content_lm6vo_1efj0_100 > [aria-hidden=true]:not(#\9){
  display:none;
}

._toggle_lm6vo_1efj0_122:not(#\9){
  box-sizing:border-box;
  padding:0.4rem 0.7rem;
  padding:var(--space-xxs-1SRICw, 0.4rem) 0.7rem;
}

._breadcrumbs-desktop_lm6vo_1efj0_127:not(#\9){
  padding:1.6rem 4rem 1.2rem;
  padding:var(--space-scaled-m-p3tAne, 1.6rem) var(--space-scaled-2x-xxxl-3VX7k3, 4rem) var(--space-scaled-s-1sAHT4, 1.2rem);
}

._content-wrapper_lm6vo_1efj0_131:not(#\9){
  padding:0 4rem 2rem;
  padding:0 var(--space-scaled-2x-xxxl-3VX7k3, 4rem) var(--space-scaled-l-17GFGI, 2rem);
}
._content-wrapper-mobile_lm6vo_1efj0_134:not(#\9){
  padding-left:2rem;
  padding-left:var(--space-l-3SmGmy, 2rem);
  padding-right:2rem;
  padding-right:var(--space-l-3SmGmy, 2rem);
}
._content-wrapper_lm6vo_1efj0_131:not(#\9):first-child{
  padding-top:1.6rem;
  padding-top:var(--space-scaled-m-p3tAne, 1.6rem);
}

._notifications-sticky_lm6vo_1efj0_142:not(#\9){
  top:0;
  position:-webkit-sticky;
  position:sticky;
  z-index:825;
}

._announcement-popover-target_lm6vo_1efj0_148:not(#\9){
  position:fixed;
  pointer-events:none;
  transform:translateY(3.2rem);
  transform:translateY(var(--space-xxl-ne7xIx, 3.2rem));
}