🦉 video preview support

src/owl/components/YouTubeEmbedCard.css.tsx

@@ -0,0 +1,83 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const YouTubeCard = style([
+  DefaultReset,
+  {
+    display: 'inline-block',
+    width: '100%',
+    maxWidth: toRem(480),
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    backgroundColor: '#000',
+  },
+]);
+
+export const YouTubeFrame = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    aspectRatio: '16 / 9',
+  },
+]);
+
+export const YouTubeThumbButton = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    border: 'none',
+    background: '#000',
+    cursor: 'pointer',
+    overflow: 'hidden',
+
+    ':hover': {
+      filter: 'brightness(1.05)',
+    },
+  },
+]);
+
+export const YouTubeThumbImg = style([
+  DefaultReset,
+  {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+]);
+
+export const YouTubePlayOverlay = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: toRem(64),
+    height: toRem(64),
+    borderRadius: '50%',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    pointerEvents: 'none',
+  },
+]);
+
+export const YouTubeIframe = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    border: 'none',
+  },
+]);