import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  /* widget-normalize use class selector to reset css */\n  && {\n    a {\n      color: #333;\n    }\n  }\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  ", "\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  ", "\n  height: ", "px;\n  line-height: ", "px;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  ", "\n  overflow: hidden;\n  ", " {\n    flex-grow: ", ";\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  /* widget-normalize use class selector to reset css */\n  && {\n    ", ";\n    font-size: 14px;\n    font-weight: 400;\n    color: #9b9ea0;\n    padding: 0 16px;\n    ", ";\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  /* widget-normalize use class selector to reset css */\n  && {\n    ", ";\n    color: blue;\n    font-size: 28px;\n    font-weight: 500;\n    ", ";\n    /* \u8BBE\u7F6Eoverflow: hidden\u5BF9\u4E8Eflex\u5BBD\u5EA6\u7684\u8BA1\u7B97\u5F88\u91CD\u8981\uFF0C\u5C24\u5176\u662F\u5728title\u5F88\u957F\u7684\u60C5\u51B5\u4E0B\u3002\n    \u5B83\u8BA9\u6B64\u5BB9\u5668\u5728\u8BA1\u7B97flex\u5BBD\u5EA6\u7684\u65F6\u5019\u4E0D\u8003\u8651\u5176\u5B50\u8282\u70B9\uFF0C\u4EC5\u4EC5\u8003\u8651\u5269\u4F59\u5BBD\u5EA6\u3002 */\n    overflow-x: hidden;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: ", "px;\n  line-height: ", "px;\n  box-sizing: border-box;\n  vertical-align: middle;\n  margin: 0;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import styled, { css } from 'styled-components';
import Partial from './Partial';
import { flexContainer, flexItem } from './utils';
export var headerHeight = 40;
var titleStyles = css(_templateObject(), headerHeight, headerHeight);
export var Title = styled.h3(_templateObject2(), titleStyles, flexItem());
export var SubTitle = styled.h4(_templateObject3(), titleStyles, flexItem({
  flexShrink: 0
}));
/**
 * 仅当Title被截断时，我们允许Main和Title区域grow。
 * 如果在Title没被截断时，我们允许它们grow：
 * - Extra会永远靠右
 * - SubTitle就无法紧挨Title
 */

export var Main = styled.div(_templateObject4(), function (_ref) {
  var shouldGrow = _ref.shouldGrow;
  return flexItem({
    flexGrow: shouldGrow ? 1 : 0
  });
}, flexContainer({
  flexWrap: 'nowrap',
  alignItems: 'center'
}), Title, function (_ref2) {
  var shouldGrow = _ref2.shouldGrow;
  return shouldGrow ? 1 : 0;
});
export var Extra = styled.div(_templateObject5(), flexItem({
  flexShrink: 0
}));
var Header = styled(Partial)(_templateObject6(), function (_ref3) {
  var alignLeft = _ref3.alignLeft;
  return flexContainer({
    justifyContent: alignLeft ? 'flex-start' : 'space-between'
  });
}, headerHeight, headerHeight);
export default Header;
export var Topbar = styled(Partial)(_templateObject7(), function (_ref4) {
  var alignLeft = _ref4.alignLeft;
  return flexContainer({
    justifyContent: alignLeft ? 'flex-start' : 'space-between',
    alignItems: 'center'
  });
});
export var TopbarMain = styled.div(_templateObject8(), flexItem());
export var TopbarExtra = styled.div(_templateObject9(), flexItem());