"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@material-ui/core/styles");
var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
var _i18n = require("../../../../../Framework/i18n");
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var styles = function styles() {
  return {
    LandscapeFullscreen: {
      display: 'none'
    },
    '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
      LandscapeFullscreen: {
        display: 'flex',
        position: 'absolute',
        top: 25,
        width: '100%',
        zIndex: 6,
        margin: '-8px'
      },
      ContentWrapper: {
        display: 'flex',
        backgroundColor: 'rgba(255,255,255,0.8)',
        alignItems: 'center',
        margin: '0 auto',
        padding: '0 8px',
        '& span': {
          display: 'block'
        }
      },
      iconRotate: {
        fontSize: 28,
        margin: 8
      }
    }
  };
};
var LandscapeInformation = function LandscapeInformation(_ref) {
  var classes = _ref.classes;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.LandscapeFullscreen
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.ContentWrapper
  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
    className: classes.iconRotate
  }, "screen_rotation"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: "body1"
  }, (0, _i18n.t)('rotationInstructions'))));
};
var _default = exports["default"] = (0, _styles.withStyles)(styles, {
  name: 'LandscapeInformation'
})(LandscapeInformation);