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

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

/**
 * Custom range CSS
 * @source
 */
const customRangeStyles: LisioCSSRules = {
  "div.lisio-custom-range": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "stretch",
    width: "98%",
    padding: "8px",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    border: "1px solid transparent",
  },
  "div.lisio-custom-range > .lisio-texts-container": {
    "margin-bottom": "10px",
    "flex-direction": "row",
    "justify-content": "start",
    "align-items": "center",
    gap: "20px"
  },
  "div.lisio-custom-range.active": {
    border: "1px solid var(--lisio-color-active)",
  },
  "div.lisio-custom-range.active label": {
    "font-weight": "bold",
  },
  "div.lisio-custom-range .range-input-container": {
    width: "calc( 100% - 88px )",
    height: "44px",
    position: "relative",
    display: "flex",
    "align-items": "center"
  },
  "div.custom-range-inputs-container": {
    "flex-direction": "row !important",
    "align-items": "center"
  },
  "div.lisio-custom-range input": {
    width: "100%",
    "-webkit-appearance": "none",
    appearance: "none",
    margin: "0px !important",
    position: "relative",
    background: "transparent !important",
    "z-index": "1",
    cursor: "pointer",
  },
  "div.lisio-custom-range .range-input-container::after": {
    content: "''",
    width: "calc( var(--cursor-position) + 1px )",
    position: "absolute",
    height: "12px",
    top: "50%",
    transform: "translateY(-50%)",
    left: "-1px",
    background: "#a1a1a1"
  },
  "div.lisio-custom-range .range-input-container::before": {
    content: `url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10L26 15.2083L21 20' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M9 10L4 15.2083L9 20' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A")`,
    width: "30px",
    height: "30px",
    position: "absolute",
    top: "22px",
    left: "var(--cursor-position)",
    transform: "translate(-50%, -50%)",
    "z-index": "2",
    "pointer-events": "none"
  },
  "div.lisio-custom-range input::-webkit-slider-runnable-track": {
    "border-radius": "var(--lisio-border-radius-extra-large)",
    height: "5px",
    "background-color": "#a1a1a1",
  },
  "div.lisio-custom-range button.range-input-reset-button": {
    width: "44px !important",
    height: "44px !important",
    padding: "10px !important",
    "border": "1px solid var(--lisio-background-color-primary) !important",
    color: "var(--lisio-color-red)"
  },
  "div.lisio-custom-range button.range-input-reset-button:hover, div.lisio-custom-range button.range-input-reset-button:focus-visible": {
    "border": "1px solid var(--lisio-color-red) !important",
    "background": "var(--lisio-color-red) !important",
  },
  "div.lisio-custom-range button.range-input-reset-button:hover svg>*, div.lisio-custom-range button.range-input-reset-button:focus-visible svg>*": {
    color: "white !important"
  },
  "div.lisio-custom-range input::-moz-range-track": {
    "border-radius": "var(--lisio-border-radius-extra-large)",
    height: "44px"
  },
  "div.lisio-custom-range input::-webkit-slider-thumb": {
    "-webkit-appearance": "none",
    "appearance": "none",
    "background-color" : "var(--lisio-background-color-secondary)",
    "border": "1px solid #a1a1a1",
    "border-radius" : "var(--lisio-border-radius-extra-large)",
    height: "44px",
    width: "44px",
    "margin-top": "-21px"
  },
  "div.lisio-custom-range input::-moz-range-thumb": {
    "-webkit-appearance": "none",
    "appearance": "none",
    "background-color" : "var(--lisio-background-color-secondary)",
    "border": "1px solid #a1a1a1",
    "border-radius" : "var(--lisio-border-radius-extra-large)",
    height: "44px",
    width: "44px",
    "margin-top": "-21px"
  },
  "div.lisio-custom-range input:hover::-webkit-slider-thumb": {
    "background-color": "var(--lisio-color-grey)",
    "border-color": "var(--lisio-color-grey)"
  },
  "div.lisio-custom-range input:hover::-moz-range-thumb": {
    "background-color": "var(--lisio-color-grey)",
    "border-color": "var(--lisio-color-grey)"
  },
  "div.lisio-custom-range:has(input:hover) .range-input-container::before": {
    content: `url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10L26 15.2083L21 20' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 10L4 15.2083L9 20' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")`,
  },
  "div.lisio-custom-range .input-range-test": {
    display: "flex !important",
    "align-items": "center !important",
    gap: "0px !important",
    "justify-content": "center !important",
    transition: "background 0.2s ease",
    width: "100% !important"
  },
  "div.lisio-custom-range .input-range-test button": {
    height: "44px !important",
    width: "44px !important",
    "border": "1px solid #a1a1a1 !important",
    "border-radius": "50px",
    background: "var(--lisio-background-color-secondary) !important",
    transition: "background 0.2s ease",
    color: "black",
    "z-index": "1"
  },
  "div.lisio-custom-range .input-range-test button:hover, div.lisio-custom-range .input-range-test button:focus-visible": {
    background: "var(--lisio-color-grey) !important",
    "border-color": "var(--lisio-color-grey) !important",
  },
  "div.lisio-custom-range .input-range-test button svg>*": {
    transition: "stroke-width 0.2s ease"
  },
  "div.lisio-custom-range .input-range-test button:hover svg>*, div.lisio-custom-range .input-range-test button:focus-visible svg>*": {
    "stroke-width": "4px",
    color: "white !important"
  },
};

export { customRangeStyles };