// money styles
.money
  display: inline-block
  line-height: 1.5em
  padding-left: 0.75em

  [class^="shop_"]
    vertical-align: top
    display: inline-block

.btn-buy
  width: 4.5em
  height: 3em
  padding: 0.75em 0 0
  text-align: center
  vertical-align: top
  background-color: $better

  color: #555
  &:hover, &:focus
    background-color: $bad
    text-decoration: none

.rewards
  margin-bottom: 1.5em
  padding-bottom: 1.5em
  border-bottom: 1px solid rgba(0,0,0,0.1)

.reward-item
  background: white

.reward-cost
  display: inline


// store items
.btn-reroll
  background-color: $better
  cursor: pointer
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1)
  &:hover, &:focus
    background-color: $bad

.item-img
  float: left
  display: inline-block
  vertical-align: top
  // background-color: $bad
  height: 3em
  margin-left: -0.5em
  margin-right: 0.5em
  // border: 1px solid rgba(0,0,0,0.1)
  border-top: 0
  border-bottom: 0

.token-wallet
  cursor: pointer
  .tile
    background-color: darken($neutral, 10%)
  .add-token-btn
    opacity: 0
  &:hover, &:focus
    .add-token-btn
      opacity: 1
      background-color: $good
    .tile
      opacity: 1


// pets (this will all change when pet system is overhauled)
.pet-grid
  padding-top: 1.5em
  border-top: rgba(0,0,0,0.1)
  table
    width: 100%
  td
    padding: 0.5em
    width: 25%
    &.active-pet
      background-color: $bad
      outline: 1px solid rgba(0,0,0,0.1)
      outline-offset: -1px
    &:hover, &:focus
      background-color: darken($better, 10%)