// Input

.input-default {
	$self: &;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: $color-black-500;
	background-color: #fffefe;
	border-radius: 4px;
	border: 1px solid $color-black-200;
	box-sizing: border-box;
	transition: border-color 0.3s ease;

	&::placeholder {
		font-size: 13px;
		font-weight: 300;
		letter-spacing: 0.02em;
		color: rgba($color-black-500, 0.72);
	}

	&--with-icon {
		padding-right: calc(16px + 16px + 8px);
		background-size: 16px 16px;
		background-repeat: no-repeat;
		background-position: right 16px center;
	}

	&--with-icon-search {
		background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629V10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z' fill='%23EEE5DC'/%3E%3C/svg%3E%0A");
	}

	&--error {
		border-color: $color-rose-400;
	}

	&:focus {
		border-color: $color-orange-400;
	}

	&:disabled {
		border-color: #e6e6e6;
		background-color: #f5f5f5;

		&::placeholder {
			color: rgba($color-black-500, 0.32);
		}

		&#{ $self }--with-icon-search {
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629V10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z' fill='%23E6E6E6'/%3E%3C/svg%3E%0A");
		}
	}
}

// Select

.select-wrapper {
	position: relative;

	input[type='hidden']:disabled ~ .select-default {
		border-color: #e6e6e6;
		background-color: #f5f5f5;
		pointer-events: none;
	}
}

.select-default {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 4px;
	background-color: #fffefe;
	background-size: 10px 5px;
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23211E1C'/%3E%3C/svg%3E");
	border: 1px solid $color-black-200;
	text-align: left;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: $color-black-500;
	box-sizing: border-box;

	span {
		padding-right: calc(10px + 8px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 300;
		font-size: 13px;
		line-height: 17px;
		letter-spacing: 0.02em;
		color: rgba($color-black-500, 0.72);
	}

	&.open {
		border-color: $color-orange-400;
	}

	&--with-icon {
		padding-left: calc(16px + 16px + 8px);
		background-size:
			10px 5px,
			16px 16px;
		background-position:
			right 16px center,
			left 16px center;
	}

	&--with-icon-glob {
		background-image:
			url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23211E1C'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM1.6 8C1.6 7.512 1.664 7.032 1.768 6.576L5.592 10.4V11.2C5.592 12.08 6.312 12.8 7.192 12.8V14.344C4.048 13.944 1.6 11.256 1.6 8ZM12.712 12.32C12.504 11.672 11.912 11.2 11.192 11.2H10.392V8.8C10.392 8.36 10.032 8 9.592 8H4.792V6.4H6.392C6.832 6.4 7.192 6.04 7.192 5.6V4H8.792C9.672 4 10.392 3.28 10.392 2.4V2.072C12.736 3.016 14.4 5.32 14.4 8C14.4 9.664 13.752 11.184 12.712 12.32Z' fill='black' fill-opacity='0.24'/%3E%3C/svg%3E");
	}
}

.select-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-flow: column;
	gap: 2px;
	padding: 4px 0;
	background-color: white;
	border-radius: 4px;
	box-shadow: 2px 4px 16px rgba(black, 0.08);
}

.select-dropdown-item {
	cursor: pointer;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: 0.02em;
	padding: 0 16px;

	&.focused {
		opacity: 0.5;
	}

	&.selected {
		font-weight: 500;
	}
}