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

export const ExternalVideoCard = style([
  DefaultReset,
  {
    display: 'inline-block',
    maxWidth: toRem(480),
    borderRadius: config.radii.R300,
    overflow: 'hidden',
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    backgroundColor: color.SurfaceVariant.Container,
  },
]);

export const ExternalVideo = style([
  DefaultReset,
  {
    display: 'block',
    width: '100%',
    maxHeight: toRem(400),
    backgroundColor: '#000',
  },
]);