1
.bland-emoji-picker {
2
  width: 360px;
3
  height: 400px;
4
  display: flex;
5
  flex-direction: column;
6
  gap: 10px;
7
  padding: 12px;
8
  border: 1px solid var(--color-zinc-700);
9
  border-radius: 0.5rem;
10
  background: color-mix(in srgb, var(--color-zinc-800) 96%, black);
11
  color: var(--color-zinc-200);
12
  font-family: var(--font-sans);
13
  font-size: 0.875rem;
14
  animation: scale-fade 0.2s ease-out both;
15
  box-shadow:
16
    0 10px 15px -3px rgba(0, 0, 0, 0.35),
17
    0 4px 6px -4px rgba(0, 0, 0, 0.35);
18
}
19
 
20
.bland-emoji-picker-search-row {
21
  display: flex;
22
  gap: 6px;
23
  align-items: stretch;
24
}
25
 
26
.bland-emoji-picker-search {
27
  height: 36px;
28
  flex: 1;
29
  min-width: 0;
30
  border: 1px solid var(--color-zinc-700);
31
  border-radius: 0.375rem;
32
  background: color-mix(in srgb, var(--color-zinc-700) 92%, transparent);
33
  padding: 0 12px;
34
  color: var(--color-zinc-100);
35
  outline: none;
36
}
37
 
38
.bland-emoji-picker-search::placeholder {
39
  color: var(--color-zinc-500);
40
}
41
 
42
.bland-emoji-picker-search:focus {
43
  border-color: color-mix(in srgb, var(--color-accent-500) 60%, white);
44
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 20%, transparent);
45
}
46
 
47
.bland-emoji-picker-groups {
48
  display: flex;
49
  gap: 2px;
50
  justify-content: space-between;
51
}
52
 
53
.bland-emoji-picker-group {
54
  display: inline-flex;
55
  align-items: center;
56
  justify-content: center;
57
  width: 30px;
58
  height: 30px;
59
  border: 0;
60
  border-radius: 0.375rem;
61
  background: transparent;
62
  color: var(--color-zinc-400);
63
  opacity: 0.55;
64
  cursor: pointer;
65
  transition:
66
    background-color 120ms ease,
67
    opacity 120ms ease;
68
}
69
 
70
.bland-emoji-picker-group:hover {
71
  background: color-mix(in srgb, var(--color-zinc-700) 88%, transparent);
72
  opacity: 1;
73
}
74
 
75
.bland-emoji-picker-group.is-active {
76
  background: color-mix(in srgb, var(--color-accent-500) 18%, var(--color-zinc-700));
77
  opacity: 1;
78
}
79
 
80
.bland-emoji-picker-group:disabled,
81
.bland-emoji-picker-group:disabled:hover {
82
  background: transparent;
83
  opacity: 0.3;
84
  cursor: not-allowed;
85
}
86
 
87
.bland-emoji-picker-body {
88
  min-height: 0;
89
  display: flex;
90
  flex: 1;
91
  flex-direction: column;
92
  gap: 8px;
93
}
94
 
95
.bland-emoji-picker-section-label {
96
  font-size: 0.75rem;
97
  font-weight: 500;
98
  letter-spacing: 0.08em;
99
  text-transform: uppercase;
100
  color: var(--color-zinc-500);
101
}
102
 
103
.bland-emoji-picker-grid {
104
  min-height: 0;
105
  display: grid;
106
  flex: 1;
107
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
108
  gap: 4px;
109
  overflow-y: auto;
110
  overflow-x: hidden;
111
  scrollbar-gutter: stable;
112
  align-content: start;
113
}
114
 
115
.bland-emoji-picker-item {
116
  display: inline-flex;
117
  align-items: center;
118
  justify-content: center;
119
  height: 36px;
120
  border: 0;
121
  border-radius: 0.5rem;
122
  background: transparent;
123
  cursor: pointer;
124
  transition:
125
    background-color 120ms ease,
126
    box-shadow 120ms ease;
127
}
128
 
129
.bland-emoji-picker-item:hover,
130
.bland-emoji-picker-item[aria-selected="true"] {
131
  background: color-mix(in srgb, var(--color-zinc-700) 88%, transparent);
132
}
133
 
134
.bland-emoji-picker-item[aria-selected="true"] {
135
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 35%, transparent);
136
}
137
 
138
.bland-emoji-picker-empty {
139
  display: flex;
140
  flex: 1;
141
  align-items: center;
142
  justify-content: center;
143
  border: 1px dashed color-mix(in srgb, var(--color-zinc-700) 88%, transparent);
144
  border-radius: 0.5rem;
145
  color: var(--color-zinc-500);
146
  padding: 12px;
147
  text-align: center;
148
}