@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

input
  color: $cPrimary
  background: $cBackground
  border: 2px solid $cPrimary
  border-radius: 12px
  padding: 5px
  margin: auto

input:focus
  background: $cBackgroundVariant

input::placeholder
  color: darken($cPrimary, 20)

input.cell
  margin: 10px auto

button
  background: $cBackgroundVariant
  border: none
  border-radius: 12px
  color: $cPrimary
  padding: 10px

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

.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: grid
  width: 100%
  text-align: left
  overflow: hidden
  position: relative
  max-height: 90vh

.listContainer:hover
  overflow: auto

.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
  text-decoration: none
  color: $cPrimary

  > *
    display: table-column
    margin: auto

  img
    max-height: 30px
    max-width: 20%
    height: auto
    width: auto
    border-radius: 2px

  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%

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

#column-right
  padding: 0 20px 20px
  display: grid
  align-content: start

#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

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

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

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

#guild-nameAndIcon
  width: 50%

#dj-songinfo
  background-color: $cBackgroundVariant
  border-radius: 20px
  overflow-x: hidden

#songinfo-container
  display: list-item
  text-decoration: none
  color: $cPrimary
  padding: 10px
  width: calc(100% - 20px)

#dj-queue-container
  display: grid
  padding: 0 5px 5px

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

#dj-songImg
  align-self: center
  width: 80%
  height: auto
  margin: 0 10%
  border-radius: 5%

#guildinfo
  max-height: 90vh
  overflow-y: hidden

#guildinfo:hover
  overflow-y: auto

#dj-songQueue
  display: grid
  max-height: 100%