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

/* reset */
a,
button {
  all: unset;
}

iframe {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: scroll;
	z-index: -9999;
	top: 0px;
	left: 0px;
	border: 0px;
	pointer-events: all!important;
}
.container {
	pointer-events: none!important;
}

.ToolbarBounds {
	position: fixed;
	top: 0px;
	left: 0px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 10px solid $color-primary;
	pointer-events: none;
	transform: scale(1.2);
	opacity: 0;
	transition: transform .25s cubic-bezier(.61,.11,.08,.96), opacity .25s ease-in-out;
}
.ToolbarBounds.ToolbarShake {
	transform: scale(1);
	opacity: .4;
}

.react-draggable {
	pointer-events: all;
}
.ToolbarShake 
.react-draggable {
	width: 100%;
	height: 100%;
}
.ToolbarElastic {
	transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.ToolbarShake .ToolbarRoot {
	animation: subtleshake .9s cubic-bezier(.36,.07,.19,.97) both;
	animation-iteration-count: infinite!important;
	background-color: white!important;
}
.ToolbarDragging .ToolbarRoot {
	transform: scale(1.02);

	&::after {
		filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.5));
	}
}

// Shake animation for the toolbar
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

// Subtle shake animation, smooth
@keyframes subtleshake {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, 1px) rotate(1deg);
	}
	20% {
		transform: translate(-1px, -1px) rotate(-1deg);
	}
	30% {
		transform: translate(1px, 0px) rotate(0deg);
	}
	40% {
		transform: translate(-1px, 1px) rotate(-1deg);
	}
	50% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	60% {
		transform: translate(-1px, 1px) rotate(-1deg);
	}
	70% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	80% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	90% {
		transform: translate(0px, -1px) rotate(-1deg);
	}
	100% {
		transform: translate(-1px, 1px) rotate(1deg);
	}
}

.ToolbarTransparent {
	opacity: 0;

	&:hover {
		opacity: 1;
	}
}

.ToolbarRoot {
  display: flex;
	align-items: center;
  padding-left: 10px;
	transition: opacity .25s cubic-bezier(.61,.11,.08,.96), transform .2s cubic-bezier(.61,.11,.08,.96);
	min-width: max-content;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	padding-right: 10px;
	height: 48px;
	position: absolute;
	bottom: 20px;
	left: 20px;
	border-radius: $container-border-radius;

	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: #FFF;
		z-index: -9999999;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: $container-border-radius;
		filter: drop-shadow(0px 4px 50px rgba(0, 0, 0, 0.3));
		transition: filter .2s ease-in-out;
	}
}

.ForceTransparent {
	opacity: 0!important;
}
.ToolbarRecordingControls {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F6F7FB;
	border-radius: $container-border-radius;
	font-family: $font-medium;
	height: calc(100% - 12px);
	padding-left: 2px;
	padding-right: 2px;
}
.ToolbarRecordingTime {
	margin-right: 4px;
	width: 42px;
	color: $color-text-primary;
	font-size: 13px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

}
.ToolbarToggleGroup {
	display: flex;
	align-items: center;
}
.ToolbarToggleWrap {
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.ToolbarToggleItem,
.ToolbarModeItem,
.ToolbarModeItemSingle,
.ToolbarLink,
.ToolbarButton {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
  height: 32px;
	width: 32px;
	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;
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed!important;
		background: none!important;

	}

	&.resume {
		svg {
			color: #F7387D!important;
		}
	}
}
.ToolbarToggleItem:hover,
.ToolbarModeItem:hover,
.ToolbarModeItemSingle:hover,
.ToolbarLink:hover,
.ToolbarButton:hover {
	cursor: pointer;
  background-color: rgba(124, 139, 165, 0.1)!important;
}
.ToolbarToggleItem:focus-visible,
.ToolbarModeItemSingle:focus-visible,
.ToolbarModeItem:focus-visible,
.ToolbarLink:focus-visible,
.ToolbarButton:focus-visible {
  position: relative;
  box-shadow: $focus-border;
}

.ToolbarModeItemSingle {
	display: flex;
  justify-content: center;
	align-items: center;
	z-index: 99999;
	position: relative;

	&:first-child {
		margin-left: 0;
	}
	&[data-state='on'] {
		background: rgba(120, 192, 114, 0.1);

		svg {
			color: #78C072;
		}

		&::before {
			transform: translateY(0px) scale(1)!important;
			opacity: 1!important;
		}
	}
}

.ToolbarModeItem {
	display: flex;
  justify-content: center;
	align-items: center;
	z-index: 99999;
	position: relative;

	&:first-child {
		margin-left: 0;
	}
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 50%;
		border-radius: 80px 80px 0% 0%;
	box-sizing: border-box;
		position: absolute;
		top: -16px;
		left: 0;
		z-index: -999999;
		transition: transform 0.25s cubic-bezier(.61,.11,.08,.96), opacity 0.25s ease-in-out;
		transform: translateY(5px) scale(0)!important;
		border-right: 3px solid white;
		border-top: 9px solid white;
		border-left: 3px solid white;
		background-color: transparent;
		opacity: 0;
	}
	&[data-state='on'] {
		background: rgba(56, 126, 247, 0.1);

		svg {
			color: $color-primary;
		}

		&::before {
			transform: translateY(0px) scale(1)!important;
			opacity: 1!important;
		}
	}
}


.ToolbarBottom .ToolbarModeItem {
	&::before {
		transform: translateY(-5px) scale(.5)!important;
		bottom: -16px;
		top: unset!important;
		border-bottom: 9px solid white!important;
		border-radius: 0% 0% 80px 80px!important;
		border-top: none!important
	}
	&[data-state='on'] {
		&::before {
			transform: translateY(0px) scale(1)!important;
		}
	}
}

.ToolbarToggleItem {
	display: flex;
  justify-content: center;
	align-items: center;
	z-index: 99999;
	position: relative;

	&:first-child {
		margin-left: 0;
	}
	&[data-state='on'] {
		background: $gradient-primary;
		color: #FFF;

		svg {
			color: #FFF;
		}

	}
}


.ToolbarSeparator {
  width: 1px;
	height: 19px;
  background-color: $color-border;
  margin: 0 8px;
}

.ToolbarLink {
  background-color: transparent;
  color: var(--mauve11);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ToolbarLink:hover {
  background-color: transparent;
  cursor: pointer;
}

.ToolbarPaused {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 10px solid #F7387D;
	pointer-events: none;
	opacity: .5;

	&.hidden {
		display: none;
	}
}

.OnboardingArrow {
	position: absolute;
	z-index: $z-index-max;
	width: max-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	left: -69px;
	bottom: 23px;
	transform: rotate(12deg);
	pointer-events: none!important;
}
.OnboardingText {
	font-size: 32px;
	color: $color-icon;
	font-family: 'Gloria-Hallelujah', sans-serif!important;
}
.ArrowShape {
	margin-left: -15px;
}