$node-latest-thumbnail-size: 160px
$breadcrumbs-container-height: 26px

/* Dark navbar when browsing a project. */
body.project,
body.edit, body.sharing, body.attract, body.flamenco,
body.svnman, body.edit_node_types, body.search-project
	nav.navbar
		@extend .navbar-dark
		padding-right: 5px

#project-container
	display: flex
	flex-direction: row
	min-height: 300px
	position: relative
	overflow-y: auto
	z-index: $z-index-base

	&.is-sidebar-visible
		#project-side-container
			@extend .d-flex

		.breadcrumbs-container
			+media-xs
				left: $project_nav-width-xs
			+media-sm
				left: $project_nav-width-sm
			+media-md
				left: $project_nav-width-md
			+media-lg
				left: $project_nav-width-lg
			+media-xl
				left: $project_nav-width-xl

			.project-sidebar-toggle
				@extend .d-none

#project-side-container
	display: none // It's 'flex' when is-sidebar-visible is in #project-container

	+media-xs
		position: fixed
		bottom: 0
		right: 0
		top: $project_header-height
		left: 0
		z-index: 1
		height: 100%


#project_nav,
#project_tree,
#project_nav-container
	+media-xs
		height: 100vh
		width: 100%
	+media-sm
		width: $project_nav-width-sm
	+media-md
		width: $project_nav-width-md
	+media-lg
		width: $project_nav-width-lg
	+media-xl
		width: $project_nav-width-xl

	width: $project_nav-width

#project_nav-container
	position: fixed
	z-index: $z-index-base + 5

	.project-sidebar-toggle
		right: 5px
		z-index: 1

#project_sidebar
	box-shadow: inset -1px 0 0 0 $color-background
	flex-shrink: 0
	width: $project-sidebar-width
	z-index: $z-index-base + 6

	+media-xs
		width: 100%

	ul.project-tabs
		position: fixed
		width: $project-sidebar-width
		top: $project_header-height
		bottom: 0

		+media-xs
			display: flex
			position: relative
			top: 0
			width: 100%

		li
			width: $project-sidebar-width
			height: $project-sidebar-width
			position: relative

			&:hover,
			&.active
				cursor: pointer

				a
					color: $primary
					i
						+active-gradient

			a
				align-items: center
				color: $color-text
				display: flex
				justify-content: center
				height: $project-sidebar-width
				width: $project-sidebar-width

			&.tabs-thumbnail
				img
					height: $project-sidebar-width
					width: $project-sidebar-width


#project-nav,
#project_context-container
	flex: 1


/* Header with name and node edit tools */
#project_context-header
	top: $breadcrumbs-container-height
	right: 0
	z-index: $z-index-base + 3

	+media-xs
		bottom: 0

/* Edit Asset buttons */
.project-mode-view,
.project-mode-edit,
.project-mode-add
	display: none

ul.project-edit-tools
	li:not(.disabled)
		.btn
			background-color: $white

			&:hover
				border-color: $primary
				background-color: $white
				color: $primary

	li
		&.button-save
			&.field-error
				a
					background-color: $danger
					border-color: $danger
					color: white

			&.saving
				a
					pointer-events: none
					cursor: default
					+pulse-75

			&.disabled
				cursor: not-allowed
				a
					pointer-events: none
					background: repeating-linear-gradient(-45deg, darken($color-success, 15%), darken($color-success, 15%) 10px, darken($color-success, 20%) 10px, darken($color-success, 20%) 20px)

		&.button-move
			&.moving
				background-color: $color-success
				border-color: $color-success
				pointer-events: none
				cursor: default
				+pulse-75

		&.featured
			a
				color: $color-warning
				border-color: $color-warning

				&:hover
					background-color: rgba($color-warning, .1)

		&.disabled
			+disabled-stripes

			a
				+disabled-stripes

		&.dropdown
			li
				a
					color: $body-color
					display: block
					padding: $dropdown-item-padding-y $dropdown-item-padding-x
					padding-left: 15px
					user-select: none

					&:hover
						color: $primary
						text-decoration: none

	/* Icons per asset type. */
	i
		&.icon-group:after
			content: '\e80d'
		&.icon-group_texture:after,
		&.icon-group_hdri:after
			content: '\e80b'
			font-size: 1.1em
		&.icon-asset:after
			content: '\e825'
		&.icon-page:after
			content: '\e824'
		&.icon-texture:after
			content: '\e80a'
		&.icon-hdri:after
			content: '\f019'

	/* // Extra asset tools in dropdown */
/* // Edit Asset buttons */

#project_context
	position: relative
	display: flex
	flex-direction: column
	flex: 1
	height: 100%
	background-color: white

#node-container
	/* For error messages (403) and other overlaid text*/
	#node-overlay
		z-index: $z-index-base + 2
		position: relative
		opacity: 0
		transition: opacity 250ms ease-in-out
		&.active
			opacity: 1
			display: block !important

	section.comments-list
		.comment-reply-container
			padding: 15px 15px 15px 20px

		.comments-list-header
			padding: 0 20px

/* Project context on the right of the navigation */
/* Contains #project_context */
#project_context-container
	iframe#server_error
		width: 100%
		min-height: 800px
		border: none

	.breadcrumbs-container
		height: $breadcrumbs-container-height
		top: $project_header-height + 1

#project_context
	padding-top: $breadcrumbs-container-height + 1

	.node-details-description
		font:
			size: 1.2em
			weight: 200

		img
			margin-bottom: 2rem
			margin-top: 2rem

/* The actual navigation tree container */
#project_tree
	overflow-y: auto // show vertical scrollbars when needed.
	padding: 5px 0 // some padding on top/bottom of jsTree.
	position: relative

	&.edit
		margin-top: 0

/* Node Context */
=project-node-title
	font-size: 1.5em
	color: $color-text-dark-primary

$node-preview-max-height-sm: 300px
$node-preview-max-height-md: 500px
$node-preview-max-height-lg: 700px

#node-container.texture

	.texture-title
		padding: 20px 20px 0 20px
		margin: 0
		float: left
		text-transform: capitalize
		+project-node-title

		position: relative
		z-index: 1

	.texture-license
		position: relative
		z-index: 1
		float: right
		padding: 25px 20px 0 0
		cursor: default

		i
			font-size: 1.3em
			&.pi-license-cc-0
				top: -1px

		span
			position: relative
			bottom: 2px
			margin-right: 10px
			color: $color-text-dark-secondary

		&.public, &.public span
			color: $color-success

	.texture-backdrop
		background:
			size: cover
			position: 50% 50%
		position: absolute
		z-index: 0
		opacity: .3
		width: 100%
		height: 250px
		top: -10px
		left: -10px
		filter: blur(10px)

		&:after
			content: ''
			display: block
			position: absolute
			width: 100%
			height: 250px
			background: linear-gradient(transparent, white)
			top: 0
			left: 0
			z-index: 0
			filter: none


.node-row
	display: flex
	width: 100%
	flex: row
	clear: both

	padding: 20px
	margin-bottom: 0
	border-bottom: thin solid rgba($color-text-dark, .2)

	&.texture-map
		width: 50%
		float: left
		clear: none
		border-right: thin solid rgba($color-text-dark, .2)
		background-color: white
		position: relative

		&:last-child,
		&:nth-child(even)
			border-right: none

		&:last-child
			border-bottom: none

	&.texture-info
		color: $color-text-dark-secondary
		list-style-type: none
		margin: 0
		padding: 10px 20px

		li
			&:not(:first-child)
				padding-left: 15px

			i
				position: relative
				top: -1px
				right: 2px

			&.status
				margin-left: auto

			&.pending
				color: $danger

	section.node-preview.texture
		overflow: hidden
		width: 50%
		max-height: 200px
		max-width: 200px
		float: left
		position: relative
		background-color: $color-background
		border-radius: 3px
		user-select: none

		img.node-preview-thumbnail
			+position-center-translate
			width: 100%
			border-radius: 3px
			user-select: none
			cursor: grabbing
			cursor: -webkit-grabbing

		.loading
			position: absolute
			top: 0
			bottom: 0
			left: 0
			right: 0
			color: rgba(white, .5)
			opacity: 0
			visibility: hidden
			background-color: rgba(black, .5)
			width: 100%
			height: 100%
			pointer-events: none

			transition: opacity 250ms ease-in-out

			i
				font-size: 1.5em
				position: absolute
				top: 45%
				left: 45%

			&.active
				opacity: 1
				visibility: visible

	section.node-details-container.texture
		width: 100%
		flex: 1
		position: relative
		min-height: 200px

		.node-details-header
			width: 100%
			max-width: 100%
			display: block
			float: none
			padding: 5px 20px 0 20px
			min-height: initial

			&.nofiles
				padding: 0
				.node-title
					color: $color-text-dark-secondary
					font:
						weight: 400
						size: 1.2em

			.node-title
				color: $color-text-dark-primary
				font:
					weight: 500
					size: 1.5em
				+text-overflow-ellipsis


		.node-details-attributes
			padding: 0 20px 10px

			span
				display: block

				&.sizes, &.extra, &.length, &.content_type
					color: $color-text-dark-secondary
					padding: 5px 0
					font:
						size: 1.1em
						weight: 400

					strong
						padding-left: 5px

				&.content_type
					color: $color-text-dark-hint
					font-size: .9em
					text-transform: uppercase

		.node-details-meta
			background-color: transparent
			border: none
			display: block
			width: 100%
			max-width: 100%
			position: absolute
			bottom: 0
			padding: 0 0 0 10px

			.node-details-meta-list button
				width: 100%

			.node-details-meta-list-item.type
				text-transform: uppercase

section.node-preview
	background-color: black
	color: $color-text-light-primary
	flex-shrink: 0 // prevents content/comments to make preview dissappear
	max-height: calc((9 / 16) * 133vh)
	overflow: hidden
	min-height: 200px

	iframe
		width: 100%

	img
		@extend .d-block
		@extend .mx-auto
		max-width: 100%
		object-fit: scale-down
		flex: 1

		+media-xs
			width: 100%

	&.video
		background-color: black
		position: relative
		padding-bottom: 56.25%
		height: 0
		overflow: hidden

		.video-js
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%

		.video-dummy
			position: absolute
			top: 0
			bottom: 0
			left: 0
			right: 0

			&-content
				+position-center-translate
				align-items: center
				background-color: rgba(darken($color-primary, 25%), .8)
				color: $color-text-light
				display: flex
				height: 100%
				justify-content: center
				padding: 15px
				width: 100%
				z-index: 2

				&-icon
					font-size: 4em

				&-text
					font-size: 1.6em
					span
						display: block

					hr
						border-color: rgba(white, .5)
					a
						display: inline-block
						color: white
						font-size: .7em

						em
							font-style: normal
							color: $color-warning
							margin-right: 10px


section.node-preview-forbidden
	align-items: center
	background-color: $primary
	color: $color-text-light
	cursor: default
	display: flex
	justify-content: center
	min-height: 400px
	position: relative
	overflow: hidden

	img
		height: 130%
		left: -60px
		max-width: initial
		filter: blur(30px)
		object-fit: cover
		opacity: .5
		position: absolute
		top: -60px
		width: 130%
		z-index: 0

	> div
		font-size: 1.4em
		position: relative
		z-index: 1

	span
		display: block

	hr
		opacity: .5


/* Narrower details for about page (since it doesn't have navtree) */
body.about
	section.node-details-container.project
		+media-lg
			max-width: $screen-lg / 1.4
			margin: 0 auto

.node-title
	+project-node-title

section.node-details-container
	position: relative

	.node-details-header
		align-items: center
		display: flex
		padding: 15px 20px

		+media-xs
			font-size: .7em
			width: 100%
			max-width: 100%

.node-details-meta
	> ul
		align-items: center
		display: flex

		> li
			align-items: baseline
			color: $color-text-dark-secondary
			display: flex
			padding-left: 5px
			margin-left: 5px

			&:first-child
				margin-left: 0
				padding-left: 0

			&.status-pending
				color: $danger

			&.public
				color: $color-success

			&.download
				/* Download dropdown options */
				ul.dropdown-menu
					min-width: 240px

					li
						display: block

						a
							display: flex
							padding: 10px 15px

							&:hover
								text-decoration: none

								span
									color: $primary

									&.length
										color: lighten($color-primary, 10%)

							span
								color: $body-color

								&.length
									margin-right: auto
									color: $color-text-dark-hint
									padding-right: 15px
								&.format
									text-transform: uppercase
									align-self: flex-end
									margin-left: auto
								&.size
									display: inline-block
									padding-left: 15px

			&.left-side
				margin-left: auto

			// When the asset is type .blend
			.blend
				min-width: 52px

	&.preview
		padding: 0
		color: $color-text-light-primary
		position: absolute
		right: 10px
		bottom: 20px
		z-index: 1

		ul.node-details-meta-list
			li.node-details-meta-list-item
				&.date
					&:before
						content: ''
				&.author
					color: lighten($color-background-nav, 25%)

				&.status
					color: $color-text-dark

	ul.blender-id-badges
		padding-left: 0
		list-style-type: none
		display: flex

		> li
			margin: 0
			padding: 0

			> a
				display: block
				padding: 2px

			img
				// TODO(Pablo): fix this so that it keeps the aspect ratio okay when the original image isn't square.
				max-width: 16px
				max-height: 16px

.node-details-license
	color: $color-text-dark-secondary
	&:hover
		color: $primary

	i
		font-size: 1.2rem
		margin-left: -15px

		&:after
			left: -22px
			position: relative
			top: 1px


section.node-details-container
	&.storage
		.node-details-meta
			ul.node-details-meta-list
				li.node-details-meta-list-item
					&.length
						margin-left: auto


.project-featured-container
	border-top: thin solid $color-background
	padding-top: 20px
	margin-top: 20px
	padding-left: 20px

	h3
		margin-top: 0

	.featured-list
		width: 100%
		max-width: 800px
		+clearfix

		.am-wrapper
			float: left
			position: relative
			overflow: hidden

		.am-wrapper img
			position: absolute
			outline: none

		.featured-item
			.featured-item-info
				display: flex
				flex-direction: column-reverse
				position: absolute
				z-index: 1
				opacity: 0
				color: white
				top: 0
				left: 0
				right: 0
				bottom: 0
				padding: 5px 10px
				border-top-right-radius: 3px
				transition: opacity 150ms ease-in-out
				background-image: linear-gradient(10deg, rgba(0,0,0,0.85) 15%, transparent 50%)

				+media-xs
					opacity: 1

				span
					padding: 3px 0

					&.title
						line-height: 1.2em
						font-weight: 500
						word-break: break-word
					&.type
						font-size: .8em
						text-transform: capitalize
						color: $color-text-light-secondary
						+text-overflow-ellipsis

			&:hover
				.featured-item-info
					opacity: 1

.error-node-type-not-found
	color: $danger
	clear: both

a.learn-more
	font-size: .9em
	margin-left: 20px
	padding: 5px 10px
	+button($color-info, $btn-border-radius)

.node-extra
	display: flex
	flex-direction: column

	padding: 0 20px
	width: 100%

	.node-updates
		flex: 1
		font-size: 1.1em
		margin-top: 15px

		ul
			padding: 0
			margin: 0 0 15px 0
			display: flex
			flex-direction: row
			flex-wrap: wrap

			li
				display: flex
				flex-direction: column
				list-style: none
				padding: 5px
				border-top: thin solid $color-background
				cursor: pointer
				width: 33.3333%

				+media-xs
					width: 100%

				&.texture, &.group_texture
					width: 25%

				&:hover
					img
						opacity: .9
					a.title
						color: $color-primary
						text-decoration: underline

				&.post
					.info .title
						color: $node-type-post
					a.image
						border-color: $node-type-post
						background-color: hsl(hue($node-type-post), 20%, 55%)

				&.asset.image a.image
					border-color: $node-type-asset_image
					background-color: hsl(hue($node-type-asset_image), 20%, 55%)
				&.asset.file a.image
					border-color: $node-type-asset_file
					background-color: hsl(hue($node-type-asset_file), 20%, 55%)
				&.asset.video a.image
					border-color: $node-type-asset_video
					background-color: hsl(hue($node-type-asset_video), 20%, 55%)

				.image
					width: 100%
					height: $node-latest-thumbnail-size
					min-height: $node-latest-thumbnail-size
					max-height: $node-latest-thumbnail-size
					background-color: $color-background
					margin: 5px auto 10px auto
					position: relative
					overflow: hidden
					border-bottom: 3px solid $color-background-dark
					border-top-left-radius: 3px
					border-top-right-radius: 3px

					img
						max-height: $node-latest-thumbnail-size
						+position-center-translate

					i
						color: rgba(white, .9)
						font-size: 1.8em
						position: absolute
						bottom: 3px
						left: 5px
						text-shadow: 1px 1px 0 rgba(black, .2)

						&.pi-file-archive
							font-size: 1.5em
							bottom: 5px
						&.pi-newspaper
							font-size: 1.6em
							left: 7px

				.info
					width: 100%
					height: 100%
					display: flex
					flex-direction: column
					justify-content: space-between
					word-break: break-word

					.description
						font-size: .9em
						padding-top: 5px
						color: $color-text-dark-primary

					.title
						display: block
						font-size: 1em
						color: $color-text-dark
						+clearfix
						+text-overflow-ellipsis

					span.details
						width: 100%
						display: block
						font-size: .8em
						padding: 5px 0
						color: $color-text-dark-secondary
						+clearfix

						.who
							margin-left: 3px
						.what
							text-transform: capitalize


.list-node-children-container
	position: relative
	width: $list-node-children-item-width
	height: $list-node-children-item-width
	float: left
	margin: 10px 15px 10px 0

	&.group_texture
		.list-node-children-item.group_texture
			height: $list-node-children-item-width
			margin-top: 5px
			.list-node-children-item-thumbnail
				.list-node-children-item-thumbnail-icon i
					position: relative
					bottom: 10px
			.list-node-children-item-name
				bottom: 26px

	&.group_hdri, &.hdri
		width: 300px

		+media-md
			width: 33.333%
			margin: 0 0 5px 0

		+media-sm
			width: 50%
			margin: 0 0 5px 0

		.list-node-children-item.hdri,
		.list-node-children-item.group_hdri
			height: $list-node-children-item-width
			width: 98%
			margin-top: 5px

			.list-node-children-item-thumbnail
				width: 100%
				height: $list-node-children-item-width

				+media-sm
					img
						width: 100%

				.list-node-children-item-thumbnail-icon i
					bottom: 30px

			.list-node-children-item-name
				bottom: 26px
				width: 100%
				max-width: 100%

	.list-node-children-empty
		color: $color-text-dark-secondary
		font-size: 1.2em

	.list-node-children-item-preview
		margin: 0
		position: absolute
		top: $list-node-children-item-width + 10px
		width: auto
		height: auto
		background: black
		box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 25px rgba(black, .25)

		visibility: hidden
		display: none
		opacity: 0

		z-index: 2
		max-height: 260px
		min-height: 50px
		min-width: 100px
		max-width: 320px
		border-radius: 3px

		transition: opacity .1s ease-in-out

		img.texture-preview
			width: auto
			margin: 0 auto
			max-height: 260px
			max-width: 320px

		span.texture-name
			display: block
			width: 100%
			padding: 8px 10px 0 10px
			color: white
			font:
				size: 1.1em
				family: $font-headings
			border-top-left-radius: 3px
			border-top-right-radius: 3px
			text-shadow: 1px 1px 1px rgba(black, .5)

			position: absolute
			top: 0
			left: 0
			right: 0
			@include overlay(rgba(black, .9), 0%, transparent, 25%)

			+text-overflow-ellipsis

		&:hover
			display: none

		&.active
			opacity: 1
			visibility: visible
			display: block

.list-node-children-item
	float: left
	margin: 10px 10px 10px 0
	border-radius: 3px
	color: $color-text-dark
	box-shadow: 2px 2px 0 rgba(black, .1)
	width: $list-node-children-item-width
	overflow: hidden

	&:hover
		color: darken($color-primary, 20%)
		opacity: .9
		text-decoration: none

	&:active
		opacity: .8
		color: $color-primary
		& .list-node-children-item-name i
			color: $color-primary

	&.has-picture
		.list-node-children-item-thumbnail
			background-color: black

	.cloud-logo
		+position-center-translate
		font-size: 4em
		color: $color-background-dark
		left: $list-node-children-item-width / 2 - 10

	/* Browse group as list */
	&.browse-list
		display: none
		width: 99%
		position: relative
		background-color: initial
		box-shadow: none
		border: thin solid transparent
		border-top-color: darken(white, 8%)

		margin: 0 10px 0 0
		padding:
			top: 7px
			bottom: 7px

		+clearfix
		clear: none

		.cloud-logo
			font-size: 2em
			color: darken($color-background, 60%)
			+position-center-translate
			left: $list-node-children-item-width_list / 1.3

		&:hover
			opacity: 1
			text-decoration: none
			cursor: default

			.list-node-children-item-name
				text-decoration: none
				color: darken($color-primary, 10%)

			.list-node-children-item-thumbnail
				cursor: pointer

		&:active
			background-color: rgba($color-background, .5)
		&:focus
			background-color: thin solid rgba($color-primary, .2)

		.list-node-children-item-thumbnail
			float: left
			min-width: $list-node-children-item-width_list * 1.69
			max-width: $list-node-children-item-width_list * 1.69
			height: $list-node-children-item-width_list
			background-color: darken($color-background, 55%)
			box-shadow: inset 0 0 1px darken($color-background, 65%)

			img
				height: $list-node-children-item-width_list
				width: auto

			.list-node-children-item-thumbnail-icon
				font-size: 1.2em
				transition: none

			.list-node-children-item-ribbon
				+ribbon
				right: -30px
				top: 5px

				span
					font-size: 60%
					margin: 1px 0
					padding: 2px 35px

		.list-node-children-item-name
			position: relative
			padding:
				top: 0
				left: 15px
			font:
				size: 1.15em
			color: $color-text-dark-primary
			text-shadow: none

			background-color: initial
			width: initial
			max-width: initial

			&:hover
				cursor: pointer
				text-decoration: underline

		.list-node-children-item-meta
			position: relative
			left: 15px
			font-size: .9em
			color: $color-text-dark-secondary
			background-color: initial
			padding: 0
			text-decoration: none
			span
				width: 100%

				&.updated
					color: $color-text-dark-hint

				&.status
					font-size: .8em
					color: $color-text-dark-secondary
					border: thin solid $color-text-dark-hint
					padding: 3px 8px
					text-transform: uppercase
					border-radius: 3px
					margin-right: 5px


	.list-node-children-item-thumbnail
		display: flex
		align-items: center
		justify-content: center

		width: $list-node-children-item-width
		height: $list-node-children-item-width / 1.69
		background-color: $color-background
		position: relative
		overflow: hidden

		img
			height: 100%
			+position-center-translate

		.list-node-children-item-thumbnail-icon
			position: absolute
			top: 0
			left: 0
			right: 0
			bottom: 0
			font-size: 1.3em
			color: white
			text-shadow: 1px 1px 0 rgba(black, .2)
			background-image: linear-gradient(10deg, rgba(black, .2) 0%, transparent 40%)

			i
				position: absolute
				bottom: 5px
				left: 5px

		& .list-node-children-item-status
			color: $color-text-light-primary
			background-color: rgba($color-background-nav, .2)
			padding: 2px 6px
			border-radius: 3px
			font-size: .8em

			position: absolute
			top: 10px
			right: 10px

		& .list-node-children-item-ribbon
			+ribbon


	& .list-node-children-item-name
		z-index: 1
		position: relative

		display: flex
		align-items: center
		background-color: $color-background

		padding: 5px 12px
		font-size: .9em
		width: $list-node-children-item-width
		max-width: $list-node-children-item-width

		span
			+text-overflow-ellipsis
	&.texture, &.hdri
		margin: 5px 10px 5px 0
		position: relative
		width: $list-node-children-item-width
		height: $list-node-children-item-width

		.list-node-children-item-thumbnail
			height: $list-node-children-item-width
			background-color: black

		&:hover
			opacity: 1

			img
				opacity: .5

			.list-node-children-item-name
				opacity: 1

		img
			transition: opacity 100ms ease-out

		.list-node-children-item-name
			text-shadow: 1px 1px 2px rgba(black, .5)
			display: block
			opacity: 0
			background-color: transparent
			position: absolute
			z-index: 2
			top: 5px
			left: 10px
			color: white
			font-size: 1em
			height: 100%

			span
				padding: 0
				display: block

				&.sizes
					font-weight: bold
					small
						padding: 0 5px
						font-size: .8em
						color: $color-text-light-primary

				&.variations
					padding-top: 5px
					margin:
						top: 5px
						right: 20px
					font-size: .9em
					color: $color-text-light-primary
					text-transform: capitalize

					.more
						font-size: .9em
						text-transform: none

				&.icons
					position: absolute
					top: 0
					right: 12px
					font-size: 1.2em

					i
						color: white



#node_index-container
	background-color: $color-background-light
	width: 100%

	+media-lg
		border-radius: 3px

	#node_index-header
		position: relative
		width: 100%
		color: white

		img.background-header
			position: absolute
			z-index: 0
			width: 100%
			top: 0
			left: 0

			+media-lg
				border-top-left-radius: 3px
				border-top-right-radius: 3px

		#node_index-collection-info
			position: relative
			z-index: 1
			width: 100%
			text-shadow: 1px 1px 1px rgba(black, .5), 0 0 25px rgba(black, .6)
			padding: 40px 30px

			.node_index-collection-name
				font:
					size: 4em
					weight: 600
				margin-bottom: -5px
				text-transform: uppercase

			.node_index-collection-description
				font-size: 1.4em

	#node_index-list-container
		background-color: white
		width: 100%
		height: 100%
		padding: 0
		margin: 0
		position: relative

		+clearfix

		.node_index-list,
		.node_index-collection
			padding: 15px 0 0 0
			margin: 0
			clear: both

			/* Block for each project item */
			& .node_index-list-item
				display: flex
				max-width: 70%
				padding: 0
				margin:
					left: 15px
					bottom: 30px

				+clearfix

				& .item-info
					width: 100%
					padding: 0 15px

				& .item-title
					padding-bottom: 15px
					font:
						size: 1.8em
						weight: 400

				& .item-image
					padding-top: 5px
					img
						width: 90px
						height: 90px
						border-radius: 3px

.node_index-collection
	display: flex
	align-items: stretch
	flex-wrap: wrap
	margin: 0 auto
	padding: 15px
	position: relative
	z-index: 1

	+media-xs
		flex-direction: column

	.node_index-collection-card
		position: relative
		border-radius: 3px
		width: 31%
		overflow: hidden
		background-color: white
		color: $color-text-dark-primary
		box-shadow: 1px 1px 2px rgba(black, .1), 0 0 0 1px rgba(black, .1)
		margin: 12px
		top: 0
		transition: box-shadow 150ms ease-in-out
		cursor: pointer

		+media-md
			width: 30%

		+media-sm
			width: 45%
			margin: 15px
		+media-xs
			width: 100%
			margin-left: auto
			margin-right: auto

		&:hover
			box-shadow: 1px 1px 15px rgba(black, .25)

		&:active, &:focus
			box-shadow: 1px 1px 15px rgba(black, .25), 0 0 0 2px $color-primary

		&.empty
			padding: 20px 15px
			color: $color-text-dark-secondary

			&:hover
				cursor: default


		a.item-header
			display: block
			width: 100%
			overflow: hidden

			img
				width: 100%
				border-bottom: 3px solid $color-primary

		.item-info
			position: relative
			padding: 15px 20px 30px 20px

			a.item-title
				display: inline-block
				width: 100%
				padding: 0 0 10px 0
				color: $color-text-dark
				font:
					size: 1.5em
					weight: 500
				text-decoration: none

			p.item-description
				font:
					size: 1.15em

		a.learn-more
			position: absolute
			padding: 3px 20px
			bottom: 0
			right: 0
			visibility: hidden
			font-size: .8em
			margin: 10px
		&:hover
			a.learn-more
				visibility: visible


#node-add-container,
#node-edit-container,
#blog_container

	#node-add-header,
	#node-edit-header
		background-color: white
		padding: 20px 20px 10px 20px
		height: 80px
		position: relative

		.node-add-title,
		.node-edit-title
			position: absolute
			bottom: 10px
			left: 20px
			+project-node-title
			font-size: 2em
			color: $color-text-dark-secondary

	#node-add-form,
	#node-edit-form
		flex: 1
		background-color: white

	#node-add-form,
	#node-edit-form,
	#blog_post-edit-form
		padding: 20px

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

			select
				text-transform: capitalize

			label
				+label-generic
				text-transform: capitalize

			&.error
				color: $danger
				background-color: $color-background-light
				padding: 10px 15px
				border: thin solid lighten($danger, 10%)
				border-top: 2px solid $danger
				border-bottom-left-radius: 3px
				border-bottom-right-radius: 3px
				label
					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: $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

				padding:
					top: 20px
					left: 0
					right: 0

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

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


			.node-edit-form-md-preview:empty
				color: transparent
				margin: 0 auto
				padding: 0 10px

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


		#node-edit-form-md-preview
			padding: 20px


#node-add-container,
#node-edit-container
	display: flex
	flex-direction: column
	flex: 1
	color: $color-text-dark

	form#node-edit-form

		&.group_texture
			.form-group.status,
			.form-group.description
				display: none

		&.texture
			.form-group
				input.fileupload
					&.notallowed
						opacity: 0.2
						pointer-events: none
						cursor: progress

			.fieldlist
				li.fieldlist-item
					div[class$="file"]
						width: 75%
						margin: 0

		.files-header
			width: 100%

		#files-action-add
			+button($color-success, $btn-border-radius, true)
			width: 200px
			padding: 5px 10px
			margin-bottom: 10px
			opacity: 1
			user-select: none

			&:active
				background: lighten($color-success, 5%)

			&.notallowed
				opacity: .2
				pointer-events: none
				cursor: progress

	.fieldlist
		li.fieldlist-item
			div[class*="map_type"],
			div[class*="is_tileable"]
				padding: 10px 15px
				width: 25%
				float: right
				border-left: thin solid $color-background

			div[class*="map_type"]
				select.form-control
					background: white !important
				label
					display: none

			div[class*="is_tileable"]
				label label
					font-weight: 400 !important
					padding-left: 0

			div[class$="file"]
				margin-top: 10px
				width: auto

				label
					display: none

#overlay-mode-move-container
	visibility: hidden
	background-color: lighten($color-background, 5%)
	box-shadow: 0 5px 35px rgba(black, .2)
	color: $color-text-dark-primary
	position: absolute
	top: -$project_header-height
	left: 0
	right: 0
	width: 80%
	height: 60px
	z-index: $z-index-base + 1
	opacity: 0
	margin: 0 auto
	border-bottom-left-radius: 3px
	border-bottom-right-radius: 3px
	transition: all 150ms ease-in-out
	border: thin solid lighten($color-text-dark-hint, 10%)
	border-top: none

	+media-xs
		width: 98%
		height: 100px
	+media-sm
		width: 98%
		height: 100px
	+media-md
		width: 90%
	+media-lg
		width: 80%

	&.visible
		visibility: visible
		opacity: 1
		top: 0

		.overlay-container
			.title
				i
					animation:
						name: overlay-mode-move-icon
						duration: 1.5s
						delay: 0
						fill-mode: forwards
						iteration-count: infinite


	.overlay-container
		width: 100%
		position: absolute
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)
		transition: top 350ms ease-in-out
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center


		.title
			text-align: center
			position: relative

			font:
				size: 1.2em
				weight: 300

			i
				position: relative
				right: 0
				padding-right: 15px

			strong
				font-weight: 400

		.buttons
			font-size: .9em
			float: left
			text-align: center
			padding: 15px 0 15px 15px

			button
				padding: 5px
				margin: 0 5px

				+media-sm
					margin: 5px


			button.cancel
				+button($color-text-dark-primary, $btn-border-radius)

			button.move
				+button($color-success, $btn-border-radius, true)

				&.disabled
					pointer-events: none
					cursor: not-allowed
					background: repeating-linear-gradient(-45deg, darken($color-success, 15%), darken($color-success, 15%) 10px, darken($color-success, 20%) 10px, darken($color-success, 20%) 20px)


@keyframes overlay-mode-move-icon
	0
		right: 0
	50%
		right: 5px
	100%
		right: 0

#node-add-form
	.btn
		margin-right: 10px
	.fileupload-buttonbar
		padding: 10px 0
		.fileinput-button
			+button($color-success, $btn-border-radius)
		.start
			+button($color-info, $btn-border-radius)
		.cancel
			+button($color-warning, $btn-border-radius)
		.delete
			+button($danger, $btn-border-radius)
		.toggle
			margin: 0 20px

	.files
		.btn
			&.start
				+button($color-info, $btn-border-radius)
			&.cancel
				+button($color-warning, $btn-border-radius)
			&.delete
				+button($danger, $btn-border-radius)

			&.create
				+button($color-success, $btn-border-radius)

	.template-upload,
	.template-download

		td
			border: none
		.preview
			img
				border-radius: 3px
		.progress
			height: 10px
			box-shadow: none
		.size
			color: $color-text-dark-secondary

		.toggle
			margin: 0 20px

@import plugins/_videoplayer


/* Edit Project specific classes*/
.ace_editor.ace-tm
	min-height: 300px
	margin: 60px auto 30px auto
	font-size: 1em
	resize: vertical !important
	overflow: auto !important
	color: $color-text

	&+.form-group.dyn_schema,
	&+.form-group.form_schema,
	&+.form-group.permissions
		label
			position: absolute
			top: -355px
		.form-control
			display: none

.file_delete, .file_original
	display: block

/* Project blog overrides */
#project_context
	#blog_container
		padding: 0
		#blog_index-container
			width: 100%
			padding: 0
			border: none
			box-shadow: none

			.blog_index-header
				border-radius: 0

.join-project
	display: flex
	flex-direction: column
	width: 100%
	height: 100%
	color: white

	background-position-x: 64%

	a.cta
		padding: 5px 35px
		+button($color-primary, $btn-border-radius, true)

	a.cta-learn-more
		padding: 5px 20px
		+button(white, $btn-border-radius)
		display: inline-block
		margin: 25px 0 25px 15px
		padding: 5px 35px

	&__title
		display: flex
		padding: 25px 0 10px 10px
		font:
			size: 2.5em
			weight: 300

		span.icon
			display: flex
			align-items: center

		span.text
			display: flex
			align-items: center
			text-align: left
			line-height: 1.2em
			margin-right: auto

	&__lead
		font-size: 1.4em
		font-weight: 300
		padding: 0 25px 25px
		max-width: 800px

	&__summary
		font-size: 1.1em
		padding: 0 25px
		max-width: 500px

		ul
			margin: 0
			padding-left: 20px

		&-cta-container
			a.cta
				display: inline-block
				margin: 25px 0 0 0
				padding: 5px 35px
				text-align: center

// Node Type: Page
.page
	.node-details-description
		font-size: 1.3em
