$border_color_activated: rgba(255, 255, 255, .75);
$background_activated: rgba(0,0,0,0.25);
$background:lightgray;

.control_bar {
	display: flex;
	flex-direction: row;

	.divider {
		border-left:2px solid gray;
		height: auto;
		margin-left: 5px;
		margin-right: 5px
	}

	.button {
		cursor: pointer;
		background-color: lightgray;
		border-radius: 5px;
		align-items: center;
		border: 2px solid rgba(0, 0, 0, 0);
		height: 36px;
		width: 36px;
		margin-right: 5px;
		margin-left: 5px;

		&:hover {
			background-color: rgba(0,0,0,0.4);
			border-color: rgba(255, 255, 255, .75);
			/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
		}

		&.activated {
			background-color: rgba(0,0,0,0.25);
			border-color: rgba(255, 255, 255, .75);

			&:hover {
				background-color: rgba(0,0,0,0.4);
				border-color: rgba(255, 255, 255, .75);
			}
		}
	}

	.button-dropdown {
		.buttons {
			display: grid;
			grid-template-columns: auto auto;
			grid-template-rows: 100%;
			grid-gap: 2px;

			.button {
				margin-right: 0px;
			}

			.button-dropdown {
				display: inline-flex;
				justify-content: space-around;
				width: 18px;
				cursor: pointer;

				border-radius: 0 5px 5px 0;
				align-items: center;
				border: 2px solid rgba(0, 0, 0, 0);
				border-left: 0;

				.arrow {
					border: solid black;
					border-width: 0 3px 3px 0;
					display: inline-block;
					padding: 3px;
					transform: rotate(45deg);
					-webkit-transform: rotate(45deg);

					vertical-align: text-bottom;
				}
			}

			&:hover {
				.button {
					border-right: 1px;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;

					background-color: rgba(0,0,0,0.4);
					border-color: rgba(255, 255, 255, .75);
					/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
				}

				.button-dropdown {
					background-color: rgba(0,0,0,0.4);
					border-color: rgba(255, 255, 255, .75);
					/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
				}
			}
		}


		.dropdown {
			display: none;
			position: absolute;
			margin-left: 5px;

			background-color: $background;
			border-radius: 5px;
			align-items: center;
			border: 2px solid rgba(0, 0, 0, 0);

			border-color: $border_color_activated;
			width: 230px;

			user-select: none;

			z-index: 1000;
			/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
			.icon {
				vertical-align: middle;
				margin-right: 5px;
			}

			& > div {
				display: block;
				cursor: pointer;
				padding: 1px 2px 1px 4px;

				&:hover {
					background-color: $background_activated;
				}
			}

			& > div:first-of-type {
				border-radius: 2px 2px 0 0;
			}

			& > div:last-of-type {
				border-radius: 0 0 2px 2px;
			}
		}

		&:hover {
			.dropdown.displayed {
				display: block;
			}
		}
	}
}