.djacc-toolbar {
	background: #2F2F2F;
	color: #fff;
	border: 1px solid #353536;
	.djacc {
		&__list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		&__item {
			margin-top: -1px;
			margin-bottom: -1px;
			+ .djacc__item {
				margin-left: -1px;
			}
			&--label {
				padding-left: 16px;
				padding-right: 16px;
			}
		}
		&__item + .djacc__item--label {
			padding-left: 32px;
		}
		&__btn,
		&__reset {
			height: 40px;
			line-height: 40px;
			min-width: 40px;
			padding: 0 10px;
			background: #2F2F2F;
			color: inherit;
			border: 1px solid #353536;
			position: relative;
			&:hover {
				background: #2D79FF;
				border-color: #2D79FF;
				z-index: 1;
				.djacc__title {
					display: inline-block;
				}
			}
			&--active {
				background: #2D79FF;
				border-color: #2D79FF;
				&:hover {
					background: darken(#2D79FF, 2%);
				}
			}
		}
		&__arrows {
			display: flex;
			align-items: center;
			height: 40px;
			min-width: 40px;
			padding: 0 10px;
			color: inherit;
			background: #2F2F2F;
			border: 1px solid #353536;
			cursor: pointer;
			position: relative;
			&:hover {
				background: lighten(#2F2F2F, 2%);
				border-color: #2D79FF;
				z-index: 1;
				.djacc__title {
					display: inline-block;
				}
			}
		}
		&__title {
			display: none;
			position: absolute;
			top: 100%;
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			padding: 5px 10px;
			font-size: 12px;
			line-height: 1;
			background: #404042;
			color: #fff;
			border: 1px solid #707070;
			white-space: nowrap;
			margin: 10px 0 0;
			z-index: 2;
			&:before {
				content: '';
				position: absolute;
				top: -5px;
				left: 50%;
				margin-left: -5px;
				transform: rotate(-45deg);
				display: block;
				width: 10px;
				height: 10px;
				background: #404042;
				z-index: -1;
			}
		}
		&__inc,
		&__dec {
			background: transparent;
			padding: 0 10px;
			&:hover {
				svg {
					[fill^="#"] {
						fill: #2D79FF;
					}
					[stroke^="#"] {
						stroke: #2D79FF;
					}
				}
			}
		}
	}
	svg {
		[fill^="#"] {
			fill: #fff;
		}
		[stroke^="#"] {
			stroke: #fff;
		}
	}
	img {
		max-height: 40px;
	}
	//positions
	&.djacc--top-center,
	&.djacc--bottom-center {
		width: 100%;
	}
	
	&.djacc--center-left,
	&.djacc--center-right {
		display: flex;
		align-items: center;
		@media(max-height: 800px) {
			top: 0;
			transform: none;
			margin: 0;
		}
		.djacc__list {
			flex-direction: column;
			max-height: 100vh;
		}
		.djacc__item {
			width: 40px;
			margin-top: 0;
			margin-bottom: 0;
			margin-left: -1px;
			margin-right: -1px;
			+ .djacc__item {
				margin-top: -1px;
			}
		}
		.djacc__arrows {
			height: auto;
			flex-direction: column;
		}
		.djacc__item--label {
			display: none;
		}
		.djacc__inc,
		.djacc__dec {
			padding: 10px 0;
			&:hover {
				svg {
					[fill^="#"] {
						fill: #2D79FF;
					}
					[stroke^="#"] {
						stroke: #2D79FF;
					}
				}
			}
		}
	}
	&.djacc--bottom-left,
	&.djacc--bottom-center,
	&.djacc--bottom-right {
		.djacc__title {
			top: auto;
			bottom: 100%;
			margin: 0 0 10px;
			&:before {
				top: auto;
				bottom: -5px;
			}
		}
	}
	&.djacc--center-left {
		.djacc__title {
			top: 50%;
			left: 100%;
			right: auto;
			transform: translateY(-50%);
			margin: 0 0 0 10px;
			&:before {
				top: 50%;
				left: -5px;
				right: auto;
				margin: 0;
				margin-top: -5px;
			}
		}
	}
	&.djacc--center-right {
		.djacc__title {
			top: 50%;
			left: auto;
			right: 100%;
			transform: translateY(-50%);
			margin: 0 10px 0 0;
			&:before {
				top: 50%;
				left: auto;
				right: -5px;
				margin: 0;
				margin-top: -5px;
			}
		}
	}
}

//light theme
.djacc-toolbar.djacc--light {
	background: #F8F9FC;
	color: #404042;
	border: 1px solid #EBECF1;
	.djacc__btn,
	.djacc__reset {
		background: #F8F9FC;
		border: 1px solid #EBECF1;
		&:hover,
		&--active {
			background: #2D79FF;
			border-color: #2D79FF;
			color: #fff;
			svg {
				[fill^="#"] {
					fill: #fff;
				}
				[stroke^="#"] {
					stroke: #fff;
				}
			}
		}
	}
	.djacc__arrows {
		background: #F8F9FC;
		border: 1px solid #EBECF1;
		&:hover {
			background: lighten(#F8F9FC, 2%);
			border-color: #2D79FF;
		}
	}
	.djacc__inc,
	.djacc__dec {
		svg {
			[fill^="#"] {
				fill: #A1A1A2;
			}
			[stroke^="#"] {
				stroke: #A1A1A2;
			}
		}
		&:hover {
			svg {
				[fill^="#"] {
					fill: #2D79FF;
				}
				[stroke^="#"] {
					stroke: #2D79FF;
				}
			}
		}
	}
	svg {
		[fill^="#"] {
			fill: #404042;
		}
		[stroke^="#"] {
			stroke: #404042;
		}
	}
}