"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledToggle = exports.StyledContainer = void 0;
const theme_1 = require("../../theme");
const StyledToggle = (0, theme_1.styled)("div", {
    boxSizing: "border-box",
    borderRadius: "100px",
    display: "inline-block",
    width: (0, theme_1.dimensionsPxToRem)(44),
    height: (0, theme_1.dimensionsPxToRem)(44),
    border: `${(0, theme_1.borderPxToRem)(1)} solid $orange1Darker`,
    background: "$orange1",
    transition: "transform 200ms, background-color 200ms, border-color 200ms",
    transform: `translateX(${(0, theme_1.dimensionsPxToRem)(48)})`,
});
exports.StyledToggle = StyledToggle;
const StyledContainer = (0, theme_1.styled)("label", {
    "display": "inline-flex",
    "alignItems": "center",
    "border": "1px solid #ccc",
    "borderRadius": "100px",
    "position": "relative",
    "lineHeight": 0,
    "width": (0, theme_1.dimensionsPxToRem)(110),
    "height": (0, theme_1.dimensionsPxToRem)(62),
    "paddingLeft": (0, theme_1.dimensionsPxToRem)(8),
    "boxSizing": "border-box",
    "& input": {
        position: "absolute",
        width: 0,
        height: 0,
        overflow: "hidden",
        visibility: "hidden",
        [`&:not(:checked) + ${StyledToggle.toString()}`]: {
            transform: "translateX(0)",
            background: "$toggleHandleBg",
            borderColor: "$toggleHandleBorder",
        },
        [`&[data-undetermined=true] + ${StyledToggle.toString()}`]: {
            transform: `translateX(${(0, theme_1.dimensionsPxToRem)(24)})`,
            background: "$toggleHandleBorder",
            borderColor: "$toggleHandleBorder",
        },
        [`&:disabled:checked + ${StyledToggle.toString()}`]: {
            borderColor: "$toggleHandleBorderDisabled",
            background: "$toggleHandleBgDisabled",
        },
    },
    "variants": {
        disabled: {
            true: {
                background: "$toggleBgDisabled",
            },
        },
    },
});
exports.StyledContainer = StyledContainer;
//# sourceMappingURL=Toggle.styled.js.map