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

// Pillar variables and utilities.
@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/code"
@import "../../node_modules/bootstrap/scss/grid"
@import "../../node_modules/bootstrap/scss/dropdown"

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

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

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


// Pillar components.
@import "apps_base"

@import "components/navbar"
@import "components/dropdown"
@import "components/footer"
@import "components/shortcode"

@import "components/flyout"
@import "components/buttons"
@import "components/popover"
@import "components/tooltip"
@import "components/checkbox"
@import "components/overlay"
@import "components/card"
@import "components/search"

@import "comments"
@import "notifications"


$theatre-width: 350px

body.theatre
	.page-content
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		display: flex
		align-items: center
		justify-content: center

		.page-body
			height: 100%
			width: 100%


#theatre-container
	#theatre-media
		height: 100%
		width: 100%
		padding: 25px
		position: relative
		overflow: auto

		&:hover
			ul#theatre-tools
				display: block

		img
			display: block
			box-shadow: 1px 1px 10px rgba(black, .2)
			max-width: 100%
			max-height: 100%
			height: auto
			margin: 0 auto
			+position-center-translate

		&.zoomed-out
			cursor: zoom-in

		&.zoomed-in
			display: block
			padding: 0
			img
				cursor: zoom-out
				position: initial
				top: initial
				left: initial
				transform: initial
				height: initial
				width: initial
				max-width: initial
				max-height: initial

		ul#theatre-tools
			display: none
			position: fixed
			z-index: 9
			bottom: 15px
			right: 15px
			margin: 0
			padding: 0
			list-style: none
			color: white
			background-color: rgba(black, .5)
			border-radius: 3px
			box-shadow: 0 0 15px rgba(black, .2)

			li
				display: inline-block
				a, span
					display: block
					padding: 10px
					cursor: default
					color: white

				&:hover a, &:hover span
					color: $color-primary

				&.download
					a
						cursor: pointer
						&:hover
							color: $color-primary

					&.disabled
						a
							cursor: not-allowed
							color: $color-text-dark-hint

				&.active
					background-color: rgba(black, .8)
					a, span
						color: $color-primary

				&.theatre-tool-resize.active span i:before
					content: '\e843'

	&.with-info
		#theatre-media ul#theatre-tools
			right: $theatre-width + 15
		#theatre-info
			right: 0
			visibility: visible
			position: relative

			.comments-container .comments-list .comment-reply-container
				.comment-reply-form .comment-reply-field textarea
					display: block

	#theatre-info
		min-width: $theatre-width
		overflow-y: auto
		position: absolute
		right: -$theatre-width
		top: 0
		transition: right 200ms ease-in-out
		visibility: hidden
		width: $theatre-width

		ul.theatre-info-details
			li
				display: flex
				padding: 2px 0
				span
					display: inline-block
					flex: 2
					&:first-child
						flex: 1

		.comments-container
			height: 100%
			padding: 0 15px

			.comments-list
				.comments-list-title
					font-size: 1.2em

				.comment-container,
				.comment-reply-container
					padding-top: 10px
					padding-bottom: 10px

					.comment-reply-form
						.comment-reply-field textarea
							display: none
						.comment-reply-preview
							padding-top: 25px
						.comment-reply-meta
							.comment-author,
							.comment-rules
								display: none
							button.comment-action-submit
								min-width: auto
								font-size: .9em