@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#gold-view
  display: none
  position: absolute
  right: 46%
  top: 62px
  z-index: 6
  @include transition(box-shadow .2s linear)
  @include user-select(none)
  padding: 4px
  background: transparent url(/images/level/gold_background.png) no-repeat
  background-size: 100% 100%
  border-radius: 4px

  &:hover
    box-shadow: 2px 2px 2px black

  .team-gold
    font-size: 18px
    margin: 0
    line-height: 20px
    color: hsla(205,0%,51%,1)
    display: inline-block
    padding: 0px 4px

    &.team-humans
      color: hsla(4,80%,51%,1)

    &.team-ogres
      color: hsla(205,100%,51%,1)

    &.team-allies, &.team-minions
      color: hsla(116,80%,51%,1)

    img
      width: 16px
      height: 16px
      border-radius: 2px
      padding: 1px
      margin-top: -1px
  
    .gold-amount
      display: inline-block
      min-width: 20px