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

.form-control-markdown
	& > nav
		margin-bottom: 0

		& > ul
			float: left

	textarea
		width: 100%
		padding: ($grid-gutter-width / 2)

		@media $media-xs
			padding: ($grid-gutter-width-xs / 2)

	&-helptext
		float: right
		padding-top: 10px
		padding-bottom: 10px
		font-size: $font-size-tiny

		// We show a big markdown icon, so we have to remove the extra padding.
		@media $media-xs
			padding-top: 0
			padding-bottom: 0

		.jolticon
			vertical-align: top
			padding-right: 3px

	&-helplink
		display: inline-block

		@media $media-sm-up
			margin-left: 15px

	&-preview
		theme-prop('border-color', 'bg-subtle')
		border-width: $border-width-base
		border-style: solid
		overflow-y: auto
		overflow-x: hidden

	&.has-controls textarea
		border-bottom-style: dashed
		border-bottom-left-radius: 0
		border-bottom-right-radius: 0
