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

.form-markdown-editor-media-items
	change-bg('bg')
	theme-prop('border-color', 'bg-subtle')
	border-width: 2px
	border-style: solid
	border-top: 0
	border-top-left-radius: 0
	border-top-right-radius: 0
	margin-bottom: 0 // Get rid of the bottom margin from 'well' styling.

	>>> .form-group
		margin-bottom: 0

	.media-item-list
		white-space: nowrap
		margin: 0 -10px

		&-col
			display: inline-block
			width: 40%
			max-width: 200px
			padding: 0 10px

		&-item
			rounded-corners-lg()
			change-bg('fg')
			display: block
			position: relative
			padding-top: 80%
			height: 0

			@media $media-xs
				margin-bottom: $grid-gutter-width-xs

		&-item-inner
			position: absolute
			top: 3px
			right: 3px
			bottom: 3px
			left: 3px

		&-item-controls
			position: absolute
			top: 3px
			right: 3px
			z-index: 1

		&-item-img
			rounded-corners-lg()
			position: absolute
			top: 0
			right: 0
			bottom: 0
			left: 0
			background-repeat: no-repeat
			background-position: center center
			background-size: cover
