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

// basic herobox styles
.herobox
	position: relative

// 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)
	transition: opacity 0.2s ease-out

.character-sprites span
    position: absolute

#profileStable
    .active
        border 1px solid black

// vertically center avatar sprite
// depending on if they have a pet
.herobox[data-checkpet="hasPet"]
	padding-top: 2em
.herobox:not([data-checkpet="hasPet"])
	padding-top: 1.75em

// if it is the user's avatar, check if
// they have a pet and pad accordingly
.herobox[data-checkpet="hasPet"][data-checkuser="isUser"]
	padding-top: 3.25em

// if not user's avatar, remove lines for party unity
.herobox:not([data-checkuser="isUser"])
	outline: 0

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

	.character-sprites span, .pet
		position: absolute