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

export const VideoContainer = style([
  DefaultReset,
  {
    position: 'relative',
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
]);

export const VideoControlsOverlay = style([
  DefaultReset,
  {
    position: 'absolute',
    top: config.space.S200,
    right: config.space.S200,
    display: 'flex',
    flexDirection: 'row',
    gap: config.space.S200,
    zIndex: 10,
    pointerEvents: 'auto',
    opacity: 1,
    transition: 'opacity 0.15s ease',
  },
]);

export const VideoControlsOverlayHidden = style({
  opacity: 0,
  pointerEvents: 'none',
});
