'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var HiddenInput = exports.HiddenInput = _styledComponents2.default.input.withConfig({
  displayName: 'Toggle__HiddenInput'
})(['margin: -9999px;&:focus + label::before {box-shadow: ', ';}'], function (_ref) {
  var theme = _ref.theme;
  return theme.toggle.focusShadow;
});

var Toggle = _styledComponents2.default.label.withConfig({
  displayName: 'Toggle__Toggle'
})(['cursor: pointer;position: relative;top: 50%;padding: ', ';float: left;user-select: none;transition: all 0.2s ease;line-height: ', ';font-family: ', ';font-weight: ', ';transform: translateY(-50%);&::before {content: \'\';background: ', ';border: ', ';border-radius: 2em;width: ', ';height: ', ';cursor: pointer;display: block;position: absolute;left: 0;top: 50%;transform: translateY(-50%);transition: all 0.2s ease;}&::after {content: \'\';background: ', ';border: ', ';border-radius: 2em;width: ', ';height: ', ';position: absolute;top: 50%;transform: translateY(-50%);left: ', ';display: block;transition: all 0.2s ease;}&:hover::before,&:hover::after {border: ', ';}&:hover::before {background: ', ';}&:disabled::before, &:disabled::after {border: ', ';background: ', ';}'], function (_ref2) {
  var theme = _ref2.theme;
  return theme.toggle.padding;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.toggle.height;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.toggle.fontFamily;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.toggle.fontWeight;
}, function (_ref6) {
  var theme = _ref6.theme,
      active = _ref6.active;
  return active ? theme.toggle.activeBG : theme.toggle.bg;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.toggle.border;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.toggle.width;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.toggle.height;
}, function (_ref10) {
  var theme = _ref10.theme,
      active = _ref10.active;
  return active ? theme.toggle.activeFG : theme.toggle.fg;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.toggle.border;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.toggle.height;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.toggle.height;
}, function (_ref14) {
  var active = _ref14.active;
  return active ? '1.7em' : 0;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.toggle.hoverBorder;
}, function (_ref16) {
  var theme = _ref16.theme,
      active = _ref16.active;
  return active ? theme.toggle.hoverBG : theme.toggle.bg;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.toggle.disabledBorder;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.toggle.disabledBG;
});

Toggle.usage = '\n# Toggle\n\nA simple toggle 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/ToggleField`, which assembles these for you.\n\n```\n<HiddenInput value={true} id="a" />\n<Toggle for="a" />\n```\n';

exports.default = Toggle;