src/components/@shared/FormInput/InputElement/TagsAutoComplete/index.module.css
.select [class$='control'] {
border-color: var(--border-color);
border-radius: var(--border-radius);
box-shadow: none;
background-color: var(--background-content);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
font-weight: var(--font-weight-bold);
cursor: text;
min-height: 43px;
}
.select [class$='control']:hover {
border-color: var(--border-color);
}
.select [class$='control']:focus-within {
border-color: var(--font-color-text);
}
.select [class$='ValueContainer'] {
padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
}
.select [class$='Input'] {
margin: 0;
padding-bottom: 0;
padding-top: 0;
font-size: var(--font-size-base);
font-family: var(--font-family-base);
font-weight: var(--font-weight-bold);
}
.select input {
color: var(--font-color-heading) !important;
}
.select [class$='menu'] {
background-color: var(--background-highlight);
border-radius: var(--border-radius);
}
.select [class$='option'] {
color: var(--font-color-heading);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
font-weight: var(--font-weight-bold);
}
.select [class$='option']:active {
background-color: var(--color-secondary);
}
.select [class$='multiValue'],
.select [class$='multiValue'] > *,
.select [class$='multiValue']:hover > * {
border-radius: var(--border-radius);
background-color: var(--background-highlight);
color: var(--font-color-text);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
font-weight: var(--font-weight-bold);
padding-top: 0;
padding-bottom: 0;
}
.select [class$='multiValue'] > div[role$='button'],
.select [class$='indicatorContainer'] svg {
cursor: pointer;
}
.select [class$='placeholder'] {
margin-left: 0;
margin-right: 0;
color: var(--color-secondary);
font-weight: var(--font-weight-base);
transition: 0.2s ease-out;
opacity: 0.7;
}
.select [class$='menu'] {
background-color: var(--background-content);
margin-top: -2px;
border: 1px solid var(--font-color-text);
border-top-color: var(--border-color);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: none;
}
.select [class$='menu'] [class$='option']:hover,
.select [class$='menu'] [class$='option']:focus-within {
background-color: var(--font-color-heading);
color: var(--background-content);
}
.select [class$='NoOptionsMessage'] {
font-size: var(--font-size-small);
color: var(--color-secondary);
text-align: left;
}