import type { SxProps, Theme } from '@mui/material'

export const styles = {
  root: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.25,
    width: 'fit-content',
    borderRadius: 0.5,
    gridColumn: 2,
    height: 'fit-content',
  },
  preview: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.25,
  },
  triggerActive: {
    bgcolor: 'primary.relatedLight',
  },
  paper: {
    // Positioning is handled by Popper; only visual styles here.
    display: 'flex',
    alignItems: 'center',
    gap: 0.25,
    px: 0.25,
    py: 0.25,
    mx: 0.25,
    mt: `0 !important`, // Popper's placement adds a margin-top to offset from the trigger; we want to override that.
    bgcolor: 'background.paper',
    borderRadius: 0.5,
  },
} satisfies Record<string, SxProps<Theme>>