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

.client-installed-game
	position: relative

	>>> img, >>> video
		transition: all 1s
		filter: grayscale(0)

	&.-is-installing
		>>> img, >>> video
			filter: grayscale(100%)

.-thumb
	position: relative
	z-index: 1

// This matches the thumbnail ratio.
.-meta-outer
	position: absolute
	top: 0
	left: 0
	right: 0
	height: 0
	padding-top: 56.25% // HD 16:9

.-meta
	rounded-corners-lg()
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	align-items: center
	display: flex
	text-align: center
	background-color: rgba(0, 0, 0, 0.5)
	z-index: 2

	>>> .client-game-buttons
		display: block
		width: 100%

	>>> .client-install-progress
		rounded-corners()
		margin: 0
		margin-left: ($grid-gutter-width / 2)
		margin-right: ($grid-gutter-width / 2)
		margin-bottom: 5px
		padding: 2px 10px
		background-color: rgba($black, 0.7)
		color: $white

		p, .progress
			margin: 5px 0
			font-size: $font-size-tiny

.-version
	theme-prop('background', 'darkest')
	position: absolute
	bottom: 0
	right: ($grid-gutter-width / 2)
	color: $white
	padding: 5px 10px
	font-size: $font-size-tiny
	border-top-left-radius: $border-radius-large
	border-top-right-radius: $border-radius-large
