simple-phone-mask/src/simple-phone-mask.css

A lightweight and customizable phone number input mask with country flags and selection.

.spm-wrapper {
	position: relative;
	display: inline-block;
}

.spm-input {
	padding-left: 35px;
}

.spm-flag-button {
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}

.spm-flag-button--selectable {
	cursor: pointer;
}

.spm-flag-button--non-selectable {
	cursor: default;
}

.spm-flag-image {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
}

.spm-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	background-color: #fff;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow-y: auto;
	width: 250px;
}

.spm-dropdown-option {
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.spm-dropdown-option:hover {
	background-color: #f0f0f0;
}

.spm-country-name {
	flex-grow: 1;
}

.spm-country-code {
	color: #666;
	margin-left: auto;
}