@import './intent'
@import './nav'
@import './entries'
@import './social-browser'

browserNoFiles(type, contentText)
	.browser.no-items
		&[data-filetype={type}]
			background-image url("img/content/no-files-"+type+".png")
			&:after
				content contentText

.browser
	height 100%
	position relative
	.scroll-content
		display flex
		flex-wrap wrap
		align-content flex-start
		right -15px !important
	&.loading:after
		content ""
		position absolute
		top 0
		right 0
		bottom 0
		left 0
		background url(img/loader.gif) no-repeat center center
	&[authenticated="false"].loading:after
		content none
	&.no-items
		background url("img/content/no-files.png") no-repeat center
		height 510px
		&:after
			content "No acceptable files available."
			display block
			position absolute
			top 290px
			left 0
			right 0
			color darkpurple
			font 24px/42px 'ProximaNova-Regular'
			text-align center
	&.no-items.loading:after
		background none

browserNoFiles('image', 'No image files available.')
browserNoFiles('audio', 'No audio files available.')
browserNoFiles('video', 'No video files available.')

.browser-nav
.browser-login
.browser.scroll-box .scrolling-container
	display none

.browser[authenticated='true']
	.browser-login
		display none
	.browser-intent-logout
		display block
	.browser-nav
	&>.scrolling-container
		display block
.browser[authenticated='false']
	.browser-login
		display block
	.browser-intent-logout
		display none
	&.no-items
		background white none
		&:after
			content none

.add-content-instr-link
	font 12px/14px 'ProximaNova-Semibold'
	color darkpurple
	text-decoration underline
	absolute bottom 18px left 50%
	margin-left -80px
	display none
	.no-items &
		display block
	&:hover
		color litepurple
	.browser-popup &
		bottom -40px
