"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = __importDefault(require("styled-components"));
var css = styled_components_1.default.div;
exports.default = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n   .checkbox-container {\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n   }\n\n   .switch-btn-container {\n      display: inline-flex;\n      vertical-align: top;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      width: 40px;\n      height: 20px;\n      background: grey;\n      background: ", ";\n      border-radius: 40px;\n      position: relative;\n      transition: background-color 0.2s;\n      margin-right: 5px;\n\n      .switch-button {\n         content: '';\n         position: absolute;\n         top: 2px;\n         left: 2px;\n         width: 16px;\n         height: 16px;\n         border-radius: 20px;\n         transition: 0.2s;\n         background: #fff;\n         box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n      }\n\n      input {\n         display: none;\n\n         &:checked + .switch-button {\n            left: calc(100% - 2px);\n            transform: translateX(-100%);\n         }\n      }\n\n      &.disabled {\n         opacity: 0.7;\n\n         &:hover {\n            cursor: not-allowed !important;\n         }\n      }\n   }\n\n   .title {\n      align-self: center;\n      padding-left: 5px;\n\n      &.disabled {\n         opacity: 0.6;\n         cursor: not-allowed !important;\n\n         &:hover {\n            cursor: not-allowed !important;\n         }\n      }\n   }\n\n   .has-error {\n      border-color: ", " !important;\n   }\n\n   .error-input {\n      color: ", ";\n      text-align: left;\n      font-weight: 600;\n      margin: 0px;\n      padding: 0px;\n      font-size: 13px;\n      margin-top: 2px;\n      margin-bottom: 10px;\n   }\n"], ["\n   .checkbox-container {\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n   }\n\n   .switch-btn-container {\n      display: inline-flex;\n      vertical-align: top;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      width: 40px;\n      height: 20px;\n      background: grey;\n      background: ", ";\n      border-radius: 40px;\n      position: relative;\n      transition: background-color 0.2s;\n      margin-right: 5px;\n\n      .switch-button {\n         content: '';\n         position: absolute;\n         top: 2px;\n         left: 2px;\n         width: 16px;\n         height: 16px;\n         border-radius: 20px;\n         transition: 0.2s;\n         background: #fff;\n         box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n      }\n\n      input {\n         display: none;\n\n         &:checked + .switch-button {\n            left: calc(100% - 2px);\n            transform: translateX(-100%);\n         }\n      }\n\n      &.disabled {\n         opacity: 0.7;\n\n         &:hover {\n            cursor: not-allowed !important;\n         }\n      }\n   }\n\n   .title {\n      align-self: center;\n      padding-left: 5px;\n\n      &.disabled {\n         opacity: 0.6;\n         cursor: not-allowed !important;\n\n         &:hover {\n            cursor: not-allowed !important;\n         }\n      }\n   }\n\n   .has-error {\n      border-color: ", " !important;\n   }\n\n   .error-input {\n      color: ", ";\n      text-align: left;\n      font-weight: 600;\n      margin: 0px;\n      padding: 0px;\n      font-size: 13px;\n      margin-top: 2px;\n      margin-bottom: 10px;\n   }\n"])), function (props) { var _a; return (props.checked ? (_a = props.color) !== null && _a !== void 0 ? _a : props.theme.primary : '#ddd'); }, function (props) { return props.theme.red; }, function (props) { return props.theme.red; });
var templateObject_1;
//# sourceMappingURL=Switch.style.js.map