@import '~styles/variables'
@import '~styles-lib/mixins'

$-avatar-size = 80px
$-tag-font-size = $font-size-tiny
$-tag-padding-vertical = 2px
$-tag-padding-horizontal = 6px
$-tag-offset = ($-tag-font-size * 0.5) + ($-tag-padding-vertical * 2)
$-anim-size = 8px
$-border-color = var(--theme-fg)
$-zindex-community = 1
$-zindex-tag = 2
$-zindex-link = 3
$-zindex-popper = 4

.fireside-avatar
	position: relative
	display: flex
	flex-direction: column
	align-items: center
	color: var(--theme-fg)

	&:hover
		.-extras
			visibility: visible
			opacity: 1

.-link
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0
	z-index: $-zindex-link

.-header
	position: relative
	display: flex
	flex-direction: column
	align-items: center
	margin-bottom: $-tag-offset + 4px
	width: 100%

.-avatar
	width: 100%
	flex: none

	&
	&-inner
	&-img
		img-circle()

	&-inner
		padding-top: 100%
		position: relative

	&-img
		background-color: var(--theme-bg)
		border: $border-width-large solid $-border-color
		position: absolute
		top: 0
		right: 0
		bottom: 0
		left: 0
		display: flex
		justify-content: center
		align-items: center

.-extras
	img-circle()
	elevate-1()
	background-color: var(--theme-bg-subtle)
	position: absolute
	top: 0
	right: 0
	display: flex
	padding: 4px
	visibility: hidden
	opacity: 0
	z-index: $-zindex-popper
	cursor: pointer

	&:hover
		background-color: var(--theme-bi-bg)
		color: var(--theme-bi-fg)

	&-header
		font-family: $font-family-heading
		font-size: $font-size-tiny
		font-weight: normal
		letter-spacing: 0.1em
		line-height: 1
		text-transform: uppercase
		margin-top: 0
		margin-bottom: 0

		.-img
			width: $list-group-icon-width * 0.8
			height: $list-group-icon-width * 0.8
			border-radius: 50%
			display: inline-block
			position: relative
			left: -($list-group-icon-width - 1px)
			top: -2px
			margin-right: -($list-group-icon-width - 5px)

	.jolticon
		margin: 0

.-community
	elevate-1()
	width: 25%
	height: @width
	border: $border-width-large solid $-border-color
	background-color: $-border-color
	position: absolute
	bottom: $-tag-offset + 2px
	left: 5%
	margin-left: -2px
	z-index: $-zindex-community

	&
	&-img
		img-circle()

.-tag
	rounded-corners()
	elevate-1()
	padding: $-tag-padding-vertical $-tag-padding-horizontal
	font-weight: 700
	letter-spacing: 1px
	background-color: var(--theme-bg-offset)
	font-size: $-tag-font-size
	white-space: nowrap
	position: absolute
	bottom: -($-tag-offset)
	z-index: $-zindex-tag

	&.-live
		background-color: $gj-overlay-notice
		color: $white

	.jolticon
		font-size: $-tag-font-size
		margin: 0

.-title
	line-clamp(2)
	width: 100%
	font-weight: 700
	font-size: $font-size-tiny
	text-align: center
	color: var(--theme-fg)

.-tooltip
	padding: 8px

	hr
		margin: 12px -8px

	&-row
		display: flex
		flex-direction: row
		align-items: center
		grid-gap: 4px

		&:not(:last-child)
			margin-bottom: 4px

	&-img
		flex: none
		display: inline-block
		border-radius: 50%
		width: 16px
		height: 16px

	&-members
		font-weight: 700

	&-user
	&-community
		font-size: $font-size-small

	&-community
		color: var(--theme-fg-muted)
