$selected-area-height: 150px
@import "../bootstrap/mixins"

#inventory-view
  position: relative
  height: 600px
  +user-select(none)
  
  h3
    margin: 0
  
  #equipped
    width: 75%
    position: absolute
    left: 0
    top: 0
    bottom: $selected-area-height + 10
    right: 0
    overflow: scroll
    
    .item-slot.disabled
      opacity: 0.5
    
    .panel
      text-align: center
      width: 31.3%
      margin: 5px 2% 5px 0
      float: left
      cursor: pointer
      
      .panel-heading
        padding: 5px
      
    .panel-info .panel-body
      background-color: #e0f0f5
      
    .panel-body
      height: 50px
      padding: 5px
      overflow: scroll
      font-size: 12px

  #available-equipment
    width: 25%
    position: absolute
    right: 0
    top: 0 
    bottom: $selected-area-height + 10
    overflow: scroll
    
    h3
      margin-bottom: 5px
      
  .list-group-item.active
    background-color: #e0f0f5
    
  .list-group-item.equipped
    display: none
    
  .item-view
    cursor: pointer
    
  #selected-items
    position: absolute
    height: $selected-area-height
    left: 0
    right: 0
    bottom: 0
    text-align: center

    #selected-equipped-item, #selected-available-item
      text-align: left
      position: absolute
      bottom: 0
      top: 0
      overflow: scroll
      padding: 10px
      height: 100%
      width: 49%
      display: flex
      align-items: center
      
      img
        width: 100px
        height: 100px
        
      .item-info
        margin-left: 110px
      
    #selected-equipped-item
      left: 0
    
    #selected-available-item
      right: 0

  $swap-item-height: 40px
    
  #swap-button
    position: relative
    top: ($selected-area-height / 2) - ($swap-item-height / 2)
    height: $swap-item-height
    font-size: 24px
    line-height: 24px
    display: inline-block