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

body {
	background-color: white!important;
}
.DrawingToolbar.show-toolbar {
	opacity: 1!important;
	pointer-events: all!important;
	transform: scale(1) translate(calc(-50% + 16px), 0px)!important;
}
.ToolbarBottom .DrawingToolbar {
	transform-origin: 0 -100%!important;
}

.DrawingToolbar {
	opacity: 0;
	pointer-events: none;
	align-items: center;
	display: flex;
  min-width: max-content;
	padding-left: 10px;
	padding-right: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--blackA7);
	position: absolute;
	height: 44px;
	left: 0px;
	transform: translate(calc(-50% + 16px));
	transform-origin: 0 100%;
	border-radius: 15px;
	z-index: 99999999;
	transition: transform 0.25s cubic-bezier(.61,.11,.08,.96), opacity 0.25s cubic-bezier(.61,.11,.08,.96);
	transform: scale(0.5) translate(calc(-50% + 16px), 10px);

	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		filter: blur(10px);
		opacity: .15;
		background-color: #000;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -999999999999999!important;
	}
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(242, 241, 242, 0.85);
		backdrop-filter: blur(5px);
		background-clip: content-box;
		-webkit-mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);
		mask-image: radial-gradient(circle at 50% 59px, transparent 20px, #000 20px);
		background-position: center bottom 50px;
		border-radius: 15px;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: -2;
	}
	.ToolbarSeparator {
		background-color: #dddcdc;
	}
}

.ToolbarTop .DrawingToolbar {
	bottom: 49px!important;
}
.ToolbarBottom .DrawingToolbar {
	top: 48px!important;

	&::before {
		-webkit-mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px)!important;
		mask-image: radial-gradient(circle at 50% -14px, transparent 20px, #000 20px);
		background-position: center bottom 50px!important;
	}
}

.ColorPicker {
	width: 14px;
	height: 14px;
	background: #ED6C3A;
	border: 1.5px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
}