/*! blogvio_editor/scrollable.styl */

.scrolling-container
	position relative
	width 100%
	height 100%
	overflow hidden

	& > .scroll-content
		absolute top left
		overflow scroll
		overflow-x hidden
		right 0
		bottom 0

	& > .scroll-content:focus
		outline 0 none

	& > .scroll-content::-webkit-scrollbar
		visibility hidden

	& > .scroll-pane
		background-color transparent
		absolute right top
		width 8px
		bottom 0
		opacity 0
		transition .2s
		margin 0 5px
		cursor pointer
		text-align center
		&:before
			content ""
			display inline-block
			height 100%
			width 14px
			absolute top left -3px

	& > .scroll-pane > .nano-slider
		background mediumgray
		position relative
		margin 0
		cursor pointer
		width 2px
		display inline-block
		transition background .2s, width .2s
	& > .scroll-pane.active > .nano-slider
	& > .scroll-pane > .nano-slider:hover
			background darkgray

	.nano-slider
		background #111

.scrolling-container:hover > .scroll-pane, .scroll-pane.active, .scroll-pane.flashed
	opacity 1

.scroll-pane:hover, .scroll-pane.active
	background-color #f5f5f5
	.nano-slider
		width 8px

.has-scrollbar > .scroll-content::-webkit-scrollbar
	visibility visible

.scroll-box
	.browser&
		padding 25px 0 0 20px
		box-sizing border-box
		.blogvio-browser&
			padding-left 0
		.scroll-pane
			top 20px
			bottom 20px
			right 2px
		&.directinput
			padding 0
			padding-left 20px
			.scroll-content
				padding 20px 0 0 2px
	.controls&
		padding-left 20px
		.scroll-content
			padding-left 2px
		.scroll-pane
			top 20px
			bottom 20px
	.presets-list&
		padding 20px 0
		.scroll-pane
			right auto
			left 0
	.editor-content&
		padding 0
		.scroll-content
			padding 0 20px 20px 20px
			padding-left 0
			right -15px
		.scroll-pane
			right 3px
			top 0
			bottom 20px
