@wulperstudio/cms/organisms/VideoModalCta/styled.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { Box, styled } from '@mui/material';
export var videoCustom = function videoCustom() {
  return {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100%',
    height: '100%',
    minWidth: '100%',
    minHeight: '100%',
    objectFit: 'cover',
    borderRadius: 3,
    opacity: 1,
    background: 'transparent',
    cursor: 'pointer'
  };
};
export var VideoModalWrapper = styled(Box)(function (_ref) {
  var theme = _ref.theme;
  return _defineProperty({
    position: 'fixed',
    bottom: 20,
    right: 20,
    width: 360,
    height: 640,
    backgroundColor: theme.palette.background["default"],
    borderRadius: theme.spacing(3),
    boxShadow: theme.shadows[24],
    zIndex: theme.zIndex.modal,
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  }, theme.breakpoints.down('md'), {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    maxWidth: '100%',
    maxHeight: '100%',
    borderRadius: 0
  });
});
export var VideoEmbed = styled(Box)(function (_ref3) {
  var theme = _ref3.theme;
  return _defineProperty({
    position: 'relative',
    width: '100%',
    height: '100%',
    borderRadius: theme.spacing(3),
    overflow: 'hidden'
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
export var ContainerVideo = styled(Box)(function (_ref5) {
  var theme = _ref5.theme;
  return _defineProperty({
    position: 'relative',
    width: '100%',
    height: '100%',
    background: '#000',
    overflow: 'hidden',
    userSelect: 'none',
    borderRadius: theme.spacing(3),
    '&::before': {
      content: '""',
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: '40%',
      background: 'linear-gradient(to top, rgba(0,0,0,0.8), transparent)',
      zIndex: 1,
      pointerEvents: 'none'
    }
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
export var BoxForm = styled(Box)(function () {
  return {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    width: '100%',
    zIndex: 2,
    pointerEvents: 'none',
    '& > *': {
      pointerEvents: 'auto'
    }
  };
});
export var ContainerForm = styled(Box)(function (_ref7) {
  var theme = _ref7.theme;
  return _defineProperty({
    padding: theme.spacing(2),
    width: '100%',
    transition: 'all 0.3s ease-in-out'
  }, theme.breakpoints.down('md'), {
    padding: theme.spacing(1.5)
  });
});