@use "../../reset";

.hulk_affef_barcode_wrap {
	max-width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	position: relative;

	.hulk-barcode-input-wrap {
		position: relative;
		width: 100%;
	}

	.elementor-field-textual {
		padding-right: 50px;
	}

	.hulk-icon {
		@extend %element-reset;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2px;
		cursor: pointer;
		user-select: none;
		border-radius: 2px;

		&:focus-visible {
			outline: 1px solid;
		}

		svg {
			fill: currentColor;
			height: 28px;
			width: 28px;
		}
	}

	.hulk-spinner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.components-spinner {
		color: inherit;
		margin: 0 !important;
	}
}

.hulk-ffef-barcode-field-model {
	height: 100%;
	background-color: #000000;

	.hulk-video {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		pointer-events: none;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	.hulk-overlay {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(30, 30, 30, 0.25);
		aspect-ratio: 1 / 1;
		width: calc(100% - 100px);
		height: calc(100% - 100px);
		margin: auto;
		border-radius: 8px;
		overflow: hidden;
		pointer-events: none;
		box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 999em rgba(0, 0, 0, 0.5);
	}

	.hulk-laser {
		width: 100%;
		background-color: rgb(255, 164, 164);
		position: absolute;
		top: 50%;
		z-index: 2;
		height: 3px;
		border-top: 1px solid rgb(255, 104, 104);
		border-bottom: 1px solid rgb(255, 104, 104);
		animation: scanning 4s infinite ease-in-out;

		@keyframes scanning {
			0% {
				top: 2px;
				box-shadow: 0 0 0 0 rgb(255, 104, 104, 0);
			}
			1%,
			45% {
				box-shadow: 0 -0.25rem 0.5rem 0.25rem rgb(255, 104, 104, 0.5);
			}
			48% {
				top: calc(100% - 2px);
			}
			50% {
				top: calc(100% - 2px);
				box-shadow: 0 0 0 0 rgb(255, 104, 104, 0);
			}
			51%,
			95% {
				box-shadow: 0 0.25rem 0.5rem 0.25rem rgb(255, 104, 104, 0.5);
			}
			98% {
				top: 2px;
			}
			100% {
				top: 2px;
				box-shadow: 0 0 0 0 rgb(255, 104, 104, 0);
			}
		}
	}

	.hulk-decorators {
		.absolute {
			border-width: 0;
			border-style: solid;
			border-color: #e5e7eb;
		}
	}

	.hulk-close {
		position: absolute;
		top: 0;
		right: 0;
		height: 30px;
		width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 20;
		margin: 10px;
		border-radius: 6px;
		border: none;
		box-shadow: none;
		padding: 0;
	}
}