@import url('https://fonts.googleapis.com/css?family=Ubuntu')
@import vars

body
  font-family: $fNormal
  color: $cPrimary
  background-color: $cBackground
  overflow: hidden
  max-height: 100%
  max-width: 100%
  ::-webkit-scrollbar
    width: 12px
    height: 12px
  ::-webkit-scrollbar-thumb
    background: darken($cBackground, 5)
    border-radius: 10px
  ::-webkit-scrollbar-track
    background: lighten($cBackground, 5)
    border-radius: 10px

.column
  display: table-column
  padding: 20px
  align-content: center
  margin: 0 auto
  text-align: center
  max-height: 100vh
  height: 100%

.cell
  display: list-item
  list-style: none
  align-content: center
  text-align: center
  margin: auto
  user-select: none

.space
  height: 20px

h2.cell
  padding: 5px

div.cell
  display: flex
  align-items: center
  width: 100%
  position: relative

div.cell > *
  display: table-cell
  align-items: center
  width: 100%
  padding: 2px 5px

.text-left
  text-align: left

.text-right
  text-align: right

.label
  font-weight: bold
  
.listContainer
  display: block
  width: 100%
  text-align: left
  overflow: auto
  display: inline-block
  position: relative
  max-height: 90vh

.logEntry
  display: list-item
  list-style: none
  padding: 5px
  border-radius: 10px
  margin: 5px
  color: $cOnSurfaceVariant
  user-select: none
  position: relative
  font-size: 110%

.logEntry[level=debug]
  background: $cDebug

.logEntry[level=verbose]
  background: $cVerbose

.logEntry[level=info]
  background: $cInfo

.logEntry[level=warn]
  background: $cWarn

.logEntry[level=warning]
  background: $cWarn
  user-select: all

.logEntry[level=error]
  background: $cError
  user-select: all

.logEntry .infodiv
  display: flex
  list-style: none
  font-size: 75%
  width: 100%

.logEntry .infodiv span
  padding: 0 2px
  margin: auto
  width: 50%
  display: table-cell

.songEntry
  display: flex
  background: lighten($cBackgroundVariant, 5)
  padding: 2px
  margin: 5px
  border-radius: 5px

.songEntry > *
  display: table-column
  margin: auto

.songEntry img
  max-height: 30px
  max-width: 20%
  height: auto
  width: auto

.songEntry a
  width: 80%
  text-decoration: none
  color: $cPrimary

#content
  display: flex
  height: 100%
  width: 100%
  background-color: $cBackground

#column-left, #column-middle, #column-right
  width: 33%
  height: 100%

#column-middle
  background: $cBackgroundVariant
  border-radius: 20px

#user-avatar
  max-width: 300px
  width: 100%
  height: auto
  border-radius: 25%

#avatar-container
  max-width: 300px
  width: 100%
  margin: auto
  position: relative

#status-indicator
  height: 20%
  width: 20%
  position: absolute
  left: 0
  top: 0
  border-radius: 25%
  display: block
  z-index: 200

#status-indicator[status=online]
  background-color: $cOnline

#status-indicator[status=idle]
  background-color: $cIdle

#status-indicator[status=dnd]
  background-color: $cDnd

#status-indicator[status=offline]
  background-color: $cOffline

#bot-config
  background: darken($cBackground, 3)
  word-wrap: break-word
  display: none

#guild-select
  background: $cBackgroundVariant
  color: $cPrimary
  font-size: 150%
  font-family: $fNormal
  padding: 10px
  width: 100%
  margin: auto
  border: none
  border-radius: 12px
  -webkit-appearance: none

#guild-icon-container
  padding: 10px 0 0 0

#guild-icon
  max-width: 100px
  width: 50%
  height: auto
  border-radius: 25%

#dj-songinfo
  text-decoration: none
  color: $cPrimary
  padding: 10px

#songinfo-container
  background-color: $cBackgroundVariant
  border-radius: 20px
  padding: 10px

#dj-songname
  font-weight: bold
  font-size: 120%

#dj-songImg
  width: 100%
  height: auto
  border-radius: 5%