@import ../mixins
@import ../vars

//@media(max-device-width: 641px)

//@media(min-device-width: 641px)

.popup
  @include default-element
  position: fixed
  display: grid
  height: calc(50% - 1rem)
  width: calc(40% - 1rem)
  top: 25%
  left: 30%
  text-align: center
  vertical-align: middle
  padding: 1rem
  z-index: 1000

  button
    margin: 1rem
    font-size: 2rem

.greyover
  width: 100%
  height: 100%
  position: fixed
  z-index: 99
  top: 0
  left: 0
  background-color: rgba(0, 0, 0, 0.5)

.playerEntryContainer
  @include default-element
  padding: 0.5rem
  margin: 0 0 1rem
  width: calc(100% - 1rem - 2px)
  border-radius: 0
  color: $primarySurface
  border: 1px solid $inactive

.chatMessage
  display: block
  padding: 0.2em

  .INFO
    font-style: italic
    color: $inactive

  .ERROR
    font-weight: bold
    color: $error

  .chatUsername
    color: $inactive

#container-chat
  height: calc(100% - 2px)
  #chat-content
    height: calc(100% - 3rem)
    width: 100%
    overflow-y: auto
    border: 1px solid $inactive
    box-shadow: inset 0 0 1rem $primary
  #chat-input
    width: 100%
    height: 3rem

#container-lobby-settings
  height: 100%

  h1
    height: 3rem
    margin: 0.5rem
    text-align: center

  #input-bingo-words
    width: 100%
    height: calc(100% - 7rem)
    margin: 0

  #button-round-start, #button-leave
    height: 3rem
    width: 100%

  #bingo-words
    padding: 1rem
    width: calc(100% - 2rem)
    height: calc(100% - 9rem)
    margin: 0
    overflow-y: auto
    box-shadow: inset 0 0 1rem $primary

    .bingoWord
      display: list-item
      list-style: none

#container-players
  height: 100%
  width: 100%

  h1
    height: 3rem
    margin: 0.5rem
    text-align: center

  #player-list
    padding: 1rem
    width: calc(100% - 2rem)
    height: calc(100% - 6rem)
    overflow-y: auto

#container-grid
  display: table
  height: calc(100% - 2em)
  width: calc(100% - 2em)
  padding: 1em

  .bingoWordRow
    display: table-row

    .bingoWordPanel
      @include default-element
      display: table-cell
      text-align: center
      vertical-align: middle
      user-select: none
      cursor: pointer

    .bingoWordPanel[b-sub='true']
      background-color: $success

    .bingoWordPanel:hover
      background-color: $primary

    .bingoWordPanel[b-sub='true']:hover
      background-color: mix($primary, $success)

    .bingoWordPanel:active
      background-color: mix($primary, $secondary)

#container-bingo-button
  height: 100%
  width: 100%

  button
    height: 100%
    width: 100%

/* main containers */

#container-bingo-create
  display: grid
  grid-template: 5% 10% 10% 70% 5% /10% 80% 10%
  height: 100%
  width: 100%

  #username-form
    @include gridPosition(2, 3, 2, 3)
    margin: auto

    .statusIndicator
      height: 1em
      width: 1em
      display: inline-block
      margin: auto 1em

    #input-username
      margin: 0 0 0 3em

  #lobby-form
    @include gridPosition(3, 4, 2, 3)
    margin: auto

    button
      width: 100%

#container-bingo-lobby
  display: grid
  grid-template: 5% 5% 85% 5% / 5% 30% 30% 30% 5%
  height: 100%
  width: 100%

  #lobby-title
    @include gridPosition(2, 3, 2, 5)
    margin: auto

  #container-players
    @include gridPosition(3, 4, 2, 3)
    background-color: lighten($primary, 5%)

  #container-lobby-settings
    @include gridPosition(3, 4, 3, 4)
    background-color: lighten($primary, 5%)

  #container-chat
    @include gridPosition(3, 4, 4, 5)
    background-color: lighten($primary, 5%)

#container-bingo-round
  display: grid
  height: 100%
  width: 100%
  grid-template: 10% 42.5% 42.5% 5% / 25% 75%

  #container-players
    @include gridPosition(2, 3, 1, 2)

  #container-chat
    @include gridPosition(3, 4, 1, 2)

  #container-grid
    @include gridPosition(2, 4, 2, 3)

  #container-bingo-button
    @include gridPosition(1, 2, 1, 2)