'use strict';

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

var _templateObject = _taggedTemplateLiteral(['\n  padding: 0.2em 0 0.2em 2.1em;\n\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  font-weight: 200;\n\n  /* the check */\n  &::before {\n    content: "";\n\n    color: ', ';\n\n    font-family: ', ';\n    font-size: ', ';\n\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: calc(', ' / 2);\n    transform: translate(-50%, -48%);\n    z-index: 1;\n    box-sizing: border-box;\n  }\n\n  /* the box */\n  &::after {\n    content: "";\n\n    background: ', ';\n    border-color: ', ';\n    border-width: ', ';\n    border-style: solid;\n    border-radius: 0.2em;\n\n    width: ', ';\n    height: ', ';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n  }\n\n  ', ':focus + &::after {\n    box-shadow: ', ';\n  }\n  ', ':checked + &::after {\n    background: ', ';\n  }\n  ', ':disabled + & {\n    opacity: 0.5;\n    &::before { opacity: 0.5 }\n  }\n  ', ':checked + &::before {\n    content: "', '";\n  }\n'], ['\n  padding: 0.2em 0 0.2em 2.1em;\n\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  font-weight: 200;\n\n  /* the check */\n  &::before {\n    content: "";\n\n    color: ', ';\n\n    font-family: ', ';\n    font-size: ', ';\n\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: calc(', ' / 2);\n    transform: translate(-50%, -48%);\n    z-index: 1;\n    box-sizing: border-box;\n  }\n\n  /* the box */\n  &::after {\n    content: "";\n\n    background: ', ';\n    border-color: ', ';\n    border-width: ', ';\n    border-style: solid;\n    border-radius: 0.2em;\n\n    width: ', ';\n    height: ', ';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n  }\n\n  ', ':focus + &::after {\n    box-shadow: ', ';\n  }\n  ', ':checked + &::after {\n    background: ', ';\n  }\n  ', ':disabled + & {\n    opacity: 0.5;\n    &::before { opacity: 0.5 }\n  }\n  ', ':checked + &::before {\n    content: "', '";\n  }\n']);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _themeGet2 = _interopRequireDefault(_themeGet);

var _Label = require('../../Label');

var _Label2 = _interopRequireDefault(_Label);

var _CheckboxInput = require('./CheckboxInput');

var _CheckboxInput2 = _interopRequireDefault(_CheckboxInput);

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

var _icons2 = _interopRequireDefault(_icons);

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var SIZE = '22px';
var CHECK_SIZE = '14px';

// Builds off the base label
exports.default = _Label2.default.extend(_templateObject, (0, _themeGet2.default)('colors.text.inverted'), (0, _themeGet2.default)('fonts.icon'), CHECK_SIZE, SIZE, (0, _themeGet2.default)('colors.background.default'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('thicknesses.wide'), SIZE, SIZE, _CheckboxInput2.default, (0, _themeGet2.default)('shadows.focusOutline'), _CheckboxInput2.default, (0, _themeGet2.default)('colors.primary.dark'), _CheckboxInput2.default, _CheckboxInput2.default, (0, _icons2.default)('checkmark'));