.dropdown {
	@apply relative inline-block flex flex-col items-start user-select-none;
}
.dropdown__container {
	@apply relative box-border min-w-200px;
}

/* ============= */
/* Select */
/* ============= */

.dropdown__select {
	@apply flex font-bold justify-between items-center cursor-pointer;
	@apply rounded-full border-4px px-24px py-16px;
}

.dropdown__select--square {
	@apply rounded-5px;
}

/* select & select:hover */
.dropdown__select--light,
.dropdown__list--light {
	@apply border-purple-800 bg-purple-50 text-purple-800;
}

.dropdown__select--light:hover {
	@apply bg-white text-purple-900;
}

.dropdown__select--default,
.dropdown__list--default {
	@apply bg-purple-50 border-purple-900/50 text-purple-900 dark-(border-purple-50/75 bg-purple-900 text-purple-50);
}

.dropdown__select--default:hover {
	@apply dark:(bg-purple-100/30 text-neutral-100);
}

.dropdown__select--dark,
.dropdown__list--dark {
	@apply border-purple-50 bg-purple-900 text-purple-50;
}

.dropdown__select--dark:hover {
	@apply bg-purple-800 text-neutral-100;
}

/* Select - Pink */
.dropdown__select--pink,
.dropdown__list--pink {
	@apply border-purple-700 bg-pink-500 text-purple-700;
}

.dropdown__select--pink:hover {
	@apply bg-pink-400 text-purple-900;
}

/* Select - Green */
.dropdown__select--green,
.dropdown__list--green {
	@apply border-purple-700 bg-green-500 text-purple-700;
}

.dropdown__select--green:hover {
	@apply bg-green-400 text-purple-900;
}

/* Select - Blue */
.dropdown__select--blue,
.dropdown__list--blue {
	@apply border-purple-700 bg-blue-500 text-purple-700;
}

.dropdown__select--blue:hover {
	@apply bg-blue-400 text-purple-900;
}

/* Select - Yellow */
.dropdown__select--yellow,
.dropdown__list--yellow {
	@apply border-purple-700 bg-yellow-500 text-purple-700;
}

.dropdown__select--yellow:hover {
	@apply bg-yellow-400 text-purple-900;
}

/* ============ */
/* List */
/* ============ */
.dropdown__list {
	@apply absolute w-full max-h-200px overflow-y-auto;
	@apply top-5px left-1/2 transform -translate-x-1/2 z-10;
	@apply border-4px shadow-md rounded-2em;
	@apply px-24px py-16px;
}

.dropdown__list--square {
	@apply rounded-5px;
}

.dropdown__list li {
	@apply flex font-bold items-center;
	@apply cursor-pointer;
	@apply p-2 rounded-xl;
}

/* list:hover & list.active */
.dropdown__list--dark li:hover {
	@apply bg-purple-700 text-neutral-100;
}

.dropdown__list--dark li.active {
	@apply bg-purple-700;
}

/* list:hover & list.active */
.dropdown__list--light li:hover,
.dropdown__list--default li:hover {
	@apply bg-white text-purple-700;
}

.dropdown__list--light li.active,
.dropdown__list--default li.active {
	@apply bg-white;
}

.dropdown__list--default li:hover {
	@apply dark:(bg-purple-700 text-neutral-100);
}

.dropdown__list--default li.active {
	@apply dark:bg-purple-700;
}

/* Pink - list:hover & list.active */

.dropdown__list--pink li:hover {
	@apply bg-pink-100 text-purple-900;
}

.dropdown__list--pink li.active {
	@apply bg-pink-100;
}

/* Green - list:hover & list.active */

.dropdown__list--green li:hover {
	@apply bg-green-100 text-purple-900;
}

.dropdown__list--green li.active {
	@apply bg-green-100;
}

/* Blue - list:hover & list.active */

.dropdown__list--blue li:hover {
	@apply bg-blue-100 text-purple-900;
}

.dropdown__list--blue li.active {
	@apply bg-blue-100;
}

/* Yellow - list:hover & list.active */

.dropdown__list--yellow li:hover {
	@apply bg-yellow-100 text-purple-900;
}

.dropdown__list--yellow li.active {
	@apply bg-yellow-100;
}

/* ============= */
.dropdown__menu {
	@apply absolute top-16 z-20 user-select-none w-full;
}
.dropdown__menu--left {
	@apply left-0;
}
.dropdown__menu--right {
	@apply right-0;
}

.dropdown__icon {
	@apply transition-all duration-200 text-2xl;
}
.dropdown__icon--rotate {
	@apply transform rotate-180;
}

/* ============= */
/* Size */
/* ============= */

.dropdown--xs {
	@apply text-xs;
}
.dropdown--xs .dropdown__select {
	@apply px-12px py-8px border-2px;
}
.dropdown--sm {
	@apply text-sm;
}
.dropdown--sm .dropdown__select {
	@apply px-16px py-12px border-2px;
}

.dropdown--md {
	@apply text-base;
}
.dropdown--md .dropdown__select {
	@apply border-4px px-24px py-16px;
}

.dropdown--lg {
	@apply text-lg;
}
.dropdown--lg .dropdown__select {
	@apply border-4px px-24px py-16px;
}

.dropdown--xl {
	@apply text-xl;
}
.dropdown--xl .dropdown__select {
	@apply border-4px px-28px py-20px;
}

.dropdown--2xl {
	@apply text-2xl;
}

.dropdown--3xl {
	@apply text-3xl;
}

.dropdown--4xl {
	@apply text-4xl;
}

.dropdown--5xl {
	@apply text-5xl;
}

.list__icon {
	@apply mr-2;
}