/**
 * @mergeTarget
 * @module Src/Components/CustomInput/CustomSwitch
 */

import { LisioCSSRules } from "@lisio/lisio-engine";

/**
 * Custom switch CSS
 * @source
 */
const customSwitchStyles: LisioCSSRules = {
  "div.lisio-custom-switch": {
    position: "relative",
    // width: "32px",
    width: "24px",
    cursor: "pointer",
  },
  "div.lisio-custom-switch input.lisio-custom-input": {
    position: "absolute",
  },
  "button div.lisio-switch-round": {
    display: "flex",
    "align-items": "center",
    // width: "32px",
    // height: "18px",
    width: "20px",
    height: "20px",
    "background-color": "var(--lisio-background-primary)",
    // "border-radius": "var(--lisio-border-radius-large)",
    "border-radius": "30%",
    border: "2px solid var(--lisio-color-grey)",
  },
  "button input:checked + div.lisio-switch-round::before": {
    content: "''",
    position: "absolute",
    "background-color": "var(--lisio-color-primary)",
    height: "5px",
    width: "17px",
    "border-radius": "1000px 0px 0px 1000px",
    transform: "translate(-6px, -1px) rotate(45deg)",
  },
  "button input:checked + div.lisio-switch-round::after": {
    content: "''",
    position: "absolute",
    "background-color": "var(--lisio-color-primary)",
    height: "5px",
    width: "27px",
    "border-radius": "0px 1000px 1000px 0px",
    transform: " translate(2px, -4px) rotate(-45deg)",
  },
  // "button:hover input:checked + div.lisio-switch-round::after": {
  //   "background-color": "black"
  // },
  // "button div.lisio-switch-round::before": {
  //   position: "absolute",
  //   content: "''",
  //   height: "15px",
  //   width: "15px",
  //   left: "3px",
  //   top: "3px",
  //   "background-color": "var(--lisio-color-grey)",
  //   "-webkit-transition": "none !important",
  //   "border-radius": "50%",
  //   transition: "none !important",
  // },
  // "button input:checked + div.lisio-switch-round::before": {
  //   "-webkit-transform": "translateX(15px)",
  //   "-ms-transform": "translateX(15px)",
  //   transform: "translateX(15px)",
  //   "background-color": "white",
  // },
  "button input:checked + div.lisio-switch-round": {
    transition: "none",
    "border-color": "var(--lisio-color-primary)",
  },
  // "button input:checked + div.lisio-switch-round": {
  //   "background-color": "var(--lisio-color-active)",
  //   transition: "none",
  //   "border-color": "var(--lisio-color-active)",
  // },
};

export { customSwitchStyles };