import React from 'react';
import styled from 'styled-components/macro';
const Track = styled.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.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)});
`;
export const ToggleSwitch = ({ on, onClick, disabled }) => (React.createElement(Track, { active: on, onClick: onClick, disabled: disabled },
    React.createElement(Knob, { active: on })));
//# sourceMappingURL=index.js.map