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

.shop_gold, .shop_silver, .shop_copper
  vertical-align: top
  display: inline-block

.shop_spell
  vertical-align: top
  display: inline-block
  top: -5px

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

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

.btn-buy input:focus
  opacity:0

input:focus + a.btn-buy
  background-color: $bad
  text-decoration: none

//Hide interativity if reward is locked (i.e. is a challenge reward)
.locked-task
  .btn-buy
    &:hover
        background-color: $better
        cursor:initial

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

.reward-item
  background: white

  // Items in the shop and spells can not be moved
  &:hover
    cursor: inherit

.reward-cost
  display: inline

.rewards .task-text
  padding-left: 5em

.rewards .reward-img
  margin-left: 5em

.rewards .task-options
  background: white

// store items
.btn-reroll
  width: 2.5em
  padding-left: 0.25em
  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