"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleSwitch = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Track = styled_components_1.default.div `
  width: 44px;
  height: 22px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 11px;
  cursor: ${(p) => (!p.disabled ? 'pointer' : 'auto')};
  display: inline-block;
  background: ${(p) => p.active
    ? !p.disabled
        ? 'var(--primary-color)'
        : 'rgba(0, 0, 0, 0.25)'
    : '#ccc'};
`;
const Knob = styled_components_1.default.div `
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease-in-out;
  transform: translateX(${(p) => (p.active ? '22px' : 0)});
`;
const ToggleSwitch = ({ on, onClick, disabled }) => (react_1.default.createElement(Track, { active: on, onClick: onClick, disabled: disabled },
    react_1.default.createElement(Knob, { active: on })));
exports.ToggleSwitch = ToggleSwitch;
//# sourceMappingURL=index.js.map