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

.collection-thumbnail
	change-bg('bg-offset')
	position: relative
	height: 0
	padding-top: 56.25% // HD 16:9
	overflow: hidden
	rounded-corners-lg()

	> .tag
		position: absolute
		left: 0
		top: 10px
		z-index: 2
		border-top-left-radius: 0
		border-bottom-left-radius: 0

	> .jolticon
		theme-prop('color', 'bg-subtle')
		position: absolute
		font-size: 16px * 4
		left: 50%
		margin-left: -(@font-size / 2)
		top: @left
		margin-top: @margin-left

		// We have a much smaller view in lists.
		.game-collection-list &
			font-size: 16px
			margin-left: -(@font-size / 2)
			top: @left
			margin-top: @margin-left

	> img
		display: block
		position: absolute
		left: 0
		right: 0
		top: 0
		bottom: 0
		width: 100%
		height: 100%
