$project-sidebar-background: lighten($color-background, 5%)
$node-latest-thumbnail-size: 160px

body.open-projects,
body.courses,
body.workshops
	#project-container
		+container-behavior

body.blog
	background-color: white

	#project_nav,
	#project_nav-container
		+media-md
			width: $project_nav-width * 1.4
		+media-sm
			width: $project_nav-width * 1.1
		+media-xs
			width: 100%
		width: $project_nav-width * 1.5

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

	+media-xs
		flex-direction: column-reverse
		min-height: auto

#project-side-container
	display: flex

	+media-xs
		flex-direction: column-reverse

#project-side-container+#project_context-header
	width: 100%
	left: 0

#project_context-header
	span#status-bar
		text-align: left

#project_nav-container
	+media-lg
		width: $project_nav-width * 1.33

	+media-xs
		display: block
		width: 100%
		position: relative
		height: initial !important

	position: fixed
	z-index: $z-index-base + 5
	width: $project_nav-width


#project_sidebar
	width: $project-sidebar-width
	z-index: $z-index-base + 6

	+media-xs
		width: 100%

	ul.project-tabs
		background-color: $color-background-nav
		margin: 0
		padding: 0
		list-style: none

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

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

		li
			display: flex
			align-items: center
			justify-content: center
			width: $project-sidebar-width
			height: $project-sidebar-width
			position: relative
			color: white
			background-color: $color-background-nav
			border-left: 2px solid transparent
			transition: all 100ms ease-in-out

			+media-xs
				border-bottom: 2px solid transparent
			+media-sm
				border-bottom: 2px solid transparent
			+media-md
				border-left: 2px solid transparent
			+media-lg
				border-left: 2px solid transparent

			&:first-child
				border-top: thin solid transparent

			&:hover
				background-color: $color-background-nav-light
				cursor: pointer

				+media-xs
					border-bottom: 2px solid $color-background-nav-light
				+media-sm
					border-bottom: 2px solid $color-background-nav-light
				+media-md
					border-left: 2px solid $color-background-nav-light
				+media-lg
					border-left: 2px solid $color-background-nav-light

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

			i
				font-size: 1.1em

			&.active
				background-color: $color-background-nav-light

				// The tiny triangle
				&:after
					+media-xs
						border-top-color: $project-sidebar-background
						border-right-color: transparent
						left: 50%
						right: initial
						transform: translateX(-50%)
						top: 0

					border: 7px solid transparent
					border-right-color: $project-sidebar-background
					content: ''
					display: block
					position: absolute
					right: 0
					top: 50%
					transform: translateY(-50%)

				a
					color: white

			&.tabs-thumbnail
				height: $project-sidebar-width
				border-bottom: 2px solid $color-background-nav-light

				img
					width: $project-sidebar-width
					height: $project-sidebar-width

				&.image
					border-left: none

				#project-loading
					position: absolute
					width: $project-sidebar-width
					height: $project-sidebar-width
					display: flex
					align-items: center
					justify-content: center
					i
						position: relative
						top: -1px
						font-size: 1em
						color: white

#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
	background-color: $color-background-nav-dark
	&:hover
		background-color: $color-background-nav-light

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


/* Container for navigation on the left */
#project_nav
	+media-lg
		width: $project_nav-width * 1.33

	+media-xs
		width: initial

	background-color: $project-sidebar-background
	display: block
	left: 0
	position: relative
	visibility: visible
	width: $project_nav-width

	&.about
		display: none
		visibility: hidden


/* Header with name and node edit tools */
#project_nav-header,
#project_context-header
	align-items: center
	color: white
	display: flex
	position: relative

#project_context-header
	align-items: center
	background-color: white
	background-color: $color-background-light
	border-bottom: thin solid lighten($color-text-dark-hint, 10%)
	box-shadow: none
	color: $color-text-dark-secondary
	display: flex
	height: $project_header-height
	min-height: $project_header-height
	position: fixed
	top: $project_header-height
	transition: box-shadow 250ms ease-in-out
	width: auto
	z-index: $z-index-base + 3

	&.is-offset
		box-shadow: 0 0 25px rgba(black, .2)

#project_nav-header
	z-index: $z-index-base + 3
	position: absolute
	top: 0
	left: 0
	height: $project_header-height
	min-height: $project_header-height
	width: 100%
	background-color: $color-background-light
	border-bottom: thin solid $color-background-dark

	/* Name of the project */
	.project-title
		width: 100%
		max-width: 100%
		height: 100%
		transition: background-color 150ms ease-in-out

		a
			display: block
			width: 100%
			color: $color-text-dark
			padding: 15px
			font-size: 1.1em
			+text-overflow-ellipsis

			&:hover, &:active
				color: $color-primary
				text-decoration: none
				outline: none

span#status-bar
	position: absolute
	left: 0
	top: 10px
	min-width: 33%
	padding: 5px 15px
	color: $color-text-dark
	opacity: 0
	z-index: 1
	background-color: $color-background-light
	font-weight: 400
	white-space: nowrap
	transition: all 250ms ease-in-out

	+media-xs
		left: 0
		min-width: 100%

	i
		margin-right: 5px

	&.info
		color: $color-info
	&.error
		color: $color-danger
	&.warning
		color: $color-warning
	&.success
		color: $color-success
	&.default
		color: $color-text-light

	&.active
		opacity: 1

span#project-edit-title
	position: absolute
	padding: 15px 20px
	font:
		size: 1.1em
		weight: 400
	white-space: nowrap


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

ul.project-edit-tools
	display: flex
	align-items: center
	height: 100%
	padding: 0
	margin:
		top: 0
		left: auto
		right: 5px
		bottom: 0
	color: $color-text-dark-hint

	list-style-type: none
	font-size: .9em

	+media-xs
		width: 100%
		margin: 0 auto
		justify-content: space-around

	/* Bottons at the end of a form, like Save Changes */
	&.bottom
		+clearfix
		padding: 20px 0 25px 0
		border-top: thin solid $color-text-dark-hint
		justify-content: flex-end
		width: 100%
		height: initial

	li
		margin: 0
		padding: 0
		position: relative
		float: left
		user-select: none

		a
			min-width: 110px
			user-select: none

			&:focus, &:active
				text-decoration: none
				outline: none

		&.button-save

			&.disabled
				border-bottom: none

				a
					color: white
					border-color: darken($color-success, 10%)

			a
				border-color: $color-success
				background-color: $color-success
				color: white
				margin-right: 10px

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

			&.field-error
				a
					background-color: $color-danger
					border-color: $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

		&.button-add,
		&.button-edit
			min-width: 80px


		&.button-dropdown
			min-width: 50px
			cursor: pointer
			i
				margin: auto
				padding: 0

				&.button-add-icon
					margin-right: 5px

			a.dropdown-toggle
				display: inline-block
				min-width: auto

			&.open
				a.dropdown-toggle
					color: $color-text-light
					background-color: $color-primary
					border-color: darken($color-primary, 5%)

				li.button-delete:hover
					a
						color: $color-danger

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

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

		&.disabled
			cursor: not-allowed
			border-bottom: thin solid $color-text-dark-hint

			a
				pointer-events: none
				background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
				border-color: darken($color-text-dark-hint, 5%)
				opacity: .6
				color: $color-text-dark

		&.button-dropdown.disabled
			border-bottom: none

	a
		margin: 5px
		padding: 5px 15px
		color: $color-text-dark-primary
		border-radius: 3px
		border: thin solid $color-text-dark-primary
		text-align: center
		text-transform: uppercase
		transition: background-color 150ms ease-in-out
		background-color: $color-background-light

		i
			margin-right: 5px

		&:hover
			background-color: $color-background-active-dark
			border-color: darken($color-background-active-dark, 5%)
			color: $color-text-light
			text-decoration: none

		&:focus, &:active
			text-decoration: none
			outline: none


		&#item_save,
		&#item_cancel
			i
				font-size: 1em

		&#item_add,
		&#item_edit,
		&#item_move,
		&#item_featured
			li
				i
					margin-right: 10px

		&#item_delete
			li i
				margin-right: 0
		// &:not(:last-of-type)
			// border-right: thin solid darken($color-background, 50%)

	/* ul.project-edit-tools */

	/* Extra asset tools in dropdown */
	ul.dropdown-menu
		width: auto
		min-width: 180px
		padding: 0
		margin: 0
		top: 44px
		left: initial
		right: 10px
		bottom: initial
		border: thin solid $color-text-dark-hint
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px
		border-top-left-radius: 0
		border-top-right-radius: 0
		background-color: white
		color: $color-text-dark-primary
		box-shadow: 1px 1px 25px rgba(black, .2)

		li
			padding: 0
			clear: both
			display: flex
			align-items: center
			width: 100%

			a
				margin: 0
				padding: 10px 15px
				width: 100%
				border: 0
				font-size: .9em
				width: 100%
				text-align: left

				&:hover
					color: $color-primary
					background-color: transparent
				&:active, &:focus
					color: $color-primary
					background-color: transparent

				i
					display: inline-block
					margin: 0 15px 0 0

					&.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 */

	&.open
		button
			box-shadow: none

/* // Edit Asset buttons */

#project-loading
	color: $color-text-light-primary
	margin-left: auto
	display: inline-block
	background-color: transparent
	opacity: 0
	transition: opacity 150ms ease-in-out
	+position-center-translate

	i
		position: relative
		top: 2px

	&.active
		background-color: rgba($color-background-nav-dark, .7)
		opacity: 1

		i
			+spin
			animation-duration: .5s

#project-header+#project_tree,
#project-header+#project_context-container
	margin-top: $project_header-height


ul.project_nav-edit-list
	list-style: none
	padding: 0
	margin: $project_header-height 0 0 0

	li
		background-color: $color-background
		border-bottom: 1px solid $color-background-dark
		font:
			weight: 400
			family: $font-body
		color: $color-text-dark
		position: relative

		&:hover
			cursor: pointer
			background-color: $color-background-light
		a
			padding: 10px 15px
			display: inline-block
			width: 100%
			text-decoration: none
			color: $color-text-dark

		i
			padding-right: 15px

		&.active
			background-color: white

			a
				color: $color-primary-dark

.project_nav-toggle-btn
	position: absolute
	bottom: 0
	width: 100%
	padding: 10px
	text-align: center
	color: $color-text-light-hint
	cursor: pointer

	&:hover
		color: $color-text-light

	i
		font-size: 1.3em

	+media-xs
		visibility: hidden
		display: none

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

#project_context-header+#project_context
	padding-top: $project_header-height

#node-container
	flex: 1
	color: $color-text-dark
	background-color: white

	/* 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
	background-color: $color-background-nav

	iframe#server_error
		width: 100%
		min-height: 800px
		border: none


/* The actual navigation tree container */
#project_tree
	+media-xs
		margin-top: 0

	background-color: $project-sidebar-background
	border-right: thin solid $color-background
	margin-top: $project_header-height
	overflow-y: auto
	padding: 0 0 5px 0// some padding on top/bottom of jstree
	position: relative

	&.edit
		margin-top: 0


/* Node Context */
=project-node-title
	font:
		family: $font-body
		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


section.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

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

		&:last-child
			border-bottom: none

	&.texture-info
		padding: 10px 20px
		color: $color-text-dark-secondary
		position: relative
		z-index: 1

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

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


	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:
					family: $font-body
					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
	overflow: hidden

	iframe
		width: 100%

	min-height: 200px
	flex: 1
	max-height: 500px
	background-color: black
	display: flex
	justify-content: center
	align-items: center

	cursor: zoom-in

	+media-md
		max-height: $node-preview-max-height-md
	+media-lg
		max-height: $node-preview-max-height-lg

	img
		display: block
		max-height: $node-preview-max-height-lg
		max-width: 100%
		object-fit: scale-down

		+media-xs
			width: 100%

		+media-md
			max-height: $node-preview-max-height-md
		+media-lg
			max-height: $node-preview-max-height-lg

	&.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

	&.group
		align-items: center
		display: flex
		padding: 20px
		position: relative

	&.project
		background-color: black
		width: 100%

		img
			max-height: 800px
			max-width: 100%
			object-fit: cover
			width: 100%


	&.image.node-preview-blur
		cursor: default
		min-height: 400px
		position: relative

		img
			height: 130%
			left: -60px
			max-width: initial
			filter: blur(30px)
			object-fit: cover
			position: absolute
			top: -60px
			width: 130%


section.node-details-container
	background-color: white

	&.project
		padding-bottom: 15px

/* 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,
section.node-preview.group
	position: relative

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

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

		.node-title-details
			margin-left: auto
			line-height: 1em

			& .date
				display: inline-block
				margin-right: 10px
				color: $color-text-dark-secondary

			& .status
				display: inline-block
				font-size: .9em
				text-transform: capitalize
				color: $color-text-dark-primary
				padding: 5px 15px
				border: thin solid $color-text-dark-hint
				border-radius: 3px
				cursor: default

	.node-details-meta-actions
		margin-left: auto

		.btn-browsetoggle
			+button(lighten($color-background-nav, 20%), 3px)
			width: 48px
			text-align: center
			padding: 2px 4px
			i
				font-size: 1.3em
				padding: 0
				margin: 0

	&.project
		.node-details-title
			padding: 10px 20px 0 20px

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

			list-style-type: none
			margin: 0
			padding: 0

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

			> li
				margin: 0
				padding: 0
				line-height: 1em
				float: left

				& a.btn
					padding: 4px 12px 5px 12px
					margin: 0

				&.date
					color: $color-text-dark-secondary
					padding-left: 5px
					margin-left: 5px

					&:before
						color: $color-text-dark-secondary
						position: relative
						content: '·'
						left: -10px
						font-weight: 500

					span /* (updated x mins ago) */
						color: $color-text-dark-hint
						margin-left: 3px
						font-size: .9em
						text-transform: lowercase

				&.author
					color: $color-text-dark-primary

				&.status
					margin-right: 10px
					font-size: .9em
					text-transform: capitalize
					color: $color-text-dark-secondary
					font-weight: 300
					padding: 5px 15px
					border: thin solid $color-text-dark-hint
					border-radius: 3px
					cursor: default

				&.access
					color: $color-text-dark-primary
					cursor: default
					opacity: .5
					white-space: nowrap

					&:hover
						opacity: 1

					&.public
						border-color: $color-success
						color: $color-success
						padding: 0
						i
							font-size: 1.2em
							position: relative
							top: 1px

						span
							display: inline-block

				&.type
					text-transform: uppercase
					padding: 0 5px 0 15px
					cursor: default
					font-weight: 400
					color: $color-text-dark-hint

					+media-xs
						display: none

					/* .blend files are special snowflakes */
					span.blend
						display: inline-block
						padding: 0 35px 0 0
						font-size: 1.2em
						color: $color-text-dark-secondary

				&.access+li.node-details-meta-list-item.video.download,
				&.access+.tooltip+li.node-details-meta-list-item.video.download
					margin-left: 10px

				&.length
					padding: 0 5px 0 15px
					cursor: default
					font-weight: 400
					color: $color-text-dark-hint
					white-space: nowrap

				&.license
					color: $color-text-dark-secondary

					i
						color: $color-text-dark-primary
						font-size: 1.4em
						position: relative
						bottom: -2px
						left: -5px

				/* Download button */
				&.download
					align-self: flex-end
					padding: 0 0 0 10px

					/* Actual button */
					button
						+button($color-primary, 3px)
						position: relative

						padding:
							left: 20px
							right: 20px

						font-size: .9em

						i
							margin-right: 0

						/* Tweaks for specific icons */
						i.icon-dropdown-menu
							padding-left: 10px

						&.disabled
							border-color: $color-text-dark-hint
							color: $color-text-dark-hint
							+stripes(rgba($color-text-dark-hint, .1), rgba($color-text-dark-hint, .2), -45deg, 28px)

					/* Videos have dropdown caret, so paddit 5px less */
					&.video.download
						button
							padding-right: 10px

					&.file.download
						button
							+button($color-primary, 3px, true)
							padding:
								left: 15px
								right: 15px

							i
								margin-right: 0

					&.texture.download
						width: 100%

					&.open
						button
							box-shadow: none

.node-details-description
	+node-details-description
	padding-left: 20px
	padding-right: 20px

.node-details-meta
	background-color: $color-background-light
	border-bottom: thin solid $color-background
	display: flex
	flex-direction: column
	font-weight: lighter
	padding: 10px 20px

	> ul
		align-items: center
		display: flex
		list-style-type: none
		margin: 0
		padding: 0

		> li
			align-items: baseline
			display: flex
			padding-left: 10px
			margin-left: 10px

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

			&.status-pending
				color: $color-danger

			&.public
				color: $color-success

			&.download
				position: relative

				button
					+button($color-success, 3px)

				.dropdown-toggle
					padding-right: 0

				i.icon-dropdown-menu
					padding-left: 10px

				/* Download dropdown options */
				ul.dropdown-menu
					width: auto
					min-width: 240px
					padding: 0
					margin: 0
					top: initial
					left: initial
					right: 0
					bottom: 35px
					border: thin solid rgba(darken($color-background, 5%), .3)
					border-top-left-radius: 3px
					border-top-right-radius: 3px
					border-bottom-left-radius: 0
					border-bottom-right-radius: 0

					li
						padding: 0
						text-align: right
						clear: both
						display: flex
						align-items: center

						a
							padding: 10px 15px
							width: 100%

							&:hover
								color: $color-primary
								background-color: transparent

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

							span
								&.length
									float: left
									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


			&.dim
				color: $color-text-dark-secondary

			&.left-side
				margin-left: auto

	&.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

.node-details-license
	align-items: center
	border-bottom: thin solid $color-background
	color: $color-text-dark
	display: flex
	font-weight: lighter
	padding: 10px 20px

	&:hover
		color: $color-text-dark

	span.type
		i
			color: $color-text-dark-primary
			font-size: 1.8rem
			margin-left: -5px
			padding-right: 10px

			&:after
				top: 2px
				left: -22px
				position: relative
			&:before
				top: 2px
				position: relative

		span
			text-transform: uppercase

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: $color-danger
	clear: both

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

.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

					.ribbon
						+ribbon

				.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


section.node-children
	background-color: white

	&.group, &.storage
		flex: 1
		padding: 10px 0 25px 20px
		+clearfix

.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 15px rgba(black, .5)

		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($color-background-nav, .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: $color-background-nav

		&:hover
			opacity: 1

			img
				opacity: .15

			.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:
					family: $font-body
					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
					family: $font-body
					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
			position: relative
			margin: 0 auto 30px auto

			&.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

				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, 3px, 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: 0
	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: $project_header-height

		.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, 3px)

			button.move
				+button($color-success, 3px, 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, 3px)
		.start
			+button($color-info, 3px)
		.cancel
			+button($color-warning, 3px)
		.delete
			+button($color-danger, 3px)
		.toggle
			margin: 0 20px

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

			&.create
				+button($color-success, 3px)

	.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, 3px, true)

	a.cta-learn-more
		padding: 5px 20px
		+button(white, 3px)
		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