/* 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
   ============================================ */

/* The wrapper becomes a flex container to position the icon inline with the input */
.srfm-block-wrap.bifs-has-field-icon {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* Field icon — positioned inside the input area on the left */
.bifs-field-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	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: 1.125em;
	height: 1.125em;
	object-fit: contain;
	opacity: 0.6;
}

/* Colorized field icon */
.bifs-field-icon .bifs-field-icon--colorized {
	display: block;
	width: 1.125em;
	height: 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-has-field-icon .srfm-input-common {
	padding-left: 2.75em !important;
}

/* Also handle select/dropdown inputs */
.bifs-has-field-icon select.srfm-input-common {
	padding-left: 2.75em !important;
}

/* Textarea — icon sits at top-left */
.bifs-has-field-icon .bifs-field-icon--textarea {
	align-items: flex-start;
	padding-top: 0.75em;
}