/**
 * @mergeTarget
 * @module Src/Components/CustomInput/CustomChoice/CustomChoiceItem
 */

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

/**
 * Custom choice item CSS
 * @source
 */
const customChoiceItemStyles: LisioCSSRules = {
  "li.lisio-custom-choice-item": {
    width: "90%",
    position: "relative",
    border: "1px solid",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    overflow: "hidden",
  },
  "ul.lisio-custom-choice.full li.lisio-custom-choice-item": {
    width: "calc(100% - 4px)",
  },
  "ul.lisio-custom-choice.full li.lisio-custom-choice-item input": {
    "margin-right": "10px",
  },
  "li.lisio-custom-choice-item label": {
    display: "flex",
    "flex-direction": "row",
    "align-items": "center",
    // "justify-content": "baseline",
    width: "calc( 100% - 20px )",
    "column-gap": "8px",
    padding: "0 8px",
    cursor: "pointer",
    border: "2px solid",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    "border-color": "transparent",
    "margin-right": "auto",
    "margin-left": "auto",
  },
  'li.lisio-custom-choice-item:has(input[type="radio"].lisio-custom-input:checked):not(.default-choice-item)':
    {
      border: "1px solid var(--lisio-color-active)",
    },
  'li.lisio-custom-choice-item:has(input[type="radio"].lisio-custom-input:checked):not(.default-choice-item):has(.infobox-radio) label':
    {
      width: "calc( 100% - 24px )",
    },
  "ul.lisio-custom-choice.secondary li.lisio-custom-choice-item": {
    "border-color": "var(--lisio-background-color-secondary)",
    "background-color": "var(--lisio-background-color-secondary)",
  },
  'input[type="radio"].lisio-custom-input': {
    "background-color": "var(--lisio-background-color-secondary)",
    border: "2px solid black",
    appearance: "none",
    "border-radius": "50%",
    width: "16px",
    height: "16px",
    margin: "0",
    padding: "0",
    cursor: "pointer",
    transition:
      "border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease",
  },
  'li.lisio-custom-choice-item input[type="radio"].lisio-custom-input:checked':
    {
      "background-color": "var(--lisio-color-active) !important",
      "-webkit-box-shadow": "0px 4px 4px 0px rgba(2, 34, 37, 0.34) inset",
      "box-shadow": "0px 4px 4px 0px rgba(2, 34, 37, 0.34) inset",
      "border-color": "var(--lisio-color-active)",
      transition:
        "border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease",
    },

  "li.lisio-custom-choice-item label:hover": {
    "background-color": "var(--lisio-background-color-primary) !important",
    // border: "2px solid var(--lisio-color-hover) !important",
  },
  // "li.lisio-custom-choice-item label:hover svg:not(.theme-icon)":{
  //   color: "black !important"
  // },
  "li.lisio-custom-choice-item label:hover p:not(.specific-label p)": {
    color: "black !important",
  },
  // 'li.lisio-custom-choice-item label:hover input[type="radio"].lisio-custom-input': {
  //   "-webkit-box-shadow": "0px 4px 4px 0px rgba(2, 34, 37, 0.34) inset",
  //   "box-shadow": "0px 4px 4px 0px rgba(2, 34, 37, 0.34) inset",
  //   "border-color": "black !important",
  //   transition:
  //     "border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease",
  // },
  "li.lisio-custom-choice-item .infobox-radio": {
    "padding-block": "1rem",
  },
  "div.infobox-radio": {
    display: "none",
  },
  "li.lisio-custom-choice-item.checked div.infobox-radio": {
    display: "block !important",
  },
  "@supports (margin-inline: auto)": {
    "li.lisio-custom-choice-item label": {
      "margin-inline": "auto",
    },
  }
};

export { customChoiceItemStyles };