@import vars
@import animations

.tableRow
  display: table-row

.hidden
  display: None !important

.grid
  display: grid

.inline-grid
  display: inline-grid

.statusIndicator
  min-height: 1em
  min-width: 1em
  border-radius: 1em
  transition-duration: 1s

.statusIndicator[status='success']
  background-color: $success

.statusIndicator[status='error']
  background-color: $error

.statusIndicator[status='idle']
  background-color: $inactive
  animation-name: pulse-opacity
  animation-duration: 5s
  animation-iteration-count: infinite

.statusIndicator[status='pending']
  background-color: $pending
  animation-name: pulse-opacity
  animation-duration: 5s
  animation-iteration-count: infinite

.socketStatusIndicator[socket-status='connected']
  background-color: $success

.socketStatusIndicator[socket-status='reconnecting']
  background-color: mix($pending, $error)
  animation-name: pulse-opacity
  animation-duration: 5s
  animation-iteration-count: infinite

.socketStatusIndicator[socket-status='disconnected']
  background-color: $error
  animation-name: pulse-opacity
  animation-duration: 2s
  animation-iteration-count: infinite

.pending
  background-color: $pending !important
  animation-name: pulse-opacity
  animation-duration: 2s
  animation-iteration-count: infinite


.infoContainer
  position: absolute
  bottom: 0
  left: 0
  background: lighten($primary, 5%)
  padding: 1rem
  border: 1px solid $primarySurface
  z-index: 9999

  h1
    margin: 0 0 1rem

  button
    display: block
    margin: 1rem auto 0