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

export const BASEMAPS_WIDTH = 288

export const styles = {
  root: {
    width: BASEMAPS_WIDTH,
    overflow: 'auto',
  },
  toggle: {
    padding: ({ spacing }) => spacing(0.5),

    img: {
      width: '100%',
      aspectRatio: '1 / 1',
      borderRadius: ({ spacing }) => spacing(0.25),
    },
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: ({ spacing }) => spacing(1),
    paddingInlineStart: ({ spacing }) => spacing(2),
    position: 'sticky',
    top: 0,
    zIndex: 2,
    background: ({ palette }) => palette.background.paper,
  },
  groupWrapper: {
    content: {
      paddingInline: ({ spacing }) => spacing(2),
      paddingBlock: ({ spacing }) => spacing(0.5),
    },
  },
  group: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(2),
    paddingInline: ({ spacing }) => spacing(2),
    paddingBlock: ({ spacing }) => spacing(1),
  },
  item: {
    container: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
      gap: ({ spacing }) => spacing(1),
      background: 'transparent',
      border: 'none',
      cursor: 'pointer',
      padding: 0,
      height: ({ spacing }) => spacing(12),

      img: {
        maxWidth: ({ spacing }) => spacing(9),
        aspectRatio: '1 / 1',
        borderRadius: ({ spacing }) => spacing(0.5),
        border: `2px solid transparent`,

        '&:hover': {
          borderColor: ({ palette }) => palette.action.active,
        },

        '&[data-active="true"]': {
          borderColor: ({ palette }) => palette.primary.main,
        },
      },
    },
    selected: {
      color: ({ palette }) => palette.primary.main,
    },
  },
} satisfies Record<string, SxProps<Theme>>