"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Control = exports.Wrapper = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const Colors_1 = require("../../../core/Colors");
exports.Wrapper = styled_1.default.div `
	width: 50px;
	height: 30px;
	border-radius: 25px;
	position: relative;
	box-sizing: border-box;
	padding: 3px;
	background-color: ${({ backgroundColor }) => backgroundColor};
	cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
`;
exports.Control = styled_1.default.div `
	width: 24px;
	height: 24px;
	position: relative;
	background-color: ${Colors_1.basicColors.white};
	border-radius: 50%;
	transition: all 0.4s ease-out;
	left: ${({ active }) => (active ? '20px' : 0)};
`;
