$header = 50px
$pokemon-list-height = 50px

// TODO: Make this a global style
.teambuilder input
.teambuilder select
  box-sizing border-box
  height 28px

.teambuilder .selectize-input input
  height 18px

.teambuilder
  position absolute
  top 0
  bottom 0
  left 0
  right 0

  select, input
    margin-bottom 0!important
    width 100%

.teambuilder .meta-info
  max-width 1368px

.teambuilder .meta-info .left-side, .teambuilder .meta-info .right-side
  float left
  box-sizing border-box

.teambuilder .navigation
  position absolute
  top $header
  bottom 0
  background-color $body-color
  width: 150px

  ul
    list-style-type none
    padding 0
    margin 0

  li, .nav-button
    display block
    box-sizing border-box
    padding-left 1em
    height $pokemon-list-height
    line-height $pokemon-list-height
    font-size 14px

  li:hover, .nav-button:hover
    cursor pointer
    background-color rgba(0, 0, 0, 0.1)

  li.active
    background-color rgba(200, 210, 255, 0.5)

  .pokemon_icon
    float none
    display inline-block
    margin 0
    vertical-align middle

  .pokemon-pbv
    margin-top 7px
    font-size 0.75em

  .pokemon-middle
    line-height 50%
    display inline-block
    vertical-align middle

.teambuilder  .meta-info .left-side
  padding-left 180px
  width 45%

.teambuilder .meta-info .right-side
  width 55%
  padding-left 20px

.teambuilder .species
  float left
  width 180px
  margin-left -185px

  .species_list
    width 100%

    .pbv
      float right
      color #888

.teambuilder .shiny-switch
  display inline-block
  width 14px
  height 14px
  margin-right 10px
  margin-left -(@margin-right + @width)
  vertical-align middle
  cursor pointer
  background-image URL('http://91.121.152.74:8000/Sprites/images/noshiny.png')
  background-size cover

  &.selected
    background-image URL('http://91.121.152.74:8000/Sprites/images/shiny.png')


.teambuilder .happiness-switch
  display inline-block
  position relative
  width 14px
  height 14px
  margin-left 10px
  margin-right -(@margin-left + @width)
  cursor pointer
  vertical-align middle

  $happy = #FF3C3C
  $unhappy = #333

  &:before, &:after
    position absolute
    content ""
    left 8px
    top 0
    width 8px
    height 13px
    background $happy
    border-radius 7px 7px 0 0
    transform rotate(-45deg)
    transform-origin 0 100%
  &:after
    left 0
    transform rotate(45deg)
    transform-origin 100% 100%

  &:hover:before, &:hover:after
    background darken($happy, 30%)

  &.selected:before, &.selected:after
    background $unhappy

  &.selected:hover:before, &.selected:hover:after
    background lighten($unhappy, 30%)

.teambuilder .team_meta
  position absolute
  top 0
  left 0
  right 0
  height $header
  line-height @height
  .team_name
    font-weight 700
    font-size 1.5em
    height $header
    line-height @height
    float left
    margin 0
    width auto
    padding 0 (1em/@font-size)
    box-sizing border-box

  .team_name:hover:not(:focus)
    text-decoration underline
    cursor pointer

  .team_meta_buttons
    float right
    margin-top 7px
    .button
      float left
      margin-right 10px

.teambuilder .meta-info .non-stats
  display table
  width 100%

  .teambuilder_row, .pbv-row
    display table-row
    line-height 1.5em
    
  .teambuilder_col
    display table-cell
    box-sizing border-box
    height 2em
    margin 0
    &:first-child
      text-align right
      padding-right 10px

  .pbv-row .left, .pbv-row .right
    box-sizing border-box
    height 2em

  .non-stat-label
    width 1px // minimum possible size

.teambuilder .stats
  width 100%
  margin-bottom 1.5em

  td, th
    text-align left
    padding-right 10px
    white-space nowrap
    line-height 1.5em
    height 1.5em

  .stat-label, .stat-total, .base-stat
    width 1px // minimum possible size

  td:first-child
    text-align right

  input
    width 100%
    text-align right

  th.ev-cell, th.iv-cell
    text-align right
    padding-right 17px // match with value in textfield (10px from the main cell + the input padding)

  td.ev-cell, td.iv-cell
    width 50px

  .plus-nature
    color $positive-color
    font-weight bold

  .minus-nature
    color $negative-color

  .remaining-evs
    float left

  .hidden-power
    float right

  .ev-lock
    float left
    margin-right 5px
    cursor pointer
    .icon-lock
      color #444
    .icon-unlocked
      color #888 

  .remaining-evs-amount.over-limit
    color $negative-color
    font-weight bold

.teambuilder select.select-hidden-power
  width auto

.teambuilder .pokemon_edit
  position absolute
  overflow auto
  left 150px
  top $header
  bottom 0
  right 0
  background white
  padding 15px
  overflow-y scroll

.teambuilder .forme-sprite-box
  height 120px
  line-height @height
  text-align center
  .forme-sprite
    display inline-block

.teambuilder .species-types
  text-align center
  margin-bottom 5px
  margin-top 50px
  img
    margin 0 2px

.teambuilder .selected_moves
  .header
    margin-bottom 8px
  .moves-label
    font-weight bold
    font-size 2em
    line-height 1em
  a
    line-height 2em

  .move-button, input
    display block
    margin 0
    box-sizing border-box
    height 32px

    .close
      opacity .4
      line-height 30px
      width 20px
      text-align center
      float right
    .close:hover, .close:focus
      opacity .8
      font-weight bold

.table-moves
  border-collapse separate
  border solid 1px #DDD
  thead th
    background whitesmoke
    border-bottom solid 1px #DDD
  tbody tr
    cursor pointer
    td
      border 1px solid transparent
    &.active td
      background #f0f0f9
      &:first-child
        text-decoration underline
    &.selected td
      background #f0f0f9
      &:first-child
        font-weight bold
    img
      margin-bottom 3px
  .name
    white-space nowrap

.teambuilder .table-moves
  margin-top 8px

.teambuilder .description
  width 60%

.teambuilder .display_teams
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow auto

  h2
    margin-left 10px
    margin-bottom 0

  .select-team
    h2
      text-overflow ellipsis
      white-space nowrap
      overflow hidden
      width 192px
      margin 0
      font-size 1.5em

  .add-new-team
    margin 10px

  .team-meta
    font-size .75em
    text-align right
    margin-top 10px

  .team-pbv
    margin-top -5px

textarea.textarea_modal
  box-sizing border-box
  width 100%
  height 300px

@media screen and (max-width: 1268px)
  // stack non-stats and stats
  .teambuilder .meta-info .left-side, .teambuilder .meta-info .right-side
    display block
    width 100%

  // stack non-stats and stats
  .teambuilder .non-stats
    margin 0!important

  // stack non-stats and stats
  .teambuilder .meta-info .right-side
    padding-left 0

  // add some separation between stats and non-stats
  .teambuilder .stats
    margin-top 1.5em

@media screen and (max-width: 1000px)
  // Hide move descriptions
  .table-moves .description
    display none

  // Make selected moves take up the entire row
  .teambuilder .selected_moves .span3
    width 100%
    margin-left 0

@media screen and (max-width: 800px)
  // Move side navigation to above
  .teambuilder .navigation li, teambuilder .navigation .nav-button
    float left
    width (100/6)%
    font-size 0 // Hide the text
    text-align center

  // Move side navigation to above
  .teambuilder .pokemon_edit
    left 0
    top $header + $pokemon-list-height

  // Move side navigation to above
  .teambuilder .navigation
    width 100%

@media screen and (max-width: 600px)
  // Scroll at the teambuilder level instead of the pokemon_edit level
  // TODO: This should kick in on tablet landscape modes, 
  //       with large widths but small heights (ex: nexus 7)
  .teambuilder
    overflow auto
    
    .team_meta
      position static
      height auto

    .navigation
      position static
    
    .pokemon_edit
      position static
      overflow visible

  textarea.textarea_modal
    height auto

@media screen and (max-width: 480px)
  // split species and non-stats
  .teambuilder .meta-info .left-side
    padding-left 0

  // split species and non-stats
  .teambuilder .species, .teambuilder .non-stats
    margin-left 0
    width 100%
    margin-bottom 1.5em

  // hide ev-bars
  .teambuilder .ev-range-cell
    display none

  // Hide pp and acc cells
  .table-moves
    .pp, .acc
      display none