| 125 | flex-direction: column; |
| 126 | gap: ${semantic.gap.tight}; |
| 127 | `, |
| 128 | selectContainer: css` |
| 129 | width: 100%; |
| 130 | &::selection, |
| 131 | & *::selection { |
| 132 | background: ${semantic.color.state.selectionFill}; |
| 133 | color: ${semantic.color.state.selectionText}; |
| 134 | } |
| 135 | `, |
| 136 | selectLabel: css` |
| 137 | font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} / |
| 138 | ${semantic.type.labelSm.lineHeight} ${semantic.font.body}; |
| 139 | letter-spacing: ${semantic.type.labelSm.tracking}; |
| 140 | color: ${semantic.color.text.primary}; |
| 141 | text-align: left; |
| 142 | `, |
| 143 | selectDescription: css` |
| 144 | font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} / |
| 145 | ${semantic.type.bodyXs.lineHeight} ${semantic.font.body}; |
| 146 | color: ${semantic.color.text.secondary}; |
| 147 | margin: 0; |
| 148 | text-align: left; |
| 149 | `, |
| 150 | select: css` |
| 151 | /* The platform chevron is drawn in the OS accent, which reads as foreign |
| 152 | next to the rest of the panel — draw our own from currentColor instead |
| 153 | so it follows the theme. */ |
| 154 | appearance: none; |
| 155 | -webkit-appearance: none; |
| 156 | width: 100%; |
| 157 | box-sizing: border-box; |
| 158 | padding: ${semantic.padding.controlBlock} 28px |
| 159 | ${semantic.padding.controlBlock} ${semantic.padding.controlInline}; |
| 160 | border-radius: ${semantic.radius.control}; |
| 161 | background-color: ${semantic.color.surface.elevated}; |
| 162 | background-image: |
| 163 | linear-gradient(45deg, transparent 50%, currentColor 50%), |
| 164 | linear-gradient(135deg, currentColor 50%, transparent 50%); |
| 165 | background-position: |
| 166 | right 14px center, |
| 167 | right 9px center; |
| 168 | background-size: |
| 169 | 5px 5px, |
| 170 | 5px 5px; |
| 171 | background-repeat: no-repeat; |
| 172 | color: ${semantic.color.text.primary}; |
| 173 | border: 1px solid ${semantic.color.border.control}; |
| 174 | font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} / |
| 175 | ${semantic.type.bodySm.lineHeight} ${semantic.font.body}; |
| 176 | transition: |
| 177 | border-color 0.15s ease, |
| 178 | background-color 0.15s ease; |
| 179 | cursor: pointer; |
| 180 | |
| 181 | &:hover { |
| 182 | border-color: ${semantic.color.border.focus}; |
| 183 | } |
| 184 | |