.select {
	font-family: var(--text-font);
	font-weight: normal;
	line-height: var(--line-height);
	font-size: var(--text-font-size);

	background: url("../../../images/svgs/select-arrows.svg") no-repeat 95%/15px,
		#ffffff 100% 100%;
	border-radius: 0;

	width: 100%;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	border: 1px solid var(--primary-color);
	--padding: var(--block-default-padding) var(--elements-gap);
	padding: var(--padding);
	transition: border 0.3s ease-in-out;

	contain: layout;
	cursor: pointer;
	z-index: 99;
}

.select--filter{
	font-size: 14px;
	width: 140px;

	line-height: 100%;

	--padding: 8px 12px;
	padding: var(--padding);
}

.select--border-input{
	border: 1px solid var(--color-input);
}

.select--hidden {
	display: none;
}

.select__list {
	position: absolute;
	top: 100%;
	left: 0;

	width: 100%;
	max-height: 0px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	overflow: auto;

	transition: opacity 0.1s ease-in-out;
}

.select__list--show{
	max-height: 200px;
	visibility: visible;
	opacity: 1;
	pointer-events: all;
	background: #f3f3f3;
	border-color: var(--primary-color);
	border-style: solid;
	border-width: 1px 1px 0;
}

.select__option{
	padding: var(--padding);
	border-bottom: 1px solid var(--primary-color);
	cursor: pointer;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: capitalize;
}