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

.game-package-card
	&-pricing
		rounded-corners()
		float: right
		margin-top: -(15px + 4px)
		margin-left: 15px
		padding: 10px
		text-align: center

		&-amount
			color: $white

		&-amount-old
			theme-prop('color', 'lighter')
			margin-left: 5px
			text-decoration: line-through
			font-size: $font-size-tiny

		&-tag
			color: $white
			font-size: $font-size-tiny
			font-weight: bold
			text-transform: uppercase

			&.muted
				theme-prop('color', 'lighter')

		&-sale-percentage
			change-bg('highlight')
			theme-prop('color', 'highlight-fg')
			border-top-left-radius: $border-radius-base
			border-top-right-radius: $border-radius-base
			display: block
			margin-left: -10px
			margin-right: -10px
			margin-top: -10px
			margin-bottom: 5px
			padding-top: 3px
			padding-bottom: 3px
			font-weight: bold

	.card
		padding-bottom: 0

	.card-sale-info
		theme-prop('color', 'highlight')

	.card-controls
		margin-bottom: 15px

	.package-card-well-expander
		clear: both
		margin-left: -15px
		margin-right: -15px

	.package-card-well
		change-bg('bg-offset')
		theme-prop('border-top-color', 'light')
		theme-prop('border-bottom-color', 'light')
		padding: 15px
		border-top-width: 2px
		border-top-style: dashed
		border-bottom-width: 2px
		border-bottom-style: dashed

		p:last-child
			margin-bottom: 0

		&-os
			margin: 0 5px
			font-size: $font-size-small

	&-payment-what-link
		float: right
		display: inline-block
		line-height: $button-md-line-height
		font-size: $font-size-small
