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

.-content
	position: relative
	overflow: hidden

	@media $media-sm-up
		rounded-corners-lg()

.-background
	display: flex
	justify-content: center
	align-items: center

.-title
	margin-bottom: 2px

.-bg
	position: absolute
	width: 200%
	height: 200%
	min-height: 500px
	z-index: 1
	transform: rotateZ(30deg)
	background-image: url('../pattern.png')

.-trophy-difficulty-1
	background-color: rgba(248, 198, 143, 0.3)

.-trophy-difficulty-2
	background-color: rgba(207, 207, 207, 0.3)

.-trophy-difficulty-3
	background-color: rgba(255, 207, 39, 0.3)

.-trophy-difficulty-4
	background-color: rgba(176, 205, 217, 0.3)

.-bg-gradient
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	z-index: 2
	background: linear-gradient(transparent 0%, var(--theme-bg-actual) 50%)

.-content-inner
	position: relative
	z-index: 3

.-trophy-view
	display: flex

	@media $media-xs
		flex-direction: column

.-thumbnail
	flex-shrink: 0

	@media $media-xs
		margin-bottom: $line-height-computed
		display: flex

	& > *
		width: 100px

.-trophy-type
	display: inline-block

	& > *
		vertical-align: middle

.-subtitle-link

	&:hover
		text-decoration: none

	& *
		vertical-align: middle
	// Override user hover card display block
	& > div
		display: inline-block !important

.-info
	@media $media-sm-up
		margin-left: 20px
		flex-grow: 1

.-description
	margin-top: ($line-height-computed / 2)
	word-break: break-word
	margin-bottom: ($line-height-computed / 2)

.-exp
	display: flex
	justify-content: center
	align-items: center
	margin-top: 10px

.-subtitle-avatar
	width: $line-height-computed
	height: $line-height-computed
	display: inline-block
	& > span
		display: inline-block
