.select-selected,
.select-items,
.dropdown:not(.custom-select) {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%; 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); 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: var(--wp--custom--greyd--input--prim--color--text);
background-color: var(--wp--custom--greyd--input--prim--color--background); 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); 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;
} .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);
} .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: 0 0 0 var(--wp--custom--greyd--input--prim--hover--border--width) var(--text-color, var(--wp--custom--greyd--input--prim--hover--border--color) );
} .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);
} .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);
} .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: 0 0 0 var(--wp--custom--greyd--input--prim--hover--border--width) var(--text-color, var(--wp--custom--greyd--input--prim--hover--border--color) );
} .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;
} .select-items div,
.greyd_multiselect .dropdown .option { 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);
}
} .greyd_multiselect {
display: block;
position: relative;
}
.greyd_multiselect input { position: absolute;
z-index: -1;
top: 0;
left: 0; border-color: transparent;
box-shadow: none;
visibility: hidden;
} .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;  }
.greyd_multiselect.open .input::after {
content: "\42";
} .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;
}
} .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; 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 {
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; 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;
}