::-webkit-scrollbar
	width: 5px
	height: 5px

::-webkit-scrollbar-track
	background-color: transparent

::-webkit-scrollbar-thumb
	background-color: darken($color-background, 40%)

::placeholder
	color: $color-text-dark-hint

$splitter-width: 5px

// Main Containers
#app-main
	display: flex
	align-items: stretch
	position: relative
	height: 100%

	+media-xs
		display: block
		height: auto

	.flyout.notifications
		left: $sidebar-width + 5
		top: initial
		bottom: 40px
		box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)

#col_sidebar
	position: relative
	width: $sidebar-width
	min-width: $sidebar-width

	nav.sidebar
		background-color: $color-background-nav


#col_left, #col_main, #col_right
	position: relative
	flex: 0 0 auto
	min-width: 150px
	height: 100%
	min-height: 100%
	position: relative

	+media-xs
		height: auto
		min-height: auto
		margin: 0 auto
		padding-left: $sidebar-width !important

#col_main
	background-color: $color-background
	width: 50% // gets overriden by JS, dragging the col-splitter
	+media-xs
		width: 100%

#col_right
	z-index: 1
	flex: 1 1 auto
	background-color: $color-background-light

.col-splitter
	flex: 0 0 auto
	width: $splitter-width
	background-color: $color-background
	border-left: thin solid $color-background-light
	min-height: 200px
	cursor: col-resize
	top: 0
	bottom: 0
	z-index: 1

	+media-xs
		display: none
		visibility: hidden

.col_header
	position: relative
	z-index: 1
	display: flex
	align-items: center
	width: 100%
	min-height: 40px
	background-color: white
	padding: 10px
	font-size: 1.1em
	border-bottom: thin solid $color-background
	box-shadow: 0 0 15px rgba(black, .2)

	&.scrolled
		box-shadow: 0 -2px 20px rgba(black, .2)

	.header_text::first-letter
		text-transform: capitalize

.col-list-item
	display: flex
	align-items: center
	width: 100%
	background-color: white
	border-bottom: thin solid $color-background

	&:hover
		background-color: $color-background-light

	&.active
		background-color: $color-background-active
		border-bottom-color: darken($color-background-active, 5%)
		box-shadow: inset -5px 0 0 darken($color-background-active, 10%), inset 0 1px darken($color-background-active, 5%)
		&:hover
			background-color: lighten($color-background-active, 2%)

	&.empty
		padding: 15px
		justify-content: center
		span
			cursor: default
			text-align: center
			color: $color-text-dark-secondary
			i
				margin-right: 5px
				display: inline-block
				transform-origin: 50% 60%

		&:hover span i
			+animation-wiggle

/* Status Bar */
#status-bar
	color: $color-text-dark-secondary
	margin-left: auto
	text-align: right

/* Sidebar Navigation */
nav.sidebar
	position: fixed
	z-index: 1
	left: 0
	width: $sidebar-width
	height: 100%
	display: flex
	flex-direction: column

	> ul > li > .navbar-item
		padding-top: 10px
		padding-bottom: 10px
		background: red

	.dropdown
		min-width: $sidebar-width

		.dropdown-menu
			top: initial
			bottom: 3px
			left: $sidebar-width
			box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
			min-width: 250px

			li a
				justify-content: flex-start

	> ul
		width: 100%
		margin: 0
		padding: 0

		&.bottom
			margin-top: auto

		li
			display: block

			a.navbar-item, button
				display: flex
				align-items: center
				justify-content: center
				background: transparent
				border: none
				width: 100%

			a.dropdown-toggle
				padding: 0
				margin: 0
				width: $sidebar-width
				max-width: $sidebar-width

			.special
				top: 8px
				left: 27px

			#notifications-toggle
				&.active .flyout-hat
					display: none
				#notifications-count
					right: 5px
					span
						top: 1px

/* Tables */
.table
	display: table
	width: 100%
	position: relative
	margin-bottom: initial // overrides BS

.table-row
	display: table-row
	position: relative
	background-attachment: fixed // for stripes to look nice

.table-head
	display: table-header-group

	.table-cell
		font-size: .9em
		color: $color-text-dark-secondary

.table-body
	display: table-row-group

	.table-row
		&.active
			background-color: $color-background-active
			&:hover
				background-color: lighten($color-background-active, 2%)

			.table-cell
				border-bottom-color: darken($color-background-active, 5%)
				box-shadow: inset 0 1px darken($color-background-active, 5%), inset 0 -1px darken($color-background-active, 5%)
			.table-cell:last-child
				box-shadow: inset -5px 0 0 darken($color-background-active, 10%), inset 0 1px darken($color-background-active, 5%),inset 0 -1px darken($color-background-active, 5%)

.table-cell
	display: table-cell
	border-bottom: thin solid $color-background
	vertical-align: middle

	span.hint
		color: $color-text-dark-hint

.table-cell-spacer
	background-color: $color-background-light
	width: 6px
	min-width: 4px
	height: 100%
	display: table-cell
	border: none
	border-left: 2px solid $color-background-light
	border-right: 2px solid $color-background
	cursor: e-resize

.table.table-hover
	.table-row:hover
		background-color: $color-background-light


/* Generic Statuses */
.processing
	+stripes(rgba(black, .1), rgba(white, .1), -45deg, 25px)
	+stripes-animate
	animation-duration: 2s

.flash-on
	background-color: lighten($color-success, 40%) !important
	border-color: lighten($color-success, 40%) !important
	color: darken($color-success, 10%) !important
	text-shadow: 1px 1px 0 white
	transition: all .1s ease-in
	img
		transition: all .1s ease-in
		opacity: .8

	&:before
		background-color: lighten($color-success, 40%) !important

.flash-off
	transition: all 1s ease-out
	img
		transition: all 1s ease-out

.btn:active
	box-shadow: none

.bg-status
	@include status-color-property(background-color, '', 'dark')

.fg-status
	@include status-color-property(color, '', 'dark')


/* Modal Bootstrap overrides */
.modal-dialog
	margin-top: 0
.modal-content
	border: none
	box-shadow: 0 0 25px rgba(black, .25)
	background-color: $color-background-light

	.modal-header
		background-color: white
		padding: 10px 10px 10px 15px

		.title
			font-size: 1.2em

		.close
			float: right
			background: transparent
			border: none
			color: $color-text-dark-hint

			&:hover
				color: $color-primary

.modal-backdrop
	background-color: transparent

.modal-help-panel
	overflow: hidden
	border-radius: 3px
	width: 30%
	background-color: white
	box-shadow: 1px 2px 10px rgba(black, .1)

	.title
		display: block
		padding: 10px
		color: $color-text-dark-primary

.collapsing
	transition: all 150ms ease-in-out
	opacity: 0

.collapse
	transition: all 250ms ease-in-out
	&.in
		opacity: 1

/* Activities Stream */
/* General style for activities in all places */
.d-activity
	font-size: .9em
	ul
		cursor: default
		padding: 5px
		color: $color-text-dark-primary
		list-style: none

		li
			padding: 0 10px 7px 15px
			position: relative

			span.date
				color: darken($activity-highlight-color, 7%)

			/* Left Dot */
			&:after
				content: ''
				display: block
				position: absolute
				top: 0
				z-index: 0
				left: -5px
				width: 18px
				height: 18px
				border-radius: 50%
				background-color: $activity-highlight-color

			/* Left Line */
			&:before
				content: ''
				display: block
				position: absolute
				top: 10px
				left: 3px
				width: 1px
				height: 100%
				background-color: $activity-highlight-color

			&:last-child
				&:before
					background-color: transparent

		span.actor
			padding: 0 5px
			font-weight: bold

		img.actor-avatar
			width: 16px
			height: 16px
			border-radius: 50%
			margin-right: -15px
			position: relative
			top: -1px
			left: -19px
			z-index: 1

$loader-bar-width: 100px
$loader-bar-height: 2px
.loader-bar
	background-color: $color-background
	bottom: 0
	content: ''
	display: none
	height: 0
	overflow: hidden
	position: absolute
	visibility: hidden
	width: 100%

	&:before
		animation: none
		background-color: $primary
		content: ''
		display: block
		height: $loader-bar-height
		left: -$loader-bar-width
		position: absolute
		width: $loader-bar-width

	&.active
		display: block
		visibility: visible

		&:before
			animation: loader-bar-slide 2.5s linear infinite

@keyframes loader-bar-slide
	from
		left: -$loader-bar-width
		width: 0%

	50%
		width: 30%

	70%
		width: 70%

	80%
		left: 50%

	95%
		left: 120%

	to
		left: 100%