function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled, withStyle } from '../styles';
import { StyledDivider as StyledDividerBase } from '../divider';
var DEFAULT_TOP_POSITION = '50vh';
export var StyledRoot = styled('div', function (_ref) {
  var $draggable = _ref.$draggable;

  if ($draggable) {
    return {
      height: '100%',
      position: 'relative'
    };
  }

  return {
    height: '100vh',
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    flexDirection: 'column'
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
export var StyledTopContainer = styled('div', function (_ref2) {
  var $draggable = _ref2.$draggable,
      _ref2$$topPosition = _ref2.$topPosition,
      $topPosition = _ref2$$topPosition === void 0 ? DEFAULT_TOP_POSITION : _ref2$$topPosition;
  var baseStyles = {
    height: '100%',
    overflow: 'auto'
  };

  if ($draggable) {
    return _objectSpread(_objectSpread({}, baseStyles), {}, {
      maxHeight: "calc(".concat($topPosition, " + 14px)"),
      maxWidth: '100vh',
      position: 'fixed',
      top: '0px',
      left: '0px',
      right: '0px'
    });
  }

  return _objectSpread(_objectSpread({}, baseStyles), {}, {
    marginBottom: '-14px',
    flexGrow: 1
  });
});
StyledTopContainer.displayName = "StyledTopContainer";
StyledTopContainer.displayName = 'StyledTopContainer';
export var StyledBottomContainer = styled('div', function (_ref3) {
  var $draggable = _ref3.$draggable,
      $topPosition = _ref3.$topPosition,
      $theme = _ref3.$theme;
  var baseStyle = {
    borderTopLeftRadius: $theme.borders.radius500,
    borderTopRightRadius: $theme.borders.radius500,
    backgroundColor: $theme.colors.backgroundPrimary,
    boxShadow: $theme.lighting.shallowAbove
  };
  return $draggable ? _objectSpread({
    position: 'relative',
    top: $topPosition || DEFAULT_TOP_POSITION,
    overflow: 'auto'
  }, baseStyle) : _objectSpread({
    maxHeight: $topPosition || DEFAULT_TOP_POSITION
  }, baseStyle);
});
StyledBottomContainer.displayName = "StyledBottomContainer";
StyledBottomContainer.displayName = 'StyledBottomContainer';
export var StyledHeader = styled('div', function (_ref4) {
  var $theme = _ref4.$theme;
  return {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    paddingTop: $theme.sizing.scale300
  };
});
StyledHeader.displayName = "StyledHeader";
StyledHeader.displayName = 'StyledHeader';
export var StyledGrabber = styled('div', function (_ref5) {
  var $theme = _ref5.$theme;
  return {
    width: '100%',
    paddingRight: 'auto',
    paddingBottom: '12px',
    paddingLeft: 'auto',
    display: 'flex',
    justifyContent: 'center',
    position: 'relative',
    ':after': {
      content: '""',
      height: $theme.sizing.scale100,
      width: $theme.sizing.scale1200,
      background: $theme.colors.borderOpaque,
      borderRadius: '100px',
      margin: '0 auto'
    }
  };
});
StyledGrabber.displayName = "StyledGrabber";
StyledGrabber.displayName = 'StyledGrabber';
export var StyledHeaderGrid = styled('div', function (_ref6) {
  var $theme = _ref6.$theme,
      $hasLeadingAction = _ref6.$hasLeadingAction,
      $hasTrailingAction = _ref6.$hasTrailingAction;
  var hasActionButton = $hasLeadingAction || $hasTrailingAction;
  return _objectSpread({
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    alignItems: 'center',
    paddingRight: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
    paddingLeft: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
    paddingBottom: $theme.sizing.scale200
  }, $theme.direction === 'rtl' ? {
    direction: 'rtl'
  } : {});
});
StyledHeaderGrid.displayName = "StyledHeaderGrid";
StyledHeaderGrid.displayName = 'StyledHeaderGrid';
export var StyledEmptyDiv = styled('div', function (_ref7) {
  var $theme = _ref7.$theme;
  return {
    height: $theme.sizing.scale1200,
    width: $theme.sizing.scale1200
  };
});
StyledEmptyDiv.displayName = "StyledEmptyDiv";
StyledEmptyDiv.displayName = 'StyledEmptyDiv';
export var StyledHeaderTextContainer = styled('div', function (_ref8) {
  var $draggable = _ref8.$draggable,
      $hasTitle = _ref8.$hasTitle,
      $hasDescription = _ref8.$hasDescription,
      $theme = _ref8.$theme;
  var height = $hasTitle && $hasDescription ? $theme.sizing.scale1400 : $hasTitle ? $theme.sizing.scale1200 : $hasDescription ? $theme.sizing.scale900 : $theme.sizing.scale800;
  return {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: $draggable ? "calc(".concat(height, " - 4px)") : height,
    maxWidth: '100%',
    overflow: 'hidden',
    gridColumn: '2 / 3'
  };
});
StyledHeaderTextContainer.displayName = "StyledHeaderTextContainer";
StyledHeaderTextContainer.displayName = 'StyledHeaderTextContainer';
export var StyledTitle = styled('div', function (_ref9) {
  var $theme = _ref9.$theme;
  return _objectSpread({
    color: $theme.colors.contentPrimary,
    maxWidth: 'inherit',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  }, $theme.typography.LabelLarge);
});
StyledTitle.displayName = "StyledTitle";
StyledTitle.displayName = 'StyledTitle';
export var StyledDescription = styled('div', function (_ref10) {
  var $theme = _ref10.$theme;
  return _objectSpread({
    color: $theme.colors.contentSecondary,
    display: '-webkit-box',
    '-webkit-line-clamp': 2,
    '-webkit-box-orient': 'vertical',
    overflow: 'hidden'
  }, $theme.typography.ParagraphMedium);
});
StyledDescription.displayName = "StyledDescription";
StyledDescription.displayName = 'StyledDescription';
export var StyledDivider = withStyle(StyledDividerBase, {
  width: '100%',
  marginTop: 0,
  marginBottom: 0
});
StyledDivider.displayName = "StyledDivider";
StyledDivider.displayName = 'StyledDivider';
export var StyledBody = styled('div', function (_ref11) {
  var $theme = _ref11.$theme;
  return {
    height: '100%',
    overflow: 'auto',
    color: $theme.colors.contentPrimary
  };
});
StyledBody.displayName = "StyledBody";
StyledBody.displayName = 'StyledBody';