ultra-design/lib/divider/divider-styles.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject, _templateObject2, _templateObject3;
var dividerStyles = function dividerStyles(props) {
  var vertical = props.vertical;
  var _props$theme$props$th = props.theme[props.theme.mode],
      textColor = _props$theme$props$th.textColor,
      borderColor = _props$theme$props$th.borderColor,
      backgroundColor = _props$theme$props$th.backgroundColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    max-width: 100%;\n    background-color: ", ";\n    position: relative;\n    font-size: 14px;\n    ", ";\n\n    .ultra-divider__text {\n      background-color: ", ";\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      min-height: 100%;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      transform: translate(-50%, -50%);\n      padding: 0 0.75em;\n      font-size: inherit;\n      font-weight: bold;\n      color: ", ";\n    }\n  "])), borderColor, vertical ? react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n          display: inline-flex;\n          width: 1px;\n          height: 12px;\n          margin: 0 8px;\n        "]))) : react.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n          height: 1px;\n          margin: 8px 0;\n        "]))), backgroundColor, textColor);
};

exports.dividerStyles = dividerStyles;