@import url('../../../interfaces/assets/css/simulator-modules.css');
@import url('../../../interfaces/assets/css/simulator-robot.css');

#experience-3d-container{
	position: relative;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.experience3D {
	background: linear-gradient(180deg, #2828c0 0%, #5e5e5e 100%);
	display: flex;
	justify-content: center;
	margin-top: 1.5em;
}

#gizmo-button {
	position: absolute;
	top: 1.75em;
    right: 0.25em;
	z-index: 100;
	color: red;
}

#gizmo-button.active-gizmo {
	color: green;
}

.graph-btn-disabled {
	background-color: #e6e6e6 !important;
	border-color: var(--simulator-button-background-color-hover) !important;
}

.stm32-led {
	z-index: 1;
	bottom: 12px;
	left: -6px;
	opacity: 0;
}

.alphabot-motorLeft,
.alphabot-motorRight,
.donutbot-motorLeft,
.donutbot-motorRight {
	z-index: 1;
	top: -1px;
	left: 2px;
}

.alphabot-motorLeft_base,
.donutbot-motorLeft_base {
	z-index: 2;
	opacity: 0.9;
}

.alphabot-motorLeft_base,
.alphabot-motorRight_base,
.donutbot-motorLeft_base,
.donutbot-motorRight_base {
	bottom: 0px;
	left: 16px;
}

#alphabot-trsensor1_base,
#alphabot-trsensor2_base,
#alphabot-trsensor3_base,
#alphabot-trsensor4_base,
#alphabot-trsensor5_base {
	left: 29px;
	width: 17px;
}

#alphabot-trsensor1,
#alphabot-trsensor2,
#alphabot-trsensor3,
#alphabot-trsensor4,
#alphabot-trsensor5 {
	z-index: 1;
	top: -24px;
	left: 20px;
}

.alphabot-trsensor1_module .module-value,
.alphabot-trsensor2_module .module-value,
.alphabot-trsensor3_module .module-value,
.alphabot-trsensor4_module .module-value,
.alphabot-trsensor5_module .module-value {
	width: 83px;
}

#alphabot-trsensor1_anim,
#alphabot-trsensor2_anim,
#alphabot-trsensor3_anim,
#alphabot-trsensor4_anim,
#alphabot-trsensor5_anim {
	bottom: 16px;
}

.alphabot-trsensor1_module .module-value,
.alphabot-trsensor2_module .module-value,
.alphabot-trsensor3_module .module-value,
.alphabot-trsensor4_module .module-value,
.alphabot-trsensor5_module .module-value {
	width: 83px;
}

#alphabot-trsensor1_anim,
#alphabot-trsensor2_anim,
#alphabot-trsensor3_anim,
#alphabot-trsensor4_anim,
#alphabot-trsensor5_anim {
	bottom: 16px;
}

/* Specific */

.bmp280-temp {
	clip-path: inset(76.4706% 0px 0px);
}

.highTemp,
.groveTemp {
	clip-path: inset(52% 0px 0px);
}

.sgp30_module .module-img-group {
	left: 10px;
	bottom: 6px;
}


.obstacle-toolbar {
	position: fixed;
	display: none;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	background: var(--vitta-green);
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	z-index: 10000;
	pointer-events: auto;
	transform: translateX(-50%);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.obstacle-toolbar.visible {
	display: flex;
}
.obstacle-toolbar-btn {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	display: flex;
	color: #fff;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.obstacle-toolbar-btn svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}
.obstacle-toolbar-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}
.obstacle-toolbar-btn[data-action='delete']:hover {
	background: rgba(220, 53, 69, 0.8);
}
.obstacle-toolbar-btn[data-action='close']:hover {
	background: rgba(108, 117, 125, 0.8);
}
.obstacle-toolbar-separator {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.2);
	margin: 0 4px;
}
.obstacle-toolbar-hint {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 4px;
	white-space: nowrap;
}