@use '../../../styles/_variables' as *;

.camera-toolbar {
	display: flex;
	align-items: center;
  padding-left: 4px;
	padding-right: 4px;
	transition: opacity .25s cubic-bezier(.61,.11,.08,.96);
	min-width: max-content;
	background-color: rgba(30, 30, 30, .8);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	height: 28px;
	position: absolute;
	left: 10px;
	top: 10px;
	border-radius: $container-border-radius;
	backdrop-filter: blur(10px);
	z-index: $z-index-max;
	opacity: 0;
	border: 3px solid rgba(255, 255, 255, .2);
}
.camera-draggable:hover {
	.camera-toolbar, .camera-resize {
		opacity: 1!important;
	}
}
.camera-toolbar:hover, .camera-resize:hover {
	opacity: 1!important;
}

.CameraToolbarSeparator {
  width: 1px;
	height: 18px;
  background-color: rgba(255, 255, 255, .3);
  margin: 0 4px;
}
.CameraToggleItem, .CameraToolbarButton {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
  height: 22px;
	width: 22px;
	text-align: center;
  font-size: 13px;
  line-height: 1;
	border-radius: 50%;
	transition: background-color .25s ease-in-out;
	background-color: rgba(124, 139, 165, 0);

	svg {
		color: $color-icon;
	}

	&:hover {
		background-color: rgba(124, 139, 165, 0.2)!important;
		cursor: pointer;
	}

	&:disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	&[data-state='on'] {
		color: #FFF;

		svg {
			color: #FFF;
		}

	}
}


.CameraToggleItem:hover, .CameraToggleButton:hover {
	cursor: pointer;
}
.CameraToggleItem:focus-visible, .CameraToggleButton:focus-visible {
  position: relative;
  box-shadow: $focus-border;
}

.CameraToggleGroup {
	display: flex;
	align-items: center;
	justify-content: center;
}

.CameraToggleGroup, .CameraToolbarSeparator {
	display: none;
}