.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
  right: 0
  bottom: 2rem
  float: right
  z-index: 10
  display: flex
  flex-direction: column
  border-radius: 0.5rem
  margin-left: auto
  margin-right: 1rem
  overflow: hidden
  --blur-px: 16px
  --blur-bg: alpha(#fff, .4)
  trans1: all
  if hexo-config('style.darkmode') == 'auto'
    @media (prefers-color-scheme: dark)
      --blur-bg: alpha(#000, .4)
  if hexo-config('style.darkmode') == 'always'
    --blur-bg: alpha(#000, .4)

// 侧边栏弹出按钮
.float-panel button
  cursor: pointer
  color: var(--text)
  background: none
  padding: 8px
  line-height: 0
  font-size: 28px
  margin: 0
  display: flex
  >*
    path#sep
      trans1 transform
    width: auto
    height: 28px

// 侧边栏弹出后
.l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
  box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme
.l_body[leftbar] .float-panel button
  background: var(--card)

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


.l_body[rightbar] .float-panel button
  background: var(--card)

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