.q-layout
  width: 100%
  outline: 0

.q-layout-container
  position: relative
  width: 100%
  height: 100%

  .q-layout
    min-height: 100%
  > div
    // 3D on purpose: keeps the layout on its own compositor layer
    transform: translate3d(0, 0, 0)
    > div
      min-height: 0
      max-height: 100%

.q-layout__shadow
  width: 100%
  &:after
    content: ''
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    box-shadow: $layout-shadow

.q-layout__section--marginal
  background-color: $layout-marginal-background
  color: $layout-marginal-color

.q-header

  &--hidden
    transform: translateY(-110%)
  &--bordered
    border-bottom: $layout-border
  .q-layout__shadow
    bottom: -10px
    &:after
      bottom: 10px

.q-footer

  &--hidden
    transform: translateY(110%)
  &--bordered
    border-top: $layout-border
  .q-layout__shadow
    top: -10px
    &:after
      top: 10px

.q-header, .q-footer
  z-index: $z-marginals

.q-drawer
  position: absolute
  top: 0
  bottom: 0
  width: var(--q-drawer-width)
  background: #fff
  z-index: $z-side

  &--on-top
    z-index: $z-fixed-drawer

  &--left
    left: 0
    transform: translateX(-100%)
    &.q-drawer--bordered
      border-right: $layout-border
    .q-layout__shadow
      left: 10px
      right: -10px
      &:after
        right: 10px

  &--right
    right: 0
    transform: translateX(100%)
    &.q-drawer--bordered
      border-left: $layout-border

    .q-layout__shadow
      left: -10px
      &:after
        left: 10px

  &-container:not(&--mini-animate) &--mini
    padding: 0 !important
    .q-item
      // The item centers its side section, so it must be exactly as wide
      // as the standard layout reserves for one (16px padding + 40px avatar
      // section = the default mini width minus the 1px border), or the
      // icon lands on a fractional position and visibly moves once the
      // standard layout takes over. Centering in the drawer's content box
      // instead would be off by half a pixel in an unbordered drawer and,
      // in a bordered one, by whatever the browser snaps the 1px border to
      // on a display with a fractional scale factor (0.8px at 125%).
      // A narrower container (a custom border width, a bordered list)
      // falls back to centering within it, as before.
      width: calc(var(--q-drawer-width) - 1px)
      max-width: 100%
    .q-item, .q-item__section
      text-align: center
      justify-content: center
      padding-left: 0
      padding-right: 0
      min-width: 0
    .q-item__label, .q-item__section--main, .q-item__section--side ~ .q-item__section--side
      display: none
  &--mini
    .q-mini-drawer-hide, .q-expansion-item__content
      display: none
  &--mini-animate &__content
    overflow-x: hidden !important
    white-space: nowrap
  &--standard
    .q-mini-drawer-only
      display: none
  &--mobile
    .q-mini-drawer-only, .q-mini-drawer-hide
      display: none

  &__backdrop
    z-index: ($z-fixed-drawer - 1) !important
    will-change: background-color

  &__opener
    z-index: ($z-marginals + 1)
    height: 100%
    width: 15px
    user-select: none
    -webkit-user-select: none /* Safari, older Chrome */

.q-layout, .q-header, .q-footer, .q-page
  position: relative

// a block formatting context keeps the children's vertical margins inside
// the page (a collapsed-through margin would push it past its min-height);
// zero specificity so any display utility on the page still wins
:where(.q-page)
  display: flow-root

.q-page-sticky--shrink
  pointer-events: none
  > div
    // 3D on purpose: keeps the layout on its own compositor layer
    display: inline-block
    pointer-events: auto

body.q-ios-padding,
body.q-safe-area-padding
  .q-layout--standard .q-header > .q-toolbar:nth-child(1),
  .q-layout--standard .q-header > .q-tabs:nth-child(1) .q-tabs__content,
  .q-layout--standard .q-drawer--top-padding .q-drawer__content
    padding-top: var(--q-safe-area-inset-top)
    min-height: calc(var(--q-safe-area-inset-top) + #{$toolbar-min-height})
  .q-layout--standard .q-footer > .q-toolbar:nth-last-child(1 of :not(.q-layout__shadow)),
  .q-layout--standard .q-footer > .q-tabs:nth-last-child(1 of :not(.q-layout__shadow)) .q-tabs__content,
  .q-layout--standard .q-drawer--top-padding .q-drawer__content
    padding-bottom: var(--q-safe-area-inset-bottom)
    min-height: calc(var(--q-safe-area-inset-bottom) + #{$toolbar-min-height})

.q-body--layout-animate
  .q-drawer__backdrop
    transition: background-color .12s !important
  .q-drawer
    transition: transform .12s, width .12s, top .12s, bottom .12s !important
  .q-layout__section--marginal
    transition: transform .12s, left .12s, right .12s !important
  .q-page-container
    transition: padding-top .12s, padding-right .12s, padding-bottom .12s, padding-left .12s !important
  .q-page-sticky
    transition: transform .12s, left .12s, right .12s, top .12s, bottom .12s !important

body:not(.q-body--layout-animate)
  .q-layout--prevent-focus
    visibility: hidden

.q-body--drawer-toggle
  overflow-x: hidden !important

.q-layout-padding
  @media (max-width: $breakpoint-xs-max)
    padding: 8px
  @media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-md-max)
    padding: 16px
  @media (min-width: $breakpoint-lg-min)
    padding: 24px

body.body--dark
  .q-header, .q-footer, .q-drawer
    border-color: $separator-dark-color
  .q-layout__shadow:after
    box-shadow: $layout-shadow-dark

body.platform-ios
  .q-layout--containerized
    // https://github.com/quasarframework/quasar/issues/4127
    // Fixes scroll issues with containerized Layout inside Dialog on iOS;
    // QDrawer needs to be forced into fixed position
    position: unset !important