@import "../../bootstrap/mixins"

@mixin gradient-radial-custom-stops($innerColor: #555, $innerStop: 20%, $outerColor: #333, $outerStop: 70%)
  background-color: $outerColor
  @include gradient-vertical($innerColor, $outerColor)  // IE6-9 fallback on vertical gradient
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor $innerStop), to($outerColor $outerStop))
  background-image: -webkit-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: -moz-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: -o-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-image: radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
  background-repeat: no-repeat

.thang-avatar-view

  &.selected .thang-avatar-wrapper
    @include box-shadow(0px 0px 10px rgba(79, 79, 213, 1.0))

  .thang-avatar-wrapper
    position: relative
    margin: 5px 5px 1px
    border: 1px solid #888
    border-radius: 4px
    @include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)

    &.team-humans
      border-color: darkred
      @include gradient-radial-custom-stops(hsla(4,80%,74%,1), 20%, hsla(4,80%,51%,1), 70%)

    &.team-ogres
      border-color: darkblue
      @include gradient-radial-custom-stops(hsla(205,100%,74%,1), 20%, hsla(205,100%,31%,1), 70%)

    &.team-allies, &.team-minions
      border-color: darkgreen
      @include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)

    .badge
      $radius: 8px
      $diameter: 2 * $radius
      position: absolute
      top: -0.5 * $radius
      width: $diameter
      height: $diameter
      text-align: center
      padding: 0
      color: white
      text-shadow: 0 1px rgba(0, 0, 0, 0.25)
      box-sizing: border-box

      border: 1px solid rgba(128, 128, 128, 1)
      border-radius: $diameter
      background-color: #aaa

      &.problems
        left: -0.5 * $radius

        &.error
          background-color: red
        &.warning
          background-color: #f89406
        &.info
          background-color: #3a87ad

      &.shared-thangs
        background-color: blue
        right: -0.5 * $radius

  .thang-name
    font-variant: small-caps
    text-align: center
    color: #ca8
    overflow: hidden
    text-overflow: ellipsis
    font-size: 13px
    white-space: nowrap
    // if it works for Grul'Thock and Arrow Tower, it'll work for the first 56 names I picked