[simple-dropdown-js] ul {
	display: none;
	position: absolute;
}

[dropdown-js] {
	--transform-origin-dropdown: top left;

	padding: 5px 5px;
	transform: scale(0.8, 0.8);
	transform-origin: var(--transform-origin-dropdown);
	opacity: 0;
	position: absolute;
	background-color: white;
	display: flex;
	flex-direction: column;
	gap: 1px;
	border: 1px solid #e7e7e7;
	font-size: 16px;
	color: #878787;
	min-width: 170px;
	max-width: 250px;
	top: 100%;
	border-radius: 5px;
	visibility: hidden;
	transition: transform 0.1s, opacity 0.2s, visibility 0.1s;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
	z-index: 1000;
	--color-indicator-dropdown: rgb(0, 108, 249);

	&[posizione="sinistra"] {
		--transform-origin-dropdown: top right;
	}

	&:not([dropdown-btn]) {
		--transform-origin-dropdown: center center;

		&::before {
			content: "";
			position: absolute;
			border: 5px solid transparent;
			top: 0;
			right: var(--right-indicator-dropdown);
			left: var(--left-indicator-dropdown);
			border-bottom-color: var(--bottom-color-indicator-dropdown);
			border-left-color: var(--left-color-indicator-dropdown);
			border-top-color: var(--top-color-indicator-dropdown);
			border-right-color: var(--right-color-indicator-dropdown);
		}

		&[posizione="sinistra"] {
			--bottom-color-indicator-dropdown: transparent;
			--left-color-indicator-dropdown: transparent;
			--top-color-indicator-dropdown: var(--color-indicator-dropdown);
			--right-color-indicator-dropdown: var(--color-indicator-dropdown);
			--right-indicator-dropdown: 0;
			--left-indicator-dropdown: auto;
		}

		&[posizione="destra"] {
			--bottom-color-indicator-dropdown: transparent;
			--left-color-indicator-dropdown: var(--color-indicator-dropdown);
			--top-color-indicator-dropdown: var(--color-indicator-dropdown);
			--right-color-indicator-dropdown: transparent;
			--right-indicator-dropdown: auto;
			--left-indicator-dropdown: 0;
		}
	}
}

[dropdown-js].active {
	opacity: 1;
	transform: scale(1, 1);
	visibility: visible;
}

[dropdown-option-js] {
	position: relative;
	cursor: pointer;
	padding: 5px 10px 5px 10px;
	border-radius: 5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px;
	color: black;
	font-size: 14px;
	border: 0;
	background-color: transparent;
	word-break: normal;
	overflow-wrap: break-word;

	&[aria-checked] {
		padding-right: 35px;

		&::after {
			content: "\eb2c";
			font-size: 18px;
			font-family: "tabler-icons" !important;
			position: absolute;
			right: 10px;
			font-weight: 700;
			color: #c7c7c7;
		}

		&[aria-checked="true"]::after {
			color: var(--color-indicator-dropdown);
			content: "\eba6";
		}
	}
	

	& .ti {
		font-size: 18px;
	}

	&:hover {
		background-color: #f5f5f5;
	}
}