| 13 | import { colors } from '../../constants/colors'; |
| 14 | |
| 15 | const createTierStyle = (overrides = {}) => { |
| 16 | const base = { |
| 17 | container: { |
| 18 | display: 'flex', |
| 19 | alignItems: 'center', |
| 20 | justifyContent: 'center', |
| 21 | borderRadius: '10px', |
| 22 | border: `1px solid ${colors.bgElevated}`, |
| 23 | background: `${colors.bgBody}66`, |
| 24 | overflow: 'hidden', |
| 25 | flexShrink: 0, |
| 26 | cursor: 'pointer', |
| 27 | transition: 'all 0.25s ease', |
| 28 | ...overrides.container |
| 29 | }, |
| 30 | containerHover: { |
| 31 | borderColor: colors.accent, |
| 32 | background: `${colors.primary}1a`, |
| 33 | boxShadow: `0 0 12px ${colors.primary}40`, |
| 34 | ...overrides.containerHover |
| 35 | }, |
| 36 | image: { |
| 37 | display: 'block', |
| 38 | width: '100%', |
| 39 | height: '100%', |
| 40 | objectFit: 'contain', |
| 41 | padding: '8px', |
| 42 | transition: 'transform 0.25s ease', |
| 43 | ...overrides.image |
| 44 | }, |
| 45 | imageHover: { transform: 'scale(1.05)' } |
| 46 | }; |
| 47 | return base; |
| 48 | }; |
| 49 | |
| 50 | const tierStyles = { |
| 51 | diamond: createTierStyle({ |