@import "src/styles/common"

.container
  position: fixed
  top: 0
  width: 100%
  z-index: 1

.announcement
  background: linear-gradient(to right, #20222B, #3D3FEA)
  padding: 8px
  font-size: 14px
  color: #FFF
  text-align: center
  a:hover
    text-decoration: underline

.navbar
  background-color: #080713

.main
  @include container
  color: #FFF
  display: flex
  justify-content: space-between
  align-items: center
  width: 100%

.start
  height: 72px
  display: flex
  align-items: center

.end
  ul
    list-style: none
    display: flex
    align-items: center
    @include on-mobile()
      display: none
    li
      margin-left: 36px
      font-size: 16px
      letter-spacing: 1.5px
      white-space: nowrap
  .menu
    @include on-desktop()
      display: none

.sidebar
  //padding-top: 72px
  width: 192px !important
  margin-right: 0 !important
  :global(.ant-drawer-body)
    background-color: #000 !important
    color: #FFF
    padding: 0 16px
    ul
      list-style: none
      //display: flex
      //align-items: center
      li
        margin-bottom: 16px
        font-size: 16px
        letter-spacing: 1.5px
        white-space: nowrap

.BackTop
  height: 48px
  width: 48px
  background: rgba(#666, .7)
  :global(.ant-badge)
    height: 48px
    width: 48px
  :global(.ant-float-btn-body)
    height: 48px
    width: 48px
    background: rgba(#666, .7)
    visibility: visible
    box-shadow: 0 2px 4px 1px rgba(0,0,0,.25)