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

export const styles = {
  root: {
    display: 'flex',
    alignItems: 'center',
    width: 'fit-content',
    overflow: 'hidden',
    borderRadius: ({ spacing }) => spacing(0.5),
    gap: ({ spacing }) => spacing(0.25),
  },
  preview: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(0.25),
  },
  actionsContainer: {
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    backgroundColor: ({ palette }) => palette.background.default,
    padding: ({ spacing }) => spacing(0.25),
    gap: ({ spacing }) => spacing(0.25),
  },
  iconButton: {
    width: ({ spacing }) => spacing(4),
    height: ({ spacing }) => spacing(4),
    borderRadius: 0,
    '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
      borderRadius: 0,
    },
  },
  triggerButton: {
    '&[data-active="true"]': {
      backgroundColor: ({ palette }) => palette.primary.relatedLight,
    },
  },
} satisfies Record<string, SxProps<Theme>>