.card-deck
	&.card-deck-responsive
		.card
			margin: 0 0 20px 0
			$card-width-percentage: 30%
			flex: 1 0 $card-width-percentage
			max-width: $card-width-percentage

			+media-xs
				$card-width-percentage: 100%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage

			+media-sm
				$card-width-percentage: 46%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage
				margin-right: 100% / ($card-width-percentage / 1%)

			+media-md
				$card-width-percentage: 30%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage
				margin-right: 100% / ($card-width-percentage / 1%)

			+media-lg
				$card-width-percentage: 30%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage
				margin-right: 100% / ($card-width-percentage / 1%)

			+media-xl
				$card-width-percentage: 22%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage
				margin-right: ($card-width-percentage * 2) / ($card-width-percentage / 1%)

			+media-xxl
				$card-width-percentage: 22%
				flex: 1 0 $card-width-percentage
				max-width: $card-width-percentage
				margin-right: ($card-width-percentage * 2) / ($card-width-percentage / 1%)

	&.card-deck-vertical
		@extend .flex-column
		@extend .text-truncate
		flex-wrap: initial

		.card
			@extend .w-100
			@extend .flex-row
			@extend .p-0
			@extend .mb-2

			flex: initial
			flex-wrap: wrap
			max-width: 100%

			.card-img-top
				@extend .rounded-0

			.embed-responsive
				@extend .mr-2
				max-width: 120px

			.card-title
				@extend .text-truncate

			&.asset
				&.free
					&:after
						+ribbon
						content: 'FREE'
						font-size: .6rem
						left: -40px
						padding: 1px 45px
						right: initial
						transform: rotate(-45deg)

		.card-body
			@extend .overflow-hidden
			@extend .text-truncate
			flex-basis: 0

.card-padless
	.card
		@extend .border-0

	.card-body
		@extend .px-0


.card-image-fade
	&:hover
		.card-img-top
			opacity: .9

$card-progress-height: 5px
.card.asset
	color: $color-text

	&:hover
		text-decoration: none

	&.free
		overflow: hidden

		&:after
			+ribbon
			content: 'FREE'
			padding: 2px 50px

	.card-body
		position: relative // for placing the progress

		.card-text
			font-size: $font-size-xs

	.card-img-top
		background-position: center
		background-size: cover
		object-fit: cover

	.progress
		height: $card-progress-height
		position: absolute
		bottom: 0
		width: 100%
		z-index: 1

.card-thumbnail
	@extend .embed-responsive
	background-color: rgba($dark, .2)
	border-top-left-radius: $card-inner-border-radius
	border-top-right-radius: $card-inner-border-radius
	color: $dark

	&:before
		padding-top: 56.25%

.card-img-top
	@extend .align-items-center
	@extend .d-flex
	@extend .h-100
	@extend .position-absolute
	bottom: 0
	left: 50% !important
	top: 0
	transform: translateX(-50%)
	width: auto !important

	i
		font-size: 3em
		opacity: .2

/* Tiny label for cards. e.g. 'WATCHED' on videos. */
.card-label
	@extend .font-weight-bold
	@extend .position-absolute
	@extend .rounded
	@extend .text-white
	@extend .bg-dark
	bottom: $card-progress-height + 3px // enough to be above the progress-bar
	font-size: $font-size-xxs
	left: 5px
	padding: 1px 5px
	z-index: 1

.card-label
    &.right
        right: 5px
        left: auto

.card
	&.active
		.card-title
			color: $primary
