/* Button Icon for SureForms — Frontend Styles */

/* The icon is injected inside .srfm-submit-wrap which lives inside the button. */
.srfm-submit-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Icon wrapper */
.bifs-icon-wrap {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

/* Right-positioned icon */
.bifs-icon-wrap.bifs-icon--right {
	order: 1;
}

/* Standard image icon */
.bifs-icon-wrap img.bifs-icon {
	display: inline-block;
	width: var(--bifs-icon-size, 16px);
	height: var(--bifs-icon-size, 16px);
	object-fit: contain;
	flex-shrink: 0;
}

/* Colorized icon using mask-image */
.bifs-icon-wrap .bifs-icon--colorized {
	display: inline-block;
	width: var(--bifs-icon-size, 16px);
	height: var(--bifs-icon-size, 16px);
	background-color: var(--bifs-icon-color, currentColor);
	-webkit-mask-image: var(--bifs-icon-url);
	mask-image: var(--bifs-icon-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	flex-shrink: 0;
}


/* ============================================
   Input Field Icons
   ============================================ */

/* Wrapper sits around just the input element so the icon centers on the input, not the label area.
   Inherits the input's top margin so spacing is preserved, then zeroes it on the input itself. */
.bifs-field-icon-wrapper {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}

/* Move the input's margin to the wrapper so the icon doesn't see extra space above */
.bifs-field-icon-wrapper .srfm-input-common,
.bifs-field-icon-wrapper .srfm-dropdown-common {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Field icon — absolutely positioned inside the wrapper, centered on the input */
.bifs-field-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	pointer-events: none;
	z-index: 1;
	color: var(--srfm-color-input-placeholder, #9ca3af);
}

/* Field icon image */
.bifs-field-icon img {
	display: block;
	width: var(--bifs-field-icon-size, 1.125em);
	height: var(--bifs-field-icon-size, 1.125em);
	object-fit: contain;
	opacity: 0.6;
}

/* Colorized field icon */
.bifs-field-icon .bifs-field-icon--colorized {
	display: block;
	width: var(--bifs-field-icon-size, 1.125em);
	height: var(--bifs-field-icon-size, 1.125em);
	background-color: var(--bifs-field-icon-color, var(--srfm-color-input-placeholder, #9ca3af));
	-webkit-mask-image: var(--bifs-field-icon-url);
	mask-image: var(--bifs-field-icon-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Push input text right to make room for the icon */
.bifs-field-icon-wrapper .srfm-input-common,
.bifs-field-icon-wrapper .srfm-dropdown-common {
	padding-left: 2.75em !important;
	flex: 1;
	min-width: 0;
}

/* Textarea — icon sits at top-left instead of vertically centered */
.bifs-field-icon-wrapper.bifs-field-icon--textarea .bifs-field-icon {
	top: 0.75em;
	transform: none;
}

/* Dropdown — TomSelect replaces the native <select> with a custom UI */
.bifs-field-icon-wrapper .srfm-dropdown-common-wrap {
	flex: 1;
	min-width: 0;
}

.bifs-field-icon-wrapper .srfm-dropdown-common-wrap .ts-control {
	padding-left: 2.75em !important;
}