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,
  },
]);