/**
 * CSS for Custom Selects
 * - multiselect
 * - select
 */

/*    extend theme.css
__________________________________
*/

/**
 * Primary select
 */
.select-selected,
.select-items,
.dropdown:not(.custom-select) {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	/* font */
	font-family: var(--wp--custom--greyd--input--typography--font-family);
	font-size: var(--wp--custom--greyd--input--typography--font-size);
	font-weight: var(--wp--custom--greyd--input--typography--font-weight);
	line-height: var(--wp--custom--greyd--input--typography--line-height);
	/* spacing */
	padding-top: var(--wp--custom--greyd--input--spacing--padding--top);
	padding-bottom: var(--wp--custom--greyd--input--spacing--padding--bottom);
	padding-left: var(--wp--custom--greyd--input--spacing--padding--left);
	padding-right: var(--wp--custom--greyd--input--spacing--padding--right);
	/* color */
	color: var(--wp--custom--greyd--input--prim--color--text);
	background-color: var(--wp--custom--greyd--input--prim--color--background);
	/* border */
	border-radius: var(--wp--custom--greyd--input--prim--border--radius);
	border-width: var(--wp--custom--greyd--input--prim--border--width);
	border-style: var(--wp--custom--greyd--input--prim--border--style);
	border-color: var(--wp--custom--greyd--input--prim--border--color);
	/* shadow */
	box-shadow: var(--wp--custom--greyd--input--prim--shadow);

	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* dropdown container */
.select-items:hover,
.select-items:focus {
	color: var(--wp--custom--greyd--input--prim--hover--color--text);
	background-color: var(--wp--custom--greyd--input--prim--hover--color--background);
	border-width: var(--wp--custom--greyd--input--prim--border--width);
	border-style: var(--wp--custom--greyd--input--prim--border--style);
	border-color: var(--wp--custom--greyd--input--prim--border--color);
	box-shadow: var(--wp--custom--greyd--input--prim--hover--shadow);
}

/* dropdown items */
.select-items div:hover,
.same-as-selected.same-as-selected,
.dropdown:not(.custom-select) > *:hover,
.select-items div:focus,
.dropdown:not(.custom-select) > *:focus {
	color: var(--wp--custom--greyd--input--prim--hover--color--text);
	background-color: var(--wp--custom--greyd--input--prim--hover--color--background);
	/* box shadow 1px line bottom inside */
	box-shadow: 0 0 0 var(--wp--custom--greyd--input--prim--hover--border--width) var(--text-color, var(--wp--custom--greyd--input--prim--hover--border--color) );
}

/**
 * Secondary select
 */
.is-style-sec .select-selected,
.is-style-sec .select-items,
.input.is-style-sec + .dropdown {
	color: var(--wp--custom--greyd--input--sec--color--text);
	background-color: var(--wp--custom--greyd--input--sec--color--background);
	border-radius: var(--wp--custom--greyd--input--sec--border--radius);
	border-width: var(--wp--custom--greyd--input--sec--border--width);
	border-style: var(--wp--custom--greyd--input--sec--border--style);
	border-color: var(--wp--custom--greyd--input--sec--border--color);
	box-shadow: var(--wp--custom--greyd--input--sec--shadow);
}

/* dropdown container */
.is-style-sec .select-items:hover,
.is-style-sec .select-items:focus {
	color: var(--wp--custom--greyd--input--sec--hover--color--text);
	background-color: var(--wp--custom--greyd--input--sec--hover--color--background);
	border-width: var(--wp--custom--greyd--input--sec--border--width);
	border-style: var(--wp--custom--greyd--input--sec--border--style);
	border-color: var(--wp--custom--greyd--input--sec--border--color);
	box-shadow: var(--wp--custom--greyd--input--sec--hover--shadow);
}

/* dropdown items */
.is-style-sec .select-items div:hover,
.is-style-sec .same-as-selected,
.input.is-style-sec + .dropdown > *:hover,
.is-style-sec .select-items div:focus,
.input.is-style-sec + .dropdown > *:focus {
	color: var(--wp--custom--greyd--input--sec--hover--color--text);
	background-color: var(--wp--custom--greyd--input--sec--hover--color--background);
	/* box shadow 1px line bottom inside */
	box-shadow: 0 0 0 var(--wp--custom--greyd--input--prim--hover--border--width) var(--text-color, var(--wp--custom--greyd--input--prim--hover--border--color) );
}

/**
 * Custom-dropdown options background fix:
 * When the input-bg is transparent, the options won't be readable.
 * By applying a bg-color and setting the actual color as an inset
 * drop-shadow, we make sure the options are readable.
 */
.select-items,
.greyd_multiselect .dropdown {
	background-color: #fff !important;
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 200px var(--wp--custom--greyd--input--prim--color--background) inset !important;
}

.is-style-sec .select-items,
.greyd_multiselect .input.is-style-sec + .dropdown {
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 200px var(--wp--custom--greyd--input--sec--color--background) inset !important;
}

/* dropdown items */
.select-items div,
.greyd_multiselect .dropdown .option {
	/* padding: calc( var(--FRMpaddingy) - 4px) var(--FRMpaddingx); */
	padding-top: calc(var(--wp--custom--greyd--input--spacing--padding--top) - 4px);
	padding-bottom: calc(var(--wp--custom--greyd--input--spacing--padding--bottom) - 4px);
	padding-left: var(--wp--custom--greyd--input--spacing--padding--left);
	padding-right: var(--wp--custom--greyd--input--spacing--padding--right);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: none;
	border-color: transparent;
	border-style: dotted !important;
	border-width: 0px !important;
	box-shadow: none;
}

.greyd_multiselect .dropdown .children {
	padding-left: max(var(--wp--custom--greyd--input--spacing--padding--left), 1em);
}

@media (max-width: 576px) {

	.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);
	}
}


/*    multiselect
__________________________________
*/
.greyd_multiselect {
	display: block;
	position: relative;
}

.greyd_multiselect input {
	/* opacity: 0; */
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	/* color: transparent;
	background-color: transparent; */
	border-color: transparent;
	box-shadow: none;
	visibility: hidden;
}

/* 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-flex;
	gap: 0.2em;
	align-items: flex-start;
	flex-wrap: wrap;
}

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

.greyd_multiselect .input.is-style-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.1333em .5em;
	color: var(--wp--preset--color--foreground, currentColor);
	background: var(--wp--preset--color--lightest);
	border: 1px solid var(--wp--preset--color--foreground, currentColor);
	white-space: nowrap;
}

.greyd_multiselect .input.is-style-sec .tag {
	border-radius: calc(var(--wp--custom--greyd--input--sec--border--radius, 3px) / 1.5);
}

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

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

/* 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;
	display: none;
	/**
	 * Custom-dropdown options background fix:
	 * When the input-bg is transparent, the options won't be readable.
	 * By applying a bg-color and setting the actual color as an inset
	 * drop-shadow, we make sure the options are readable.
	 */
	background-color: var(--wp--preset--color--background, #f9f7ff);
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 200px var(--wp--custom--greyd--input--prim--color--background) inset;
}

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

.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;
}


/*    custom select
__________________________________
*/
.custom-select {
	position: relative;
	width: 100%
}

.custom-select select {
	display: block;
	position: absolute;
	opacity: 0;
	margin: 0 !important;
	padding: 0 !important;
	width: 1px !important;
	height: 1px !important;
}

.select-hide {
	display: none;
}

.select-selected {
	padding-right: calc(var(--wp--custom--greyd--input--spacing--padding--right) + 15px);
}

.select-selected,
.select-items {
	position: relative;
	margin: 0;
	cursor: pointer;
	/* white-space: nowrap; */
	overflow: hidden;
}

.center .select-selected,
.center .select-items {
	margin: 0 auto;
}

.select-selected .select-icon:after {
	position: absolute;
	content: "\43";
	font-family: ElegantIcons;
	font-weight: 400;
	right: 10px;
}

.select-selected.select-arrow-active .select-icon:after {
	content: "\42";
}

.select-items {
	position: absolute;
	width: auto;
	width: 100%;
	left: 0;
	padding: 0;
	z-index: 99;
	max-height: 300px;
	overflow: auto;
}