
	// Bar

	@scroller-bar-size:					16px; 		// 16px
	@scroller-bar-background:			#fff;		// #fff
	@scroller-bar-border-color:			#eee;		// #eee
	@scroller-bar-border-size:			1px;		// 1px

	// Track

	@scroller-track-background:			#fff;		// #fff

	// Handle

	@scroller-handle-size:				10px; 		// 10px
	@scroller-handle-background:		#ccc;		// #ccc
	@scroller-handle-border-color:		#fff;		// #fff
	@scroller-handle-border-radius:		5px;		// 5px
	@scroller-handle-border-size:		1px;		// 1px

	// Content

	@scroller-content-padding:			20px;		// 20px


	.fs-scrollbar {
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: hidden;
		position: relative;

		&,
		& * {
			user-select: none !important;
		}

		&,
		&-content,
		&-bar,
		&-track,
		&-handle {
			box-sizing: border-box;
		}

		// .scroller-content

		&-content {
			position: relative;
			z-index: 1;

			height: 100%;
			overflow: auto;
			overflow-x: hidden;
			overflow-y: auto;

			-webkit-overflow-scrolling: touch;

			// Webkit fix

			&::-webkit-scrollbar,
			&::-webkit-scrollbar-button,
			&::-webkit-scrollbar-track,
			&::-webkit-scrollbar-track-piece,
			&::-webkit-scrollbar-thumb,
			&::-webkit-scrollbar-corner,
			&::-webkit-resizer {
				background: transparent;
				opacity: 0;
			}
		}

		// .scroller-bar

		&-bar {
			width: @scroller-bar-size;
			height: 100%;

			position: absolute;
			right: 0;
			top: 0;
			z-index: 2;

			background: @scroller-bar-background;
			border: @scroller-bar-border-size solid @scroller-bar-border-color;
			border-width: 0 0 0 @scroller-bar-border-size;
			display: none;
		}

		// .scroller-track

		&-track {
			width: 100%;
			height: 100%;

			position: relative;

			background: @scroller-track-background;
			overflow: hidden;
		}

		// .scroller-handle

		@scroller-handle-position: ((@scroller-bar-size - @scroller-handle-size) / 2);

		&-handle {
			width: @scroller-handle-size;
			height: (@scroller-handle-size * 2);

			position: absolute;
			top: 0;
			right: @scroller-handle-position;
			z-index: 2;

			background: @scroller-handle-background;
			border: @scroller-handle-border-size solid @scroller-handle-border-color;
			border-radius: @scroller-handle-border-radius;
			cursor: pointer;
		}

		// Horizontal

		&-horizontal &-content {
			overflow: auto;
			overflow-x: auto;
			overflow-y: hidden;
			padding: 0 0 @scroller-bar-size 0;
		}

		&-horizontal &-bar {
			width: 100%;
			height: @scroller-bar-size;

			top: auto;
			bottom: 0;

			border-width: @scroller-bar-border-size 0 0 0;
		}

		&-horizontal &-handle {
			width: (@scroller-handle-size * 2);
			height: @scroller-handle-size;

			top: auto;
			right: auto;
			bottom: @scroller-handle-position;
		}

		// Active / Setup

		&-setup &-content,
		&-active &-content {
			padding: @scroller-content-padding;
		}

		&-setup &-bar,
		&-active &-bar {
			display: block;
		}
	}