| 2 | import type {Theme} from './ThemeProvider' |
| 3 | |
| 4 | const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w') => { |
| 5 | const map = { |
| 6 | w: ` |
| 7 | top: 0; |
| 8 | right: 100%; |
| 9 | left: auto; |
| 10 | width: auto; |
| 11 | margin-top: 0; |
| 12 | margin-right: 10px; |
| 13 | |
| 14 | &::before { |
| 15 | top: 10px; |
| 16 | right: -16px; |
| 17 | left: auto; |
| 18 | border-color: transparent; |
| 19 | border-left-color: ${get('colors.border.default')(theme)}; |
| 20 | } |
| 21 | |
| 22 | &::after { |
| 23 | top: 11px; |
| 24 | right: -14px; |
| 25 | left: auto; |
| 26 | border-color: transparent; |
| 27 | border-left-color: ${get('colors.border.default')(theme)}; |
| 28 | } |
| 29 | `, |
| 30 | e: ` |
| 31 | top: 0; |
| 32 | left: 100%; |
| 33 | width: auto; |
| 34 | margin-top: 0; |
| 35 | margin-left: 10px; |
| 36 | |
| 37 | &::before { |
| 38 | top: 10px; |
| 39 | left: -16px; |
| 40 | border-color: transparent; |
| 41 | border-right-color: ${get('colors.border.default')(theme)}; |
| 42 | } |
| 43 | |
| 44 | &::after { |
| 45 | top: 11px; |
| 46 | left: -14px; |
| 47 | border-color: transparent; |
| 48 | border-right-color: ${get('colors.border.default')(theme)}; |
| 49 | } |
| 50 | `, |
| 51 | ne: ` |
| 52 | top: auto; |
| 53 | bottom: 100%; |
| 54 | left: 0; |
| 55 | margin-bottom: 3px; |
| 56 | |
| 57 | &::before, |
| 58 | &::after { |
| 59 | top: auto; |
| 60 | right: auto; |
| 61 | } |