#rightside
  position: fixed
  right: -2.5rem
  bottom: 20px
  z-index: 1000
  opacity: 0
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)

  &.needEndHide
    display: block !important

  &.hide.needEndHide
    bottom: 0 !important
    transform: none !important

  .rs_show,
  .rs_hide
    width: 46px
    padding: 2px
    overflow: hidden
    background: linear-gradient(to bottom, var(--efu-maskbg), var(--efu-maskbgdeep))
    border: var(--style-border)
    border-radius: 24px
    box-shadow: var(--efu-shadow-glass-inset), var(--efu-shadow-border)
    backdrop-filter: saturate(180%) blur(20px)
    -webkit-backdrop-filter: saturate(180%) blur(20px)
    transform: translateZ(0)

  .rs_show
    display: flex
    flex-direction: column
    position: relative

  button
    display: flex
    align-items: center
    justify-content: center
    position: relative
    flex: 0 0 40px
    width: 40px
    height: 40px
    margin: 0
    padding: 0
    overflow: hidden
    color: var(--efu-fontcolor)
    background: transparent
    border: 0
    border-radius: 20px
    font-size: 16px
    line-height: 1
    text-align: center
    cursor: pointer
    transition: color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s

    &:hover,
    &:focus-visible
      color: var(--efu-white)
      background: var(--efu-main)
      box-shadow: 0 4px 12px var(--efu-main-op)

    &:active
      transform: scale(0.88)

    &:focus-visible
      outline: 2px solid var(--efu-main)
      outline-offset: -2px

    i,
    span
      position: relative
      z-index: 1
      pointer-events: none

    i
      font-size: 16px
      transition: transform 0.25s

    &.pc
      display: flex

      +maxWidth1200()
        display: none

    &.mobile
      display: none

      +maxWidth1200()
        display: flex

    &.top
      #percent
        display: block
        font-size: 12px
        font-weight: 600
        line-height: 1

      i
        display: none

      &:hover,
      &:focus-visible
        #percent
          display: none

        i
          display: block

    &.barrage span
      font-size: 12px
      font-weight: 600

    &.translate
      font-size: 14px
      font-weight: 600

    &.config:hover i,
    &.config:focus-visible i
      transform: rotate(90deg)

  .rs_hide
    display: flex
    flex-direction: column-reverse
    position: absolute
    right: 0
    bottom: calc(100% + 8px)
    opacity: 0
    pointer-events: none
    transform: translateX(58px) scale(0.96)
    transform-origin: right bottom
    transition: opacity 0.25s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)

    &.show
      opacity: 1
      pointer-events: auto
      transform: translateX(0) scale(1)

[data-theme='dark']
  #rightside
    .rs_show,
    .rs_hide
      border-color: var(--efu-none)
      box-shadow: var(--efu-shadow-glass-inset), 0 8px 20px -8px rgba(0, 0, 0, 0.55)

+maxWidth768()
  #rightside
    bottom: 15px

    .rs_show,
    .rs_hide
      width: 44px

    button
      flex-basis: 38px
      width: 38px
      height: 38px
      border-radius: 19px
      font-size: 14px