.greyd_multiselect {
	display: block;
	position: relative;
}

.greyd_multiselect input {
	opacity: 0;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

/* input field */
.greyd_multiselect .input {
	cursor: pointer;
	position: relative;
	padding-right: calc(
		var(--wp--custom--greyd--input--spacing--padding--right) +
		var(--wp--custom--greyd--input--typography--font-size)
	);
}

.greyd_multiselect .input::after {
	position: absolute;
	content: "\43";
	font-family: ElegantIcons;
	font-weight: 400;
	right: 10px;
	/* top: 50%; */
	/* transform: translateY(-50%); */
}

.greyd_multiselect.open .input::after {
	content: "\42";
}

/* tags */
.greyd_multiselect .tags {
	display: inline-block;
	margin: -0.2em;
}

.greyd_multiselect .input .tags:empty::before {
	content: attr(data-placeholder);
	color: var(--wp--custom--greyd--input--prim--color--placeholder);
	display: inline-block;
	margin-left: .2em;
}

.greyd_multiselect .input.is-style-link-sec .tags:empty::before {
	color: var(--wp--custom--greyd--input--sec--color--placeholder);
}

.greyd_multiselect .tag {
	cursor: pointer;
	display: inline-block;
	border-radius: calc(var(--wp--custom--greyd--input--prim--border--radius, 3px) / 1.5);
	font-size: 0.8em;
	padding: 0 .5em;
	margin: .2em;
	color: var(--wp--preset--color--foreground, currentColor);
	background: var(--wp--preset--color--lightest);
	border: 1px solid var(--wp--preset--color--foreground, currentColor);
}

.greyd_multiselect .tag:hover {
	border-color: var(--wp--preset--color--vivid-red, #cf2e2e);
}

/* dropdown */
.greyd_multiselect .dropdown {
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
	min-width: 100%;
	width: auto;
	padding: 0;
	max-height: 300px;
	overflow: auto;
	background-color: var(--wp--custom--greyd--input--prim--color--background);
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
	display: none;
}

.greyd_multiselect.open .dropdown {
	display: block;
}

.greyd_multiselect .dropdown .option {
	cursor: pointer;
	padding-top: var(--wp--custom--greyd--input--spacing--padding--top);
	padding-right: calc(var(--wp--custom--greyd--input--spacing--padding--right) - 4px);
	padding-bottom: var(--wp--custom--greyd--input--spacing--padding--bottom);
	padding-left: calc(var(--wp--custom--greyd--input--spacing--padding--left) - 4px);
	transition: all 200ms ease;
}

.greyd_multiselect .dropdown .option:hover,
.greyd_multiselect .dropdown .option.selected {
	color: var(--wp--custom--greyd--input--prim--hover--color--text);
	background-color: var(--wp--custom--greyd--input--prim--hover--color--background);
}

.greyd_multiselect .dropdown .option .icn {
	font-family: 'ElegantIcons' !important;
	font-weight: normal;
	margin-right: 10px;
}

.greyd_multiselect .dropdown .option .icn::before {
	content: "\56";
}

.greyd_multiselect .dropdown .option.selected .icn::before {
	content: "\5a";
}

.greyd_multiselect .dropdown .option.disabled {
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 576px) {
	.greyd_multiselect .tag {
		font-size: 1em;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.select-items div,
	.greyd_multiselect .dropdown .option {
		padding-top: calc(var(--wp--custom--greyd--input--spacing--padding--top) - 2px);
		padding-bottom: calc(var(--wp--custom--greyd--input--spacing--padding--bottom) - 2px);
	}
}