cinny/src/app/components/url-preview/UrlPreview.css.tsx

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

export const UrlPreview = style([
  DefaultReset,
  {
    width: toRem(400),
    minHeight: toRem(102),
    backgroundColor: color.SurfaceVariant.Container,
    color: color.SurfaceVariant.OnContainer,
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.R300,
    overflow: 'hidden',
  },
]);

export const UrlPreviewImg = style([
  DefaultReset,
  {
    width: toRem(100),
    height: toRem(100),
    objectFit: 'cover',
    objectPosition: 'center',
    flexShrink: 0,
    overflow: 'hidden',
    cursor: 'pointer',

    ':hover': {
      filter: 'brightness(0.8)',
    },
  },
]);

export const UrlPreviewContent = style([
  DefaultReset,
  {
    padding: config.space.S200,
  },
]);

export const UrlPreviewDescription = style([
  DefaultReset,
  {
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
  },
]);

// YouTube card styles
export const YouTubeThumbnailWrapper = style([
  DefaultReset,
  {
    position: 'relative',
    flexShrink: 0,
    width: toRem(160),
    height: toRem(90),
    overflow: 'hidden',
    cursor: 'pointer',
    backgroundColor: color.Surface.Container,

    ':hover': {
      filter: 'brightness(0.85)',
    },
  },
]);

export const YouTubeThumbnailImg = style([
  DefaultReset,
  {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
    display: 'block',
  },
]);

export const YouTubePlayOverlay = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    pointerEvents: 'none',
  },
]);

export const YouTubePlayButton = style([
  DefaultReset,
  {
    width: toRem(44),
    height: toRem(44),
    borderRadius: '50%',
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#ffffff',
  },
]);

// GitHub card styles
export const GitHubIconWrapper = style([
  DefaultReset,
  {
    flexShrink: 0,
    width: toRem(72),
    minHeight: toRem(72),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: color.SurfaceVariant.OnContainer,
    opacity: 0.8,
    backgroundColor: color.Surface.ContainerHover,
  },
]);

// Generic card favicon styles
export const GenericFaviconWrapper = style([
  DefaultReset,
  {
    display: 'inline-flex',
    alignItems: 'center',
    gap: config.space.S100,
    verticalAlign: 'middle',
  },
]);

export const GenericFaviconImg = style([
  DefaultReset,
  {
    width: toRem(16),
    height: toRem(16),
    flexShrink: 0,
  },
]);

// ---------------------------------------------------------------------------
// Shared media-card thumbnail (VideoCard, Steam, etc.)
// ---------------------------------------------------------------------------

export const MediaThumbnailWrapper = style([
  DefaultReset,
  {
    position: 'relative',
    flexShrink: 0,
    width: toRem(160),
    height: toRem(90),
    overflow: 'hidden',
    cursor: 'pointer',
    backgroundColor: color.Surface.Container,

    ':hover': {
      filter: 'brightness(0.85)',
    },
  },
]);

export const MediaThumbnailImg = style([
  DefaultReset,
  {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
    display: 'block',
  },
]);

export const MediaPlayOverlay = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    pointerEvents: 'none',
  },
]);

export const MediaPlayButton = style([
  DefaultReset,
  {
    width: toRem(44),
    height: toRem(44),
    borderRadius: '50%',
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#ffffff',
  },
]);

// ---------------------------------------------------------------------------
// Shared square artwork thumbnail (Spotify, IMDb poster, Discord icon)
// ---------------------------------------------------------------------------

export const ArtworkThumbnail = style([
  DefaultReset,
  {
    flexShrink: 0,
    width: toRem(72),
    height: toRem(72),
    objectFit: 'cover',
    objectPosition: 'center',
    display: 'block',
  },
]);

// IMDb portrait poster (60 × 90)
export const PosterThumbnail = style([
  DefaultReset,
  {
    flexShrink: 0,
    width: toRem(60),
    height: toRem(90),
    objectFit: 'cover',
    objectPosition: 'center',
    display: 'block',
  },
]);

// ---------------------------------------------------------------------------
// Site-badge shared base
// ---------------------------------------------------------------------------

export const SiteBadge = style([
  DefaultReset,
  {
    display: 'inline-flex',
    alignItems: 'center',
    gap: config.space.S100,
    paddingLeft: config.space.S100,
    paddingRight: config.space.S100,
    paddingTop: '2px',
    paddingBottom: '2px',
    borderRadius: config.radii.R300,
    fontSize: toRem(11),
    fontWeight: 700,
    lineHeight: '1.4',
    letterSpacing: '0.03em',
    flexShrink: 0,
  },
]);

// Individual badge colour overrides (background / foreground)
export const BadgeVimeo = style({
  backgroundColor: '#1ab7ea',
  color: '#ffffff',
});

export const BadgeTwitter = style({
  backgroundColor: '#000000',
  color: '#ffffff',
});

export const BadgeReddit = style({
  backgroundColor: '#ff4500',
  color: '#ffffff',
});

export const BadgeSpotify = style({
  backgroundColor: '#1db954',
  color: '#ffffff',
});

export const BadgeTwitch = style({
  backgroundColor: '#9146ff',
  color: '#ffffff',
});

export const BadgeSteam = style({
  backgroundColor: '#1b2838',
  color: '#c7d5e0',
});

export const BadgeWikipedia = style({
  backgroundColor: color.SurfaceVariant.ContainerLine,
  color: color.SurfaceVariant.OnContainer,
});

export const BadgeDiscord = style({
  backgroundColor: '#5865f2',
  color: '#ffffff',
});

export const BadgeNpm = style({
  backgroundColor: '#cb3837',
  color: '#ffffff',
});

export const BadgeStackOverflow = style({
  backgroundColor: '#f48024',
  color: '#ffffff',
});

export const BadgeImdb = style({
  backgroundColor: '#f5c518',
  color: '#000000',
});

// ---------------------------------------------------------------------------
// Twitch LIVE badge
// ---------------------------------------------------------------------------

export const TwitchLiveBadge = style([
  DefaultReset,
  {
    display: 'inline-flex',
    alignItems: 'center',
    paddingLeft: config.space.S100,
    paddingRight: config.space.S100,
    paddingTop: '2px',
    paddingBottom: '2px',
    borderRadius: config.radii.R300,
    fontSize: toRem(11),
    fontWeight: 700,
    lineHeight: '1.4',
    backgroundColor: '#e91916',
    color: '#ffffff',
    letterSpacing: '0.04em',
  },
]);

// ---------------------------------------------------------------------------
// Icon-wrapper (generic left-side icon block — Twitter, Reddit, Wikipedia…)
// ---------------------------------------------------------------------------

export const IconWrapper = style([
  DefaultReset,
  {
    flexShrink: 0,
    width: toRem(72),
    minHeight: toRem(72),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: color.Surface.ContainerHover,
  },
]);