pillar/src/styles/_search.sass

$search-hit-width: 160px
$search-hit-width_list: 48px
$search-hit-width_grid: 100px

.search-site-result
	width: 100%

	&.advanced
		width: 350px
		z-index: 101

		.search-hit
			background: white
			border-top: thin solid $color-background !important

			.search-hit-name
				font-weight: 400
				padding-top: 8px
				color: $primary

	.search-hit
		padding: 0
		margin: 0
		display: block
		color: $color-text
		text:
			transform: initial
			shadow: none
		font:
			size: .9em
			weight: 400
			style: initial
		width: 100%
		+text-overflow-ellipsis
		+clearfix

		& em
			color: $primary
			font-style: normal

		&:hover
			padding: 0
			margin: 0
			background: $color-background

		&:first-child
			border: none

		.search-hit-name
			top: 6px
			margin: 0
			padding-top: 0

		.search-hit-meta
			padding-top: 8px
			margin: 0

		.search-hit-thumbnail
			border-radius: 0
			transition: margin-right 100ms ease-in-out

.twitter-typeahead
	.tt-hint
		color: $color-text-dark-hint

	.tt-menu
		top: 47px !important
		background-color: white
		box-shadow: 1px 1px 0 rgba(black, .05), 0 20px 50px rgba(black, .25)
		min-width: 350px
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px
		border-top: 3px solid lighten($primary, 5%)
		overflow: hidden

		.tt-suggestion
			&:hover, &.tt-cursor
				.search-hit
					text-decoration: none
					background-color: lighten($color-background, 3%)
				.search-hit-name
					color: $color-background-nav

				.search-hit-meta
					span.project, span.node_type, span.media
						color: $color-background-nav

				.search-hit-thumbnail
					opacity: .9
					margin-right: 15px

			&.tt-cursor:hover .search-hit
				background-color: lighten($color-background, 5%)

.search-list
	width: 50%

	.embed-responsive
		width: 100px
		min-width: 100px

	.card-deck.card-deck-vertical
		.card
			flex-wrap: initial

.search-settings
	width: 30%

	.card-deck.card-deck-vertical
		.card .embed-responsive
			max-width: 80px

	input.search-field
		border: none
		border-bottom: 2px solid rgba($primary, .2)
		border-radius: 0
		width: 100%
		transition: border 100ms ease-in-out

		&::placeholder
			color: $color-text-dark-secondary
		&:placeholder-shown
			border-bottom-color: $primary

		&:focus
			outline: none
			border: none
			border-bottom: 2px solid lighten($primary, 5%)

.search-details
	width: 70%

	.container-fluid .col-md-8
		flex: 1
		max-width: 100%
		width: 100%

#search-details
	position: relative

	#search-hit-container
		position: absolute // for scrollbars
		overflow-y: auto

		#error_container
			position: relative
			background: white
			padding: 20px

	#search-error
		display: none
		margin: 20px auto
		color: $color-danger
		text-align: center

#search-container
	#node-container
		width: 100%
		max-width: 100%

		.node-preview
			max-height: initial

			&.group
				background: white
				.overlay
					display: none
				.node-title
					font-size: 1.8em
					padding-right: 30px
					width: 100%
					+text-overflow-ellipsis
				.backdrop
					opacity: .15

			.node-preview-thumbnail
				max-height: 320px

		.node-children
			&.group
				background-color: white
				position: relative
				z-index: 1

				.list-node-children-item.browse-list
					width: 98%

					.list-node-children-item-name
						+text-overflow-ellipsis
						font-size: 1.1em
					.list-node-children-item-meta
						+text-overflow-ellipsis
						padding-right: 20px

						span
							&.free
								font-size: .7em

		.node-details-container
			&.group
				position: initial
			.node-details-description
				max-width: 100%

				p
					margin-bottom: 0
					padding-bottom: 10px

			.node-details-header
				clear: both
				width: 100%
				max-width: 100%
				.node-title
					font-size: 1.7em

			.node-details-meta
				&.header
					clear: both
					width: 100%
					max-width: 100%
					padding: 10px

					.node-details-meta-list
						display: inline-block
						float: right
						font-size: .9em

						.node-details-meta-list-item
							&.status, &.author
								display: none
							&.type, &.length
								padding-top: 10px
							&.access
								padding-top: 5px

				&.footer
					.node-details-meta-list
						.node-details-meta-list-item
							&.status
								display: none
				&.preview
					bottom: initial
					top: 10px
					.node-details-meta-list
						.node-details-meta-list-item
							&.status, &.author, &.date
								display: none

		&.texture
			.texture-title
				font-size: 2em
				padding: 15px 10px 10px 15px
			.node-row
				background: white

				&.texture-map
					width: 100%

					section.node-preview.texture
						max-height: 180px
						max-width: 180px

				.node-details-header
					padding:
						left: 15px
						right: 15px
						bottom: 0
					min-height: initial
					.node-title
						font-size: 1.5em

				.node-details-attributes
					font-size: .9em
					padding:
						left: 15px
						right: 15px
						bottom: 10px

					span.sizes
						padding: 0
					span.extra
						padding: 0

				.node-preview.texture
					max-width: 128px

					img.node-preview-thumbnail
						pointer-events: none

				.node-details-meta
					padding: 15px

					.node-details-meta-list
						width: 100%
						flex-wrap: wrap
						margin: 0 auto
						.node-details-meta-list-item
							text-align: center
							margin: 0 auto 0 0
							padding: 5px 0
							font-size: .9em

							&.image.download
								width: 100%
								padding: 5px 0 0 0
								button
									width: 100%

.search-project
	li.project
		display: none

#search-sidebar
	.toggleRefine
		display: block
		padding-left: 7px
		color: $color-text-dark
		text-transform: capitalize

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

		&.refined
			color: $primary

			&:hover
				color: $color-danger

				span
					&:before
						/* x icon */
						content: '\e84b'
						font-family: 'pillar-font'
			span
				&:before
					/* circle with dot */
					content: '\e82f'
					font-family: 'pillar-font'
					position: relative
					left: -7px
					font-size: .9em

		span
			&:before
				/* empty circle */
				content: '\e82c'
				font-family: 'pillar-font'
				position: relative
				left: -7px
				font-size: .9em

	.search-list-stats
		color: $color-text-dark-hint
		padding: 10px 15px 0 15px
		text-align: center
		font-size: .9em
		+clearfix

.search-pagination
	text-align: center
	list-style-type: none
	margin: 0
	padding: 0
	width: 100%
	display: flex
	+clearfix

	li
		display: inline-block
		margin: 5px auto

		&:last-child
			border-color: transparent

		a
			font-weight: 500
			padding: 5px 4px
			color: $color-text-dark-secondary

			&:hover
				color: $color-text-dark-primary

		&.disabled
			opacity: .6

		&.active a
			color: $color-text-dark-primary
			font-weight: bold


.view-grid
	display: flex
	justify-content: space-between
	padding: 10px !important

	.search-hit
		width: 30%
		clear: none
		padding: 0
		margin: 5px
		overflow: hidden

		border-radius: 3px
		border-left: none
		border: 2px solid $color-background
		background-color: $color-background

		transition: border-color 150ms ease-in-out

		&.active
			background-color: $primary
			border-color: $primary

			.search-hit-name
				font-weight: 500
				color: white
				background-color: $primary

		.search-hit-name
			font-size: .9em
			color: $color-text-dark-primary
			width: 100%
			position: absolute
			bottom: 0
			padding: 4px 5px
			background-color: $color-background

		.search-hit-meta
			display: none

		.search-hit-thumbnail
			display: flex
			flex-direction: column
			background-color: transparent
			width: 100%
			max-width: 100%
			height: auto
			min-height: $search-hit-width_grid
			overflow: hidden
			margin: 0 auto

			+media-xs
				display: none
			+media-sm

			img
				+position-center-translate
				top: 40%
				width: auto
				height: auto

			.search-hit-thumbnail-icon,
			.search-hit-thumbnail-icon .dark
				top: 40%

.filter-list
	width: 100%
	padding: 5px 0
	margin-bottom: 10px
	display: flex
	align-items: center

	ul
		margin: 0 0 0 auto
		align-self: flex-end
		width: auto
		list-style: none
		border-radius: 3px
		overflow: hidden
		padding: 0

		li
			display: inline-block
			padding: 3px 10px
			cursor: pointer
			background-color: $color-background-dark
			border: thin solid $color-text-dark-hint

			&.active
				color: white
				background-color: $primary
				border-color: transparent