/**
 * @mergeTarget
 * @module Src/Components/ListContainer/ListItem
 */

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

/**
 * List item CSS
 * @source
 */
const listContainerItemStyles: LisioCSSRules = {
  "ul.settings-section li.lisio-custom-list-item.full": {
    width: "100%",
  },
  "ul.settings-section li.lisio-custom-list-item": {
    width: "47%",
  },
  "ul li.lisio-custom-list-item:not(:has(li.lisio-custom-list-item)):has(*.checkbox-d-none)": {
    display: "none !important",
  },
  "ul.settings-section.settings-section-radio > li.lisio-custom-list-item": {
    position: "relative",
  },
  "ul.settings-section.settings-section-radio > li.lisio-custom-list-item:nth-child(odd):not(:last-child)::after":
    {
      content: "''",
      height: "calc(100% - 160px)",
      width: "2px",
      position: "absolute",
      right: "calc(-0.5rem - 1px)",
      "background-color": "var(--lisio-background-color-primary)",
      top: "50%",
      transform: "translateY(-50%)",
    },
  // "ul.settings-section.settings-section-radio > li.lisio-custom-list-item:not(:nth-last-child(-n + 2))::before": {
  //   content: "''",
  //   height: "2px",
  //   width: "calc(100% - 40px)",
  //   position: "absolute",
  //   bottom: "calc(-0.5rem - 1px)",
  //   "background-color": "var(--lisio-background-color-primary)",
  //   left: "50%",
  //   transform: "translateX(-50%)"
  // }
};

export { listContainerItemStyles };