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

button
  margin: 1rem

textarea
  @include default-element
  display: block
  margin: 1rem
  border-radius: 0
  font-size: 0.8em

@media(max-device-width: 641px)
  textarea
    height: 80%
    width: calc(100% - 2rem)
  #words-container
    width: 100%
    height: 80%
  #content-container #row-1 #players-container div
    display: none
    padding: 0
  #username-form
    width: calc(100% - 2rem) !important
    left: 0 !important
  #hide-player-container-button
    display: none

@media(min-device-width: 641px)
  textarea
    height: 80%
    width: 50%
  #words-container
    width: 100%
    height: 100%

.number-input
  width: 4rem
  margin: 1rem

#bingoheader
  display: table
  width: 100%

  div
    display: table-cell
    text-align: start

  .stretchDiv
    text-align: end

  button
    max-width: calc(100% - 2rem)
    padding: 0.7rem 2rem

#words-container
  display: table

  .bingo-word-row
    display: table-row

    .bingo-word-panel
      @include default-element
      display: table-cell
      padding: 1rem
      transition-duration: 0.3s
      max-width: 15rem
      border-radius: 0
      border-collapse: collapse
      text-align: center
      vertical-align: middle

      span
        vertical-align: middle
        display: inline-block
        word-break: break-word

    .bingo-word-panel:hover
      background-color: darken($primary, 2%)
      cursor: pointer

    .bingo-word-panel:active
      background-color: $primary

    .bingo-word-panel[b-sub="true"]
      background-color: forestgreen

#bingo-button
  transition-duration: 0.8s

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

  button
    cursor: pointer
    width: 100%
    margin: 1rem auto

  input[type='text']
    cursor: text
    width: 100%

#username-form *
  display: inline-block
  vertical-align: middle

#content-container
  display: table
  height: 100%
  width: 100%

  #row-1
    display: table-row
    height: 85%

    #players-container
      display: table-cell
      padding: 0.5rem
      transition-duration: 1s

      .player-container
        @include default-element
        padding: 0.5rem
        max-width: 14rem

.popup
  @include default-element
  height: 5%
  width: 40%
  top: 47.5%
  left: 30%
  text-align: center
  transition-duration: 1s
  span
    margin: 2%
    display: block

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