/* 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

// 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
// users can have image backgrounds
.herobox.noBackgroundImage
	background: $color-herobox
	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

// herobox avatar level (always visible) and name (hidden by default)
.herobox .avatar-level
	position: absolute
	bottom: 2px
	right: 2px
	@extend $hrpg-label
.herobox .avatar-name
	position: absolute
	top:  2px
	left: 2px
	@extend $hrpg-label
	opacity: 0
	transition: opacity 0.2s ease-out
// user's own name is visible if not using mount or background
.herobox.isUser.notBackground:not(.hasMount) .avatar-name
	opacity: 1
// avatar name becomes visible on hover
.herobox:hover .avatar-name, .herobox:focus .avatar-name
	opacity: 1
.herobox.noBackgroundImage:hover, .herobox.noBackgroundImage:focus
	background: lighten($color-herobox, 30%)

// when a buff/rebirth exists, add space between the icon and the level
.glyphicon-circle-arrow-up
	padding-right: 4px
.glyphicon-plus-sign
	padding-left: 4px

.character-sprites span
	position: absolute

#profileStable
	.active
		border 1px solid black

// if not user's avatar, remove lines for party unity
.herobox.noBackgroundImage:not(.isUser)
	outline: 0
	background-color: darken($color-herobox, 8%)

// 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

// 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.noBackgroundImage
	background: lighten($color-herobox, 10%)