'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactEmotion = require('react-emotion');

var _reactEmotion2 = _interopRequireDefault(_reactEmotion);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var IphoneX = (0, _reactEmotion2.default)(function (_ref) {
  var children = _ref.children,
      className = _ref.className;

  return _react2.default.createElement(
    'div',
    { className: (0, _reactEmotion.cx)('react-device-kit', className) },
    _react2.default.createElement(
      'div',
      { className: 'marvel-device iphone-x' },
      _react2.default.createElement(
        'div',
        { className: 'notch' },
        _react2.default.createElement('div', { className: 'camera' }),
        _react2.default.createElement('div', { className: 'speaker' })
      ),
      _react2.default.createElement('div', { className: 'top-bar' }),
      _react2.default.createElement('div', { className: 'sleep' }),
      _react2.default.createElement('div', { className: 'bottom-bar' }),
      _react2.default.createElement('div', { className: 'volume' }),
      _react2.default.createElement(
        'div',
        { className: 'overflow' },
        _react2.default.createElement('div', { className: 'shadow shadow--tr' }),
        _react2.default.createElement('div', { className: 'shadow shadow--tl' }),
        _react2.default.createElement('div', { className: 'shadow shadow--br' }),
        _react2.default.createElement('div', { className: 'shadow shadow--bl' })
      ),
      _react2.default.createElement('div', { className: 'inner-shadow' }),
      _react2.default.createElement(
        'div',
        { className: 'screen' },
        children
      )
    )
  );
})({
  '.marvel-device, .marvel-device div, :before, :after': {
    transition: 'all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)'
  },
  '.screen': {
    position: 'relative',
    '.lock-screen-notification': {
      position: 'absolute',
      left: 8,
      right: 8,
      top: 205
    }
  }
}); /* eslint-disable arrow-body-style */


IphoneX.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes2.default.node
} : {};
IphoneX.defaultProps = {
  children: null
};

exports.default = IphoneX;