﻿/*!
 * MiniBar 0.5.0
 * http://mobius.ovh/
 *
 * Released under the MIT license
 */

.mb-content {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

	.mb-content::-webkit-scrollbar {
		display: none; /* for Chrome, Safari, and Opera */
	}

.mb-bar, .mb-track {
	border-radius: 5px;
	position: absolute
}

.mb-bar, .mb-button, .mb-buttons, .mb-track {
	position: absolute
}

.mb-container {
	overflow: hidden;
	height: 100%;
	width: 100%
}

	.mb-container:hover.mb-scroll-x > .mb-buttons-x, .mb-container:hover.mb-scroll-x > .mb-buttons-x > .mb-track-x, .mb-container:hover.mb-scroll-x > .mb-track-x, .mb-container:hover.mb-scroll-y > .mb-buttons-y, .mb-container:hover.mb-scroll-y > .mb-buttons-y > .mb-track-y, .mb-container:hover.mb-scroll-y > .mb-track-y, .mb-visible.mb-scroll-x > .mb-buttons-x, .mb-visible.mb-scroll-x > .mb-buttons-x > .mb-track-x, .mb-visible.mb-scroll-x > .mb-track-x, .mb-visible.mb-scroll-y > .mb-buttons-y, .mb-visible.mb-scroll-y > .mb-buttons-y > .mb-track-y, .mb-visible.mb-scroll-y > .mb-track-y {
		opacity: 1
	}

.mb-content {
	overflow: auto;
	height: 100%;
	width: auto;
	box-sizing: content-box;
	margin-left: -5px;
	padding-left: 7px;
	margin-right: -5px !important;
	padding-right: 9px !important;
}

.mb-track {
	-webkit-transition: opacity 250ms;
	transition: opacity 250ms
}

.mb-bar {
	background-color: rgba(0,0,0,.2);
	z-index: 10;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}

.mb-track-x {
	left: 5px;
	bottom: 5px;
	width: calc(100% - 10px);
	height: 10px;
	opacity: 0
}

.mb-buttons-y .mb-increase, .mb-track-y .mb-increase {
	bottom: 0
}

.mb-track-x .mb-bar {
	left: 0;
	top: 0;
	height: 100%;
	min-width: 10px
}

.mb-track-y {
	left: 0px;
	top: 5px;
	height: calc(100% - 10px);
	width: 5px;
	opacity: 0
}

.mb-buttons-x .mb-increase, .mb-buttons-y, .mb-track-x .mb-increase {
	left: 0
}

.mb-track-y .mb-bar {
	right: 0;
	top: 0;
	width: 100%;
	min-height: 10px
}

.mb-progress {
	overflow: hidden
}

	.mb-progress .mb-bar {
		min-height: 0
	}

.mb-buttons-x {
	height: 16px;
	width: 100%;
	bottom: 0;
	left: 0;
	opacity: 0
}

	.mb-buttons-x .mb-decrease {
		left: 0
	}

		.mb-buttons-x .mb-decrease::before {
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg)
		}

	.mb-buttons-x .mb-increase::before {
		left: -1px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

.mb-buttons-y {
	width: 16px;
	height: 100%;
	top: 0;
	opacity: 0
}

	.mb-buttons-y .mb-decrease {
		top: 0
	}

	.mb-buttons-y .mb-increase::before {
		top: 5px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg)
	}

.mb-nav .mb-bar {
	border-radius: 0;
	background-color: #969696
}

	.mb-nav .mb-bar:hover {
		background-color: #a3a3a3
	}

.mb-nav .mb-track {
	border-radius: 0;
	background-color: #d6d6d6
}

.mb-nav .mb-track-x {
	left: 16px;
	height: 16px;
	width: calc(100% - 32px)
}

.mb-nav .mb-track-y {
	top: 16px;
	width: 16px;
	height: calc(100% - 32px)
}

.mb-button {
	border: none;
	width: 16px;
	height: 16px;
	padding: 0;
	background-color: #969696;
	cursor: pointer
}

	.mb-button:hover {
		background-color: #a3a3a3
	}

	.mb-button::before {
		border-style: solid;
		border-width: 2px 2px 0 0;
		border-color: #fff;
		content: "";
		display: inline-block;
		height: 3px;
		width: 3px;
		left: 0;
		top: 6px;
		position: relative;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		vertical-align: top
	}

.mb-track-x .mb-decrease {
	left: 0
}

.mb-track-y .mb-decrease {
	top: 0
}

.mb-scroll-x .mb-buttons-y {
	height: calc(100% - 16px)
}

	.mb-scroll-x .mb-buttons-y::before {
		position: absolute;
		left: 0;
		bottom: -16px;
		width: 100%;
		height: 100%;
		content: "";
		background-color: #fff;
		z-index: 0
	}

.mb-scroll-y .mb-buttons-x {
	width: calc(100% - 16px)
}

.mb-wrapper {
	width: 100%;
	height: 100%;
	padding: 10px 0 10px 10px;
	box-sizing: border-box;
	background-color: #2E222D
}

.mb-textarea .mb-content {
	border: none;
	width: 100%;
	height: 100%;
	margin: 0
}

.mb-textarea .mb-track-x {
	display: none
}
