'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 appearAnimation = (0, _styledComponents.keyframes)(['from {opacity: 0;transform: translateY(-30px);}to {opacity: 1;transform: translateY(0);}']);

var ScrollBox = _styledComponents2.default.div.withConfig({ displayName: 'ScrollBox' }).withConfig({
  displayName: 'ScrollBox__ScrollBox'
})(['display: flex;flex-direction: column;overflow-y: auto;max-height: 100%;', '&::-webkit-scrollbar {width: 0.5em;height: 0.5em;}&::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.25);}&::-webkit-scrollbar-track {background: ', ';}'], function (_ref) {
  var animateIn = _ref.animateIn;

  if (animateIn) {
    return (0, _styledComponents.css)(['animation: ', ' 0.5s ease;'], appearAnimation);
  }

  return '';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.gutter;
});

ScrollBox.defaultProps = {
  animateIn: true
};

ScrollBox.usage = '\n# ScrollBox\n\nScrollBox lays out content vertically via flexbox, and allows its content to scroll vertically. It also includes a little animation as content appears. You can turn this off with `animateIn`.\n\n```\n<ScrollBox animateIn={false}>\n  <!-- content -->\n</ScrollBox>\n```\n';

exports.default = ScrollBox;