"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.videoStyle = void 0;

var _ThemeProvider = require("../ThemeProvider");

var videoStyle = function videoStyle(props, theme) {
  return {
    style: {
      position: 'relative',
      overflow: 'hidden',
      backgroundSize: 'cover',
      maxWidth: '100%',
      height: 'auto',
      minHeight: '200px',
      width: 'fit-content'
    },
    stuck: {
      zIndex: 100,
      maxWidth: '350px',
      maxHeight: '200px',
      bottom: 'spacing',
      right: 4,
      position: 'fixed',
      borderRadius: 2,
      boxShadow: 'toast'
    },
    full: {
      width: '100%',
      maxHeight: 'calc(100vh - 8rem - 48px)',
      height: 0,
      paddingBottom: 'calc(100vh - 8rem - 48px)',
      mx: [4, 4, '8rem']
    },
    iframe: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    },
    "native": {
      width: '100%',
      height: '100%',
      background: 'black',
      position: 'absolute',
      top: 0,
      left: 0
    }
  };
};

exports.videoStyle = videoStyle;

var useVideoStyle = function useVideoStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].video ? theme['styles'].video(props, theme) : videoStyle(props, theme);
  return {
    root: styles.style,
    stuck: styles.stuck,
    full: styles.full,
    iframe: styles.iframe,
    "native": styles["native"]
  };
};

var _default = useVideoStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map