// Place all the styles related to the Game#show method here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//#game-component
  flex-grow: 3
  background: hotpink

.players
  display: inline-block
  width: 40%

//// New Game#new

.simple_form
  background: green
  padding: 5vmin
  outline: 2px solid black
  label
    font-size: 4vmin
    display: block
  input.string
    font-size: 6vmin
    margin-bottom: 2vmin
  input.btn
    font-size: 4vmin

//// Show Game#show

button
  font-size: 4vmin

#game-component-container-container
  display: flex
  flex-direction: column
  flex: 1 1 auto
  align-self: stretch
  #game-component-container
    flex: 1 1 auto
    display: flex

#game-component
  flex: 1 1 auto
  flex-direction: column
  align-self: stretch
  display: flex
  h1
    font-size: 4vmin
  #game-controls
    display: flex
    flex-direction: row
    margin-bottom: 5vh
    align-self: stretch
    align-items: flex-start
  div
    flex: 1 1 auto
  #start
    align-self: flex-end
    text-align: right
  .player-list
    display: flex

  .player
    background: green
    padding: 2vmin
    outline: 2px solid black
    position: relative
    &.has-control
      background: lightgreen

#playerList
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: flex-start
  text-align: center
  #top
    flex: 0 0 100%
    display: flex
    .player
      flex: 1 1 auto
  #mid
    flex: 0 0 100%
    align-self: center
    align-items: flex-start
    display: flex
    .player
      flex: 1 1 auto
      .email
        //position: absolute
        //background: green
      &:first-of-type
        .email
          //left: -18.5vmin
          //transform: rotate(-90deg)
      &:last-of-type
        .email
          //transform: rotate(90deg)
          //right: -17vmin
    #play-to-beat
      flex: 1 1 auto
  #bot
    flex: 0 0 100%
    align-self: flex-end

////// Inventory

.player form
  ul#inventory
    display: flex
    flex-wrap: wrap
    text-align: left
  li
    flex: 1 1 auto
  input[type="checkbox"]
    visibility: hidden
    position: absolute
    &:checked ~ img
      box-shadow: 0px 0px 2px 6px cadetblue
  img
    width: 6vmin
    border: 1px solid black
    border-radius: .3vmin
.inventory
  img
    width: 6vmin
    border: 1px solid black
    border-radius: .3vmin