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

button
  margin: 1rem

textarea
  @include default-element
  display: block
  margin: 1rem
  border-radius: 0
  height: 50%
  width: 50%
  font-size: 15pt

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

#words-container
  display: table

  .bingo-word-row
    display: table-row

    .bingo-word-panel
      @include default-element
      display: table-cell
      padding: 3rem
      transition-duration: 0.3s
      max-width: 15rem

    .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

.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)