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

fieldset
	margin-top: $line-height-computed

	& > legend
		font-family: $font-family-heading
		margin-top: 0
		font-weight: 300

>>> .form-group
	position: relative
	margin-bottom: 6px

	label[for]
		display: none

	.jolticon
		theme-prop('color', 'fg-muted')
		position: absolute
		left: 8px
		top: 11px
		z-index: 3

>>> .form-control
	position: relative
	height: 40px

	&.has-icon
		padding-left: 33px

.left-col
	float: left
	width: 50%
	padding-right: (6px / 2)

.right-col
	float: right
	width: 50%
	padding-left: (6px / 2)

.checkbox
	theme-prop('color', 'fg-muted')
	cursor: pointer
	font-weight: normal
	font-size: $font-size-small

.new-card-expander
	margin-left: -($grid-gutter-width-xs / 2)
	margin-right: -($grid-gutter-width-xs / 2)

	@media $media-sm-up
		margin-left: -($grid-gutter-width / 2)
		margin-right: -($grid-gutter-width / 2)

	&.has-cards .well
		position: relative
		margin-top: 10px

		// Up arrow.
		&::before
			caret(color: var(--theme-bg-offset), direction: 'up', size: 10px)
			content: ''

a.card-list-item
	clearfix()
	rounded-corners-lg()
	theme-prop('border-color', 'bg-subtle')
	display: block
	padding: 15px
	margin-bottom: 10px
	border-width: 2px
	border-style: solid

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

	&.active
		theme-prop('border-color', 'highlight')

h4
	font-weight: 300
