| 204 | } |
| 205 | |
| 206 | export const getBaseStyles = (theme?: Theme) => ({ |
| 207 | borderRadius: '2', |
| 208 | border: '1px solid', |
| 209 | borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`, |
| 210 | fontFamily: 'inherit', |
| 211 | fontWeight: 'semibold', |
| 212 | fontSize: '1', |
| 213 | cursor: 'pointer', |
| 214 | appearance: 'none', |
| 215 | userSelect: 'none', |
| 216 | textDecoration: 'none', |
| 217 | textAlign: 'center', |
| 218 | display: 'flex', |
| 219 | alignItems: 'center', |
| 220 | justifyContent: 'space-between', |
| 221 | height: '32px', |
| 222 | padding: '0 12px', |
| 223 | gap: '8px', |
| 224 | minWidth: 'max-content', |
| 225 | transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)', |
| 226 | transitionProperty: 'color, fill, background-color, border-color', |
| 227 | '&[href]': { |
| 228 | display: 'inline-flex', |
| 229 | '&:hover': { |
| 230 | textDecoration: 'none', |
| 231 | }, |
| 232 | }, |
| 233 | '&:hover': { |
| 234 | transitionDuration: '80ms', |
| 235 | }, |
| 236 | '&:active': { |
| 237 | transition: 'none', |
| 238 | }, |
| 239 | '&[data-inactive]': { |
| 240 | cursor: 'auto', |
| 241 | }, |
| 242 | '&:disabled': { |
| 243 | cursor: 'not-allowed', |
| 244 | boxShadow: 'none', |
| 245 | }, |
| 246 | '@media (forced-colors: active)': { |
| 247 | '&:focus': { |
| 248 | // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips |
| 249 | outline: 'solid 1px transparent', |
| 250 | }, |
| 251 | }, |
| 252 | '[data-component=ButtonCounter]': { |
| 253 | fontSize: '0', |
| 254 | }, |
| 255 | '&[data-component=IconButton]': { |
| 256 | display: 'inline-grid', |
| 257 | padding: 'unset', |
| 258 | placeContent: 'center', |
| 259 | width: '32px', |
| 260 | minWidth: 'unset', |
| 261 | }, |
| 262 | '&[data-size="small"]': { |
| 263 | padding: '0 8px', |