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

/**
 * Layout
 */

export const Base = style({
  maxWidth: toRem(432),
  width: `calc(100vw - 2 * ${config.space.S400})`,
  height: toRem(450),
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
  // Dawn: a faint hairline + soft shadow instead of the stock solid-bordered
  // floating card.
  border: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
  borderRadius: config.radii.R400,
  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
  overflow: 'hidden',
});

// Docked variant — the board lives inline at the top of the composer on native
// instead of floating as a pop-out. Full-width, capped height, no shadow/round
// corners (the composer pill already clips it); only a hairline parts it from
// the textarea row below.
export const BaseDock = style({
  maxWidth: 'unset',
  width: '100%',
  height: toRem(320),
  maxHeight: '46vh',
  border: 'none',
  borderBottom: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
  borderRadius: 0,
  boxShadow: 'none',
});

export const Header = style({
  padding: config.space.S300,
  paddingBottom: 0,
});

/**
 * Sidebar
 */

export const Sidebar = style({
  width: toRem(54),
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
  position: 'relative',
});

export const SidebarContent = style({
  padding: `${config.space.S200} 0`,
});

export const SidebarStack = style({
  width: '100%',
  backgroundColor: color.Surface.Container,
});

export const SidebarDivider = style({
  width: toRem(18),
});

export const SidebarBtnImg = style({
  width: toRem(24),
  height: toRem(24),
  objectFit: 'contain',
});

/**
 * Preview
 */

export const Preview = style({
  padding: `${config.space.S300} ${config.space.S400}`,
  minHeight: toRem(40),

  // Dawn: a flush footer separated by a hairline, not an inset boxed card.
  borderTop: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
  color: color.SurfaceVariant.OnContainer,
});

export const PreviewEmoji = style([
  DefaultReset,
  {
    width: toRem(32),
    height: toRem(32),
    fontSize: toRem(32),
    lineHeight: toRem(32),
  },
]);
export const PreviewImg = style([
  DefaultReset,
  {
    width: toRem(32),
    height: toRem(32),
    objectFit: 'contain',
  },
]);

/**
 * Group
 */

export const EmojiGroup = style({
  position: 'relative',
  padding: `${config.space.S300} 0`,
});

export const EmojiGroupLabel = style({
  position: 'sticky',
  top: 0,
  zIndex: 1,

  // Dawn section label — uppercase, tracked, muted, left-aligned (was a centered
  // pill chip). Opaque board background so it covers items scrolling underneath;
  // muting is via the text colour (element opacity would let content show through).
  padding: `${config.space.S300} ${config.space.S200} ${config.space.S100}`,
  backgroundColor: color.Surface.Container,
  color: 'rgba(230, 230, 233, 0.5)',
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
  fontWeight: config.fontWeight.W600,
});

export const EmojiGroupContent = style([
  DefaultReset,
  {
    padding: `0 ${config.space.S200}`,
  },
]);

/**
 * Item
 */

export const EmojiItem = style([
  DefaultReset,
  FocusOutline,
  {
    width: toRem(48),
    height: toRem(48),
    fontSize: toRem(32),
    lineHeight: toRem(32),
    borderRadius: config.radii.R400,
    cursor: 'pointer',

    ':hover': {
      backgroundColor: color.Surface.ContainerHover,
    },
  },
]);

export const StickerItem = style([
  EmojiItem,
  {
    width: toRem(112),
    height: toRem(112),
  },
]);

export const CustomEmojiImg = style([
  DefaultReset,
  {
    width: toRem(32),
    height: toRem(32),
    objectFit: 'contain',
  },
]);

export const StickerImg = style([
  DefaultReset,
  {
    width: toRem(96),
    height: toRem(96),
    objectFit: 'contain',
  },
]);
