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

.form-group
	margin-bottom: $font-size-base

>>> label
	font-family: $font-family-base !important

.amount-input
	position: relative
	display: inline-block

	input
		display: inline-block
		width: 120px
		margin-right: 10px
		padding-left: 25px

	&-currency
		theme-prop('color', 'light')
		position: absolute
		content: '$'
		top: 7px
		left: 10px
		z-index: 2

.saved-card, .saved-card-more
	clearfix()
	rounded-corners()
	theme-prop('border-color', 'fg')
	display: inline-block
	padding-left: 20px
	padding-right: 20px
	padding-top: 8px
	padding-bottom: 8px
	border-width: $button-md-outline-border-size
	border-style: solid
	width: 100%
	height: 40px + (@padding-top * 2) + (2px * 2)
	margin-bottom: $line-height-computed
	vertical-align: middle
	cursor: pointer

	&:hover
		theme-prop('color', 'highlight')
		background-color: $black
		border-color: $black

	&.disabled
		pointer-events: none
		opacity: 0.5

.saved-card-options
	clearfix()

	.saved-card-option
		margin-right: 10px + 40px

	.saved-card
		float: left
		display: block
		margin-right: 10px

	.saved-card-more
		float: left
		width: 40px
		padding-left: 0
		padding-right: 0
		line-height: 40px
		text-align: center

		.jolticon
			vertical-align: middle
			cursor: pointer

.saved-card-label
	font-size: $font-size-tiny
	text-transform: uppercase

.saved-card-avatar
	float: left
	width: 40px

.saved-card-content
	margin-left: 50px
