'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _icons = require('../helpers/icons');

var _icons2 = _interopRequireDefault(_icons);

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

var SIZE = '22px';

var HiddenInput = exports.HiddenInput = _styledComponents2.default.input.withConfig({
  displayName: 'Checkbox__HiddenInput'
})(['margin-left: -9999px;&:focus + label::after {box-shadow: ', ';}'], function (_ref) {
  var theme = _ref.theme;
  return theme.shadows.focusOutline;
});

var Checkbox = _styledComponents2.default.label.withConfig({
  displayName: 'Checkbox__Checkbox'
})(['cursor: pointer;position: relative;top: 50%;font-size: 14px;padding: ', ';user-select: none;float: left;font-size: ', ';font-weight: ', ';letter-spacing: ', ';color: ', ';transform: translateY(-50%);/* the check */&::before {content: ', ';color: ', ';font-family: \'Bandwidth\';font-size: 1em;display: block;position: absolute;top: 50%;left: calc(', ' / 2);transform: translate(-50%, -48%);z-index: 1;}/* the box */&::after {content: "";background: ', ';border: ', ';border-radius: 0.2em;width: ', ';height: ', ';position: absolute;top: 50%;left: 0;transform: translateY(-50%);transition: all 0.2s ease;}', ''], function (_ref2) {
  var theme = _ref2.theme;
  return theme.checkbox.labelPadding;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.label.fontSize;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.label.fontWeight;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.label.letterSpacing;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.label.fg;
}, function (_ref7) {
  var active = _ref7.active;
  return active ? '"' + (0, _icons2.default)('checkmark') + '"' : '""';
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.checkbox.checkFG;
}, SIZE, function (_ref9) {
  var theme = _ref9.theme,
      active = _ref9.active;
  return active ? theme.checkbox.fullBG : theme.checkbox.emptyBG;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.checkbox.border;
}, SIZE, SIZE, function (_ref11) {
  var disabled = _ref11.disabled,
      theme = _ref11.theme;
  return disabled ? (0, _styledComponents.css)(['opacity: ', ';&::before { opacity: ', '; }'], theme.checkbox.disabledOpacity, theme.checkbox.disabledOpacity) : '';
});

Checkbox.usage = '\n# Checkbox\n\nA simple checkbox input. The default export is the label to use.\n\nAlso exports `HiddenInput`, which is the actual <input> element.\n\nIt\'s probably easier to use `fields/CheckboxField`, which assembles these for you.\n\n```\n<HiddenInput value={true} id="a" />\n<Checkbox for="a" />\n```\n';

exports.default = Checkbox;