1
/* Customize the Select2 container */
2
.select2-container {
3
    color: var(--SmartThemeBodyColor);
4
}
5

6
/* Customize the dropdown */
7
.select2-dropdown {
8
    background-color: var(--SmartThemeBlurTintColor);
9
    border: 1px solid var(--SmartThemeBorderColor) !important;
10
    border-radius: 10px;
11
    box-shadow: 0 0 5px black;
12
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
13
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
14
    color: var(--SmartThemeBodyColor);
15
    z-index: 40000;
16
    user-select: none;
17
}
18

19
.select2-container .select2-selection.select2-selection--single.select2-selection--clearable .select2-selection__clear {
20
    top: 0;
21
    right: 25px;
22
}
23

24
.select2-container .select2-selection .select2-selection__clear {
25
    color: var(--SmartThemeBodyColor);
26
    font-size: 20px;
27
    position: absolute;
28
    right: 5px;
29
    margin-top: 0;  /* compensate for the increased font size */
30
    margin-right: 0;
31
}
32

33
.select2-container .select2-search--inline textarea.select2-search__field {
34
    opacity: 0.8;
35
    margin-top: 7px;  /* get placeholder text to the center */
36
}
37

38
.select2-selection--single .select2-selection__placeholder {
39
    color: var(--SmartThemeEmColor);
40
}
41

42
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
43
    color: var(--SmartThemeEmColor);
44
}
45

46
.select2-container .select2-selection--single .select2-selection__rendered {
47
    color: var(--SmartThemeBodyColor);
48
    line-height: unset;
49
    padding: 3px 5px;
50
}
51

52
.select2-container .select2-results>.select2-results__options {
53
    max-height: 300px;
54
}
55

56
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
57
    padding: revert;
58
    border-right: 1px solid var(--SmartThemeBorderColor);
59
    font-size: 1.1em;
60
    line-height: 1;
61
}
62

63
.select2-container .select2-selection--multiple .select2-selection__choice__display {
64
    padding-left: 5px;
65
}
66

67
/* Customize the search input */
68
.select2-search__field {
69
    background-color: var(--black30a);
70
    color: var(--SmartThemeBodyColor);
71
    border: 1px solid var(--SmartThemeBorderColor);
72
    font-family: var(--mainFontFamily);
73
    padding: 3px 5px;
74
    display: unset;  /* override the ST textarea display style */
75
    border-radius: 0;  /* border radius was interfering with cursor */
76
}
77

78
/* Customize the selected option */
79
.select2-selection--single {
80
    border: 1px solid var(--SmartThemeShadowColor);
81
    border-radius: 4px;
82
    background-color: var(--SmartThemeBlurTintColor);
83
}
84

85
/* Customize the selected option text */
86
.select2-selection__rendered {
87
    color: var(--SmartThemeBodyColor);
88
}
89

90
/* Customize the option list item */
91
.select2-results__option {
92
    color: var(--SmartThemeBodyColor);
93
    background-color: var(--SmartThemeBodyColor);
94
}
95

96
.select2-container .select2-selection--multiple,
97
.select2-container .select2-selection--single {
98
    background-color: var(--black30a);
99
    color: var(--SmartThemeBodyColor);
100
    border: 1px solid var(--SmartThemeBorderColor);
101
    border-radius: 7px;
102
    font-family: var(--mainFontFamily);
103
}
104

105
.select2-container .select2-selection--multiple.select2-selection--clearable {
106
    padding-right: 20px;
107
}
108

109
.select2-container.select2-container--focus .select2-selection--multiple,
110
.select2-container.select2-container--focus .select2-selection--single {
111
    border: 1px solid var(--SmartThemeBorderColor);
112
}
113

114
.select2-container .select2-results .select2-results__option--disabled {
115
    color: inherit;
116
    background-color: inherit;
117
    cursor: not-allowed;
118
    filter: brightness(0.5);
119
}
120

121
.select2-container .select2-selection--multiple .select2-selection__choice,
122
.select2-container .select2-selection--single .select2-selection__choice {
123
    border-radius: 5px;
124
    border-style: solid;
125
    border-width: 1px;
126
    box-sizing: border-box;
127
    color: var(--SmartThemeBodyColor);
128
    background-color: var(--black30a);
129
    border-color: var(--SmartThemeBorderColor);
130
    font-size: calc(var(--mainFontSize) - 5%);
131
    text-shadow: none !important;
132
}
133

134
.select2-results .select2-results__option--selectable {
135
    background-color: unset;
136
    color: var(--SmartThemeBodyColor);
137
    opacity: 0.5;
138
    transition: opacity var(--animation-duration-2x) ease-in-out;
139
    position: relative;
140
}
141

142
.select2-results .select2-results__option--group {
143
    color: var(--SmartThemeBodyColor);
144
    background-color: var(--SmartThemeBlurTintColor);
145
    position: relative;
146
}
147

148
/* Customize the hovered option list item */
149
.select2-results .select2-results__option--highlighted.select2-results__option--selectable {
150
    color: var(--SmartThemeBodyColor);
151
    background-color: unset;
152
    opacity: 1;
153
}
154

155
.select2-results__option.select2-results__option--group::before {
156
    display: none;
157
}
158

159
/* Customize the option list item */
160
.select2-results__option {
161
    padding-left: 30px;
162
    /* Add some padding to make room for the checkbox */
163
}
164

165
.select2-results .select2-results__option--group .select2-results__options--nested .select2-results__option {
166
    padding-left: 2em;
167
}
168

169
/* Add the custom checkbox */
170
.select2-results__option::before {
171
    content: '';
172
    display: inline-block;
173
    position: absolute;
174
    left: 6px;
175
    top: 50%;
176
    margin-top: -7px;
177
    width: 14px;
178
    height: 14px;
179
    border: 1px solid var(--SmartThemeBorderColor);
180
    background-color: var(--SmartThemeBlurTintColor);
181
    border-radius: 2px;
182
}
183

184
.select2-container .select2-selection--multiple .select2-selection__choice__remove,
185
.select2-container .select2-selection--single .select2-selection__choice__remove {
186
    color: var(--SmartThemeBodyColor);
187
}
188

189
/* Add the custom checkbox checkmark */
190
.select2-results__option--selected.select2-results__option::before {
191
    content: '\2713';
192
    font-weight: bold;
193
    color: var(--SmartThemeBodyColor);
194
    background-color: var(--SmartThemeBlurTintColor);
195
    text-align: center;
196
    line-height: 14px;
197
}
198

199
.select2-results__option.select2-results__message {
200
    background-color: inherit;
201
}
202

203
.select2-results__option.select2-results__message::before {
204
    display: none;
205
}
206

207
.select2-selection__choice__display {
208
    /* Fix weird alignment of the inside block */
209
    margin-left: 3px;
210
    margin-right: 1px;
211
}
212

213
/* Styling for choice remove icon */
214
span.select2.select2-container .select2-selection__choice__remove {
215
    cursor: pointer;
216
    transition: background-color var(--animation-duration-2x);
217
    color: var(--SmartThemeBodyColor);
218
    background-color: var(--black50a);
219
}
220

221
span.select2.select2-container .select2-selection__choice__remove:hover {
222
    color: var(--SmartThemeBodyColor);
223
    background-color: var(--white30a);
224
}
225

226
/* Custom class to support styling to show clickable choice options */
227
.select2_choice_clickable+span.select2-container .select2-selection__choice__display {
228
    cursor: pointer;
229
}
230

231
.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
232
    cursor: pointer;
233
    transition: background-color var(--animation-duration-2x);
234
    color: var(--SmartThemeBodyColor);
235
    background-color: var(--black50a);
236
    white-space: break-spaces;
237
    word-break: break-all;
238
}
239

240
.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display:hover {
241
    background-color: var(--white30a);
242
}