.mobile-only
  display: none
  @media screen and (max-width: $device-mobile-max)
    display: block !important

.mobile-hidden
  @media screen and (max-width: $device-mobile-max)
    display: none !important

.float-panel
  position: sticky
  grid-column-end: span 3
  --inset: 2rem
  right: 0
  bottom: calc(var(--inset) * 1)
  margin-left: auto
  margin-right: var(--inset)
  float: right
  z-index: 999999
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  gap: $bar-item-gap
  padding: $bar-item-gap
  @media screen and (min-width: $device-mobile-max)
    margin-right: 3rem
  overflow: hidden
  trans1: all

  bar-glass()


// 侧边栏弹出按钮
.float-panel button
  bar-item()
  cursor: pointer
  color: var(--text)
  background: none
  box-sizing: border-box
  flex: 0 0 auto
  margin: 0 auto
  width: 40px
  height: 40px
  padding: 4px
  line-height: 0
  font-size: 28px
  display: flex
  justify-content: center
  align-items: center
  >*
    path#sep
      trans1 transform
    width: auto
    height: 28px

// 侧边栏弹出后
.l_body[leftbar] .float-panel button.leftbar-toggle, .l_body[rightbar] .float-panel button.rightbar-toggle
  bar-item-active()

.l_body[leftbar] .float-panel button.leftbar-toggle
  color: var(--theme)
  svg g
    fill: currentColor
    fill-opacity: 0.3
    path#sep
      transform: translateX(2px)


// 侧边栏有内容时才显示弹出按钮
.l_body .l_right:empty+.float-panel button.rightbar-toggle
  display: none !important

.l_body[rightbar] .float-panel button.rightbar-toggle
  color: var(--theme)
  svg g
    fill: currentColor
    fill-opacity: 0.3
    path#sep
      transform: translateX(2px)