@import url("/assets/intl-tel-input/29.5.5/css/intlTelInput.min.css") layer(components);

@layer custom {
	.iti {
		--iti-border-color: var(--bs-border-color);
		--iti-hover-color: var(--bs-bg-1);
		--iti-country-selector-bg: var(--bs-bg-body);
		--iti-icon-color: var(--bs-fg-2);
		--iti-spacer-horizontal: var(--bs-spacer-3);
		display: block;
	}

	.iti__selected-country {
		border-start-start-radius: var(--bs-radius-5);
		border-end-start-radius: var(--bs-radius-5);
	}

	.iti__country-selector {
		color: var(--bs-fg-body);
		border-radius: var(--bs-radius-5);
	}

	.iti--inline-country-selector .iti__country-selector {
		box-shadow: var(--bs-box-shadow);
	}

	.iti__search-input {
		color: var(--bs-fg-body);
		background-color: var(--bs-bg-body);
	}

	.iti__country.iti__highlight {
		background-color: var(--bs-bg-1);
	}

	.iti__dial-code {
		color: var(--bs-fg-2);
	}

	.iti--fullscreen-popup.iti--detached-country-selector {
		background-color: light-dark(#00000080, #000000a6);
	}
}