'use strict';

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

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var SidebarLayout = _styledComponents2.default.div.withConfig({ displayName: 'SidebarLayout' }).withConfig({
  displayName: 'SidebarLayout__SidebarLayout'
})(['display: flex;flex-direction: row;align-items: stretch;margin: 0;padding: 0;& > *:first-child {flex: 3;}& > *:last-child {flex: 6;background: ', ';border-left: 1px solid ', ';margin-left: -1px;}'], function (_ref) {
  var theme = _ref.theme;
  return theme.colors.gutter;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.borderLight;
});

SidebarLayout.usage = '\n# SidebarLayout\n\nDoes some simple stuff with flexbox to layout two columns. Assumes that it only has two children. We could extend this with media queries at some point to make it more useful.\n\n```\n<SidebarLayout>\n  <ASidebar/>\n  <SomeContent/>\n</SidebarLayout>\n```\n';

exports.default = SidebarLayout;