@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 {
    cursor: 'pointer',
    height: '100%',
    left: '49.9%',
    minHeight: '102%',
    minWidth: '101%',
    objectFit: 'cover',
    position: 'absolute',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100%',
    opacity: '1',
    background: 'transparent',
    borderRadius: '1rem'
  };
};
export var ContainerFab = styled(Box)(function () {
  return {
    position: 'fixed',
    right: 50,
    bottom: 50
  };
});
export var VideoModalWrapper = styled(Box)(function (_ref) {
  var theme = _ref.theme;
  return _defineProperty({
    backgroundColor: theme.palette.background["default"],
    borderRadius: theme.spacing(3),
    boxShadow: theme.shadows[1],
    boxSizing: 'border-box',
    height: '630px',
    left: 'initial',
    position: 'fixed',
    bottom: '15px',
    right: '15px',
    top: 'initial',
    width: '360px',
    zIndex: theme.zIndex.modal
  }, theme.breakpoints.down('md'), {
    position: 'fixed',
    maxHeight: '100%',
    maxWidth: '100%',
    width: '100%',
    top: 0,
    left: 0,
    overflow: 'hidden',
    borderRadius: 0,
    bottom: 0,
    height: '100%'
  });
});
export var VideoEmbed = styled(Box)(function (_ref3) {
  var theme = _ref3.theme;
  return _defineProperty({
    width: '100%',
    height: '100%',
    boxSizing: 'border-box',
    borderRadius: theme.spacing(3)
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
export var ContainerVideo = styled(Box)(function (_ref5) {
  var theme = _ref5.theme;
  return _defineProperty({
    position: 'relative',
    background: 'black',
    height: '100%',
    overflow: 'hidden',
    userSelect: 'none',
    width: '100%',
    borderRadius: '1rem'
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
export var ContainerText = styled(Box)(function () {
  return {
    padding: '50px 24px 24px',
    position: 'absolute',
    margin: '0px',
    left: '0px',
    top: '0px',
    width: '100%',
    height: '100%',
    pointerEvents: 'none'
  };
});
export var ContainerForm = styled(Box)(function () {
  return {
    padding: '0px 16px',
    transition: 'all 0.3s ease-out 0s',
    width: '100%',
    height: '100%'
  };
});
export var Form = styled(Box)(function () {
  return {
    maxHeight: '228px',
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    transition: 'all 0.3s ease-in-out 0s',
    width: '100%'
  };
});
export var BoxForm = styled(Box)(function () {
  return {
    bottom: '0px',
    left: '0px',
    // pointerEvents: 'none',
    position: 'absolute',
    // height: '100%',
    width: '100%',
    right: '0px',
    zIndex: 10
  };
});
export var ContainerButtonForm = styled(Box)(function () {
  return {
    flexGrow: '2',
    height: 'auto',
    marginBottom: '16px',
    outline: 'none',
    position: 'relative',
    pointerEvents: 'initial',
    width: '100%',
    margin: '8px auto'
  };
});