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

.trophy-thumbnail
	rounded-corners-lg()
	padding: 3px
	background-color: $black
	text-align: center

.trophy-thumbnail-img
	position: relative
	height: 0
	padding-top: 100%
	overflow: hidden
	border-radius: $border-radius-large - 2px

.trophy-thumbnail-img-inner
	change-bg('dark')
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0

	> .img-responsive
		display: block
		width: 100%

.trophy-thumbnail-img-1x
.trophy-thumbnail-img-2x
	position: absolute
	top: 50%
	left: 50%

.trophy-thumbnail-img-1x
	margin-left: -(34px / 2)
	margin-top: -(35px / 2)

.trophy-thumbnail-img-2x
	margin-left: -(34px)
	margin-top: -(35px)

.trophy-thumbnail-difficulty
	display: block
	padding-top: 3px // match the border
	font-size: $font-size-tiny
	text-align: center
	text-transform: uppercase
	color: $dark-theme-fg

.trophy-thumbnail-achieved
	change-bg('highlight')

	.trophy-thumbnail-difficulty
		theme-prop('color', 'highlight-fg')
