.l_body
  display: grid
  grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
  grid-gap: calc(var(--gap-page) * 1)
  margin: auto
  font-size: var(--fs-content)

.l_body aside
  z-index: 8
  flex-shrink: 0
  position: sticky
  position: -webkit-sticky
  // 侧边栏容器宽度
  --width-sidebar: calc(var(--gap-base) * 4 + var(--side-content-width))
  width: var(--width-sidebar)

.l_body .l_left
  justify-self: right
  top: var(--gap-page)
.l_body .l_right
  justify-self: left
  width: calc(var(--width-sidebar) + var(--rightbar-width-extra))
  max-height: calc(100% - var(--gap-page) * 2)
  .widgets
    height: 100%
    overflow visible

// 平板布局
@media screen and (max-width: $device-laptop)
  .laptop-only
    display: block !important
  .l_body
    .l_right
      position: fixed
      transform: translateX(calc(100% + var(--inset) * 2))
      transition: transform .38s ease-out
      margin: 0
      --inset: 8px
      right: var(--inset)
      top: var(--gap-page)
      max-height: calc(100vh - var(--gap-page) * 2)
      box-shadow: $boxshadow-card-float
      z-index: 10
      background: var(--background)
      overflow: auto
      scrollbar(0, 0)
      --blur-bg: var(--bg-a60)
      --blur-px: 50px
  .l_body[rightbar]
    .l_right
      transform: translateX(0px)
    .main-mask
      // opacity 1
      pointer-events: inherit

// 手机布局
@media screen and (max-width: $device-mobile-max)
  .mobile-only
    display: block !important
  .l_body
    padding: 0
    display: block
    .l_left
      position: fixed
      transform: translateX(calc(-100% - var(--inset) * 2))
      transition: transform .38s ease-out
      margin: 0
      --inset: 8px
      left: var(--inset)
      top: 8pt
      max-height: 'calc(%s - 8pt - %s)' % (100vh $leftbar-bottom-margin-mobile)
      .leftbar-container
        --inset: 8px
        height: 'calc(%s - 8pt - %s)' % (100vh $leftbar-bottom-margin-mobile)
      box-shadow: $boxshadow-card-float
      z-index: 10
    .l_right
      top: 8pt
      max-height: 'calc(%s - 8pt - %s)' % (100vh $rightbar-bottom-margin-mobile)
    .l_main
      max-width: 100%
  .l_body[leftbar]
    .l_left
      transform: translateX(0px)
    .main-mask
      // opacity 1
      pointer-events: inherit


.main-mask
  position: fixed
  pointer-events: none
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(black, 0.1)
  z-index: 9
  opacity 0
  trans1 opacity