import { style } from '@vanilla-extract/css';
import { color, config } from 'folds';

// Shared base for the chat-background / seasonal-theme preview swatches. These
// are inherently custom tiles (they render a live background preview), so they
// can't be a folds MenuItem/Chip — but the chrome (radius, border, hover, and a
// proper keyboard focus ring) now comes from design tokens instead of raw
// rgba/px inline styles. Size + the preview background stay inline per-swatch.
export const BgSwatch = style({
  display: 'block',
  padding: 0,
  cursor: 'pointer',
  overflow: 'hidden',
  borderRadius: config.radii.R300,
  borderWidth: config.borderWidth.B400,
  borderStyle: 'solid',
  borderColor: color.SurfaceVariant.ContainerLine,
  transition: 'border-color 100ms ease-in-out',
  selectors: {
    '&:hover': {
      borderColor: color.Primary.ContainerLine,
    },
    '&:focus-visible': {
      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
      outlineOffset: config.space.S100,
    },
    '&[data-selected="true"]': {
      borderColor: color.Primary.Main,
    },
  },
});