import { style } from '@vanilla-extract/css';

/** Discord presets are 128px canvases aligned to an ~80px avatar circle. */
export const AVATAR_DECORATION_SCALE_PERCENT = 119;

/** Inner avatar diameter as a fraction of the decoration canvas (80 / 128). */
export const AVATAR_DECORATION_INNER_PERCENT = 62.5;

export const AvatarDecorationOverlay = style({
  position: 'absolute',
  top: '50%',
  left: '50%',
  width: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
  height: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
  transform: 'translate(-50%, -50%)',
  objectFit: 'contain',
  pointerEvents: 'none',
  zIndex: 2,
});

export const SidebarAvatarStack = style({
  position: 'relative',
  width: '100%',
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  overflow: 'visible',
});