'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

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

exports.default = _styledComponents2.default.div.withConfig({
  displayName: 'DragGroupDropAreaContent'
})(['position:relative;min-height:8px;&::before{content:\'\';position:absolute;left:0;right:0;top:0;bottom:0;border-width:', ';border-style:solid;border-color:', ';opacity:', ';pointer-events:none;transition:opacity 0.2s ease;z-index:1;background:', ';}&::after{display:', ';content:\'Drop here\';text-transform:uppercase;color:', ';font-size:1em;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}'], (0, _themeGet2.default)('thicknesses.wide'), (0, _themeGet2.default)('colors.gray.light'), function (props) {
  return props.canDrop ? 1 : 0;
}, function (_ref) {
  var isOver = _ref.isOver;
  return isOver ? 'var(--colors-gray-light)' : 'var(--colors-background-default)';
}, function (_ref2) {
  var canDrop = _ref2.canDrop;
  return canDrop ? 'block' : 'none';
}, (0, _themeGet2.default)('colors.gray.medium'));