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

.game-thumbnail
	position: relative
	display: block
	margin-bottom: $grid-gutter-width-xs
	color: inherit

	@media $media-sm-up
		margin-bottom: $grid-gutter-width

		.-thumb
			elevate-0()

		&:hover
			.-thumb
				elevate-2()

.-controls
	position: absolute
	top: 5px
	right: 5px
	z-index: 10
	display: none

	.game-thumbnail:hover &
		display: block

.-meta
	position: relative
	padding-top: $game-thumbnail-meta-spacing

.-avatar
	float: left
	width: $game-thumbnail-avatar-size
	height: $game-thumbnail-avatar-size

.-dev
	text-overflow()
	theme-prop('color', 'fg-muted')
	margin-left: $game-thumbnail-avatar-size + $game-thumbnail-meta-spacing
	font-weight: bold
	font-size: $font-size-h6

.-title
	text-overflow()
	margin: 0
	margin-left: $game-thumbnail-avatar-size + $game-thumbnail-meta-spacing
	line-height: 1.3
	font-weight: bold

.-meta-extra
	clear: both
	margin-top: $game-thumbnail-meta-spacing
	// We show tags and icons in here. We want to make sure that the line
	// height is always the same no matter what content we show, so let's
	// force it.
	line-height: 26px

.-os
	display: inline-block
	margin-right: $game-thumbnail-meta-spacing

.-tags
	display: inline-block
	margin-right: $game-thumbnail-meta-spacing

.-pricing
	rounded-corners()
	float: right
	height: 30px
	line-height: @height
	margin-left: $game-thumbnail-meta-spacing
	padding: 0 10px
	text-align: center

	&-owned
		change-bg('highlight')
		theme-prop('color', 'highlight-fg')

		& ^[-1]-tag
			color: inherit

	&-amount
		font-size: $font-size-small
		font-weight: bold

	&-decimal
		font-size: $font-size-small

	&-tag
		theme-prop('color', 'fg')
		font-size: $font-size-tiny
		font-weight: bold
		text-transform: uppercase

	// This is way too complex.
	&-sale
		height: 36px
		line-height: @height

		.-pricing
			&-sale-percentage
				change-bg('gray')
				theme-prop('color', 'highlight')
				display: inline-block
				vertical-align: top
				margin-right: -10px
				margin-left: 10px
				padding-right: 10px
				padding-left: 10px
				height: 36px
				line-height: @height
				font-size: $font-size-small
				font-weight: bold
				border-top-right-radius: $border-radius-base
				border-bottom-right-radius: $border-radius-base

			&-container
				display: inline-block
				height: 36px
				padding-top: 3px
				padding-bottom: 3px
				vertical-align: top

			&-amount
				line-height: 20px

			&-amount-old
				theme-prop('color', 'fg-muted')
				text-decoration: line-through
				font-size: $font-size-tiny
				line-height: 10px
				vertical-align: text-bottom

// Text color
.-title
	theme-prop('color', 'fg')

	.game-thumbnail:hover &
		theme-prop('color', 'link')
