/* herobox & avatar
======================
* this is the canonical `herobox` avatar component
* it can be placed anywhere on the site and look the
* way it's supposed to. TODO: add variables for show/
* or hiding user metadata in different situations

Seeing as the sprites might change drastically in the
future re: pets and whatnot, this is just temporary.
---------------------------------------------------- */

.profile-modal-header
    width:560px
    margin: 0px auto

.avatar-level
    position absolute
    bottom 0px
    right 0px
    padding 2px 3px 2px 3px
    border-top-right-radius: 0px
    border-bottom-right-radius: 0px
    border-bottom-left-radius: 0px

// basic herobox styles
.herobox
	height: 10.5em // higher to acct for the name area
	width: 10em
	max-width: 10em
	margin: 0 // need this b/c of bootstrap, remove or reset later
	position: relative
	cursor: pointer
	background: #f5f5f5
	transition: border 0.25s ease-out, background 0.25s ease-out//, padding 0.13s ease-out
	outline: 1px solid rgba(0,0,0,0.1)
// padding: 0 // push down the sprite

// the hero's info frame
.herobox:after
	content: attr(data-name) //" – " "lvl " attr(data-level) // " " attr(data-class)
	position: absolute
	top: 0
	display: block
	width: 100%
	line-height: 2
	color: black
	text-align: center
	border-bottom: 1px solid rgba(0,0,0,0.1)
	background: darken($good, 15%)
	transition: opacity 0.2s ease-out

// info revealed on hover/focus for party
// always visible on the user's own avatar
.herobox:after
	opacity: 0
.herobox.isUser:not(.hasMount):after
	opacity: 1
	// make it a bit special
	background darken($better, 15%)

.character-sprites span
    position: absolute

#profileStable
    .active
        border 1px solid black

// if not user's avatar, remove lines for party unity
.herobox:not(.isUser)
  outline: 0

// vertically center avatar sprite depending on if they have a pet
.herobox.hasPet
	padding-top: 1.75em
.herobox:not(.hasPet)
	padding-top: 2em
.herobox.hasMount
    padding-top:0em

// expose hero info on hover, taking
// into account the extra pet space
.herobox:hover, .herobox:focus
	background: desaturate(lighten($better, 30%), 10%)
	&:after
		opacity: 1

// positioning the sprites, etc
.herobox
	.character-sprites
		width: 6.428571429em // 90px
		height: 6.428571429em
		margin: 0 auto

	.character-sprites span, .pet
		position: absolute

.herobox.isLeader
	background: $better