// Bootstrap variables and utilities.
@import "../../node_modules/bootstrap/scss/functions"
@import "../../node_modules/bootstrap/scss/variables"
@import "../../node_modules/bootstrap/scss/mixins"

@import _config
@import _utils

// Bootstrap components.
@import "../../node_modules/bootstrap/scss/root"
@import "../../node_modules/bootstrap/scss/reboot"

@import "../../node_modules/bootstrap/scss/type"
@import "../../node_modules/bootstrap/scss/images"

@import "../../node_modules/bootstrap/scss/code"
@import "../../node_modules/bootstrap/scss/grid"
@import "../../node_modules/bootstrap/scss/buttons"
@import "../../node_modules/bootstrap/scss/dropdown"
@import "../../node_modules/bootstrap/scss/custom-forms"

@import "../../node_modules/bootstrap/scss/nav"
@import "../../node_modules/bootstrap/scss/navbar"

@import "../../node_modules/bootstrap/scss/card"
@import "../../node_modules/bootstrap/scss/jumbotron"
@import "../../node_modules/bootstrap/scss/media"
@import "../../node_modules/bootstrap/scss/close"
@import "../../node_modules/bootstrap/scss/modal"
@import "../../node_modules/bootstrap/scss/tooltip"

@import "../../node_modules/bootstrap/scss/utilities"

// Pillar components.
@import "apps_base"
@import "components/base"

@import "components/card"
@import "components/jumbotron"
@import "components/navbar"
@import "components/dropdown"
@import "components/footer"
@import "components/shortcode"
@import "components/flyout"
@import "components/buttons"
@import "components/tooltip"
@import "components/overlay"

@import _comments
@import _notifications

#blog_post-edit-form
	padding: 20px

	.form-group
		input, textarea, select
			+input-generic

			&#fileupload
				color: $color-info

		&.tags .select2-container
			.select2-selection
				+input-generic

		select
			text-transform: capitalize

		label
			+label-generic
			text-transform: capitalize

		&.error
			color: $color-danger
			background-color: $color-background-light
			padding: 10px 15px
			border: thin solid lighten($color-danger, 10%)
			border-top: 2px solid $color-danger
			border-bottom-left-radius: 3px
			border-bottom-right-radius: 3px
			label
				color: $color-danger
				font-weight: 500

		&.file
			background-color: $color-background-light
			padding: 10px 15px
			border: thin solid $color-background
			border-top: 2px solid $color-info
			border-bottom-left-radius: 3px
			border-bottom-right-radius: 3px

	.form-upload-progress
		.form-upload-progress-bar
			margin-top: 5px
			background-color: $color-success
			height: 5px
			min-width: 0
			border-radius: 3px

	.form-group
		.node-preview-thumbnail
			display: block

		&.attachments
			+clearfix

			.form-control
				padding: 0
				margin: 0
				border: none
				list-style-type: none
				+clearfix

				label[for^='attachments-']
					margin-top: 15px
					font-weight: 400

				div[id^='attachments-']
					margin-bottom: 15px
					border-top: thin solid $color-text-dark-hint

	.form-group.description,
	.form-group.summary,
	.form-group.content
		position: relative

		textarea
			width: 100%
			min-height: 220px

			line-height: 1.5em
			border: 1px solid $color-background-dark
			border-radius: 3px
			margin: 0 auto 10px auto
			padding: 10px
			color: $color-text-dark

			transition: all 300ms ease-in-out
			resize: vertical


			&:focus
				border: 1px solid $color-info
				outline: none

			&.field-error
				border-color: $color-danger

		.md-preview-loading
			position: absolute
			left: 85px
			padding-top: 5px
			font-size: .9em
			color: $color-text-dark-secondary
			display: none

		.node-edit-form-md-preview

			+markdown-preview-container

			&:before
				content: 'Live Preview'
				position: absolute
				top: -25px
				left: 20px
				font-size: .7em
				color: $color-text-dark-secondary
				transition: color 150ms ease-in-out

			&:after
				content: 'Markdown Supported'
				position: absolute
				top: -25px
				right: 20px
				font-size: .7em
				color: $color-text-dark-hint
				transition: color 150ms ease-in-out

			&:empty
				color: transparent
				margin: 0 auto
				padding: 0 10px

				&:before, &:after
					content: ''
					color: transparent


#blog_post-create-container,
#blog_post-edit-container
	+container-box
	padding: 25px
	width: 75%

	+media-xs
		border-radius: 0
		width: 100%
		clear: both
		display: block
	+media-sm
		width: 100%
	+media-md
		width: 100%
	+media-lg
		width: 100%

#blog_post-edit-form
	padding: 0

	.form-group
		label
			text-transform: capitalize

	.form-group.content
		.form-control
			min-height: 350px

	.form-group.url
		label
			text-transform: uppercase

	.form-group.picture
		+text-overflow-ellipsis

		img
			display: block
			max-width: 100%

		a
			display: block
			padding: 10px 0
			text-align: right

		.original a
			color: $color-info
		.delete a
			color: $color-danger

	.form-upload-file-meta
		width: initial