.custom-select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	margin-bottom: 2rem;
}

.custom-select__label {
	color: var(--clr-black);
	font-weight: normal;
	font-size: 2.9rem;
	margin-bottom: 1rem;
}

.custom-select__content {
	display: flex;
	flex-direction: column;

	position: relative;
}

.custom-select__content label {
	cursor: pointer;
}

.custom-select__list {
	background: var(--clr-black);
	color: var(--clr-white);

	position: absolute;
	z-index: 1;
	top: 110%;

	width: 100%;
	max-height: 0;
	opacity: 0;
	transition: all 0.25s;
	border-radius: 0.8rem;
	overflow: hidden;

	order: 1;
}

.custom-select__list::-webkit-scrollbar {
	width: 0.8rem;
	cursor: pointer;
	border-radius: 0 0.8rem 0.8rem 0;
}

.custom-select__list::-webkit-scrollbar-thumb {
	background: var(--clr-light-gray);
	border-radius: 0 0.8rem 0.8rem 0;
}

.custom-select__list--active {
	max-height: 24rem;
	opacity: 1;
	overflow-y: scroll;
}

.custom-select__list--active + .custom-select__selected::after {
	transform: rotateX(180deg);
	top: -28%;
}

.custom-select__option,
.custom-select__selected {
	padding: 1.2rem 2.4rem;
	cursor: pointer;
	color: var(--clr-white);
}

.custom-select__option:hover,
.custom-select__option:focus,
.custom-select__option:active {
	background: var(--clr-dark-gray);
}

.custom-select__selected {
	background: var(--clr-black);
	border-radius: 0.8rem;

	position: relative;
	transition: 0.25s;

	order: 0;
}

.custom-select__selected::after {
	content: "";
	background: url("/src/public/assets/custom-select_arrow-down.svg");
	background-size: contain;
	background-repeat: no-repeat;

	position: absolute;
	right: 2.1rem;
	top: 28%;

	height: 100%;
	width: 1.9rem;
}

.custom-select__selected--disable {
	background: var(--clr-lighter-gray);
	cursor: default !important;
}

.custom-select__radio {
	display: none;
}