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

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

/**
 * List container CSS
 * @source
 */
const listContainerStyles: LisioCSSRules = {
  "ul.lisio-custom-list": {
    display: "flex",
    "row-gap": "14px",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    padding: "8px 0",
    width: "95%",
    "list-style": "none",
    margin: "0",
  },
  "ul.lisio-custom-list > li.lisio-custom-list-item": {
    width: "100%",
    display: "flex",
    "justify-content": "center",
  },
  "ul.lisio-custom-list.wrap": {
    "flex-wrap": "wrap",
  },
  "ul.lisio-custom-list.footer": {
    "margin-top": "50px",
  },
  "ul.lisio-custom-list.no-before.footer": {
    "margin-top": "7px",
  },
  "ul.lisio-custom-list.justify-content-around": {
    "justify-content": "space-around",
  },
  "ul.lisio-custom-list.justify-content-center": {
    "justify-content": "center",
  },
  "ul.lisio-custom-list.row": {
    "flex-direction": "row",
    gap: "1rem",
  },
  "ul.lisio-custom-list.column": {
    "flex-direction": "column",
    "align-items": "center",
  },
  "ul.lisio-custom-list.transparent": {
    "background-color": "transparent",
  },
  "ul.lisio-custom-list.secondary": {
    "background-color": "var(--lisio-background-color-secondary)",
  },
  "ul.lisio-custom-list.primary": {
    "background-color": "var(--lisio-background-color-primary)",
  },
  "ul.lisio-custom-list.full": {
    width: "95% !important",
  },
  "ul.lisio-custom-list.h-full": {
    height: "100%",
  },
  "ul.lisio-custom-list.width-100": {
    width: "100%",
  },
  "ul.lisio-custom-list.align-items-center": {
    "align-items": "center",
  },
  "ul.lisio-custom-list.margin-top-50px": {
    "margin-top": "50px",
  },
  "ul.lisio-custom-list.lines-h > *": {
    position: "relative",
  },
  "ul.lisio-custom-list.lines-h > *:after": {
    content: "''",
    position: "absolute",
    width: "90%",
    height: "0px",
    bottom: "-7px",
    "border-bottom": "solid 2px var(--lisio-background-color-primary)",
    "pointer-events": "none",
  },
  "ul.lisio-custom-list.lines-h > *:first-child::before": {
    content: "''",
    position: "absolute",
    width: "90%",
    height: "0px",
    top: "-7px",
    "border-bottom": "solid 2px var(--lisio-background-color-primary)",
    "pointer-events": "none",
  },
  "ul.lisio-custom-list.hidden": {
    display: "none",
  },
  "ul.lisio-custom-list.settings-parameters-container": {
    display: "flex",
    "flex-direction": "column",
    width: "95%",
    gap: "40px",
  },
  "label ul.lisio-custom-list": {
    width: "80% !important",
  },
  "ul.lisio-custom-list.settings-section": {
    position: "relative",
    width: "100%",
  },
  "ul.lisio-custom-list.settings-section-radio": {
    "row-gap": "2.5rem",
  },
  "ul.lisio-custom-list.settings-parameters-container li.lisio-custom-list-item:not(:last-child) ul.lisio-custom-list.settings-section:after":
    {
      content: "''",
      position: "absolute",
      width: "80%",
      height: "2px",
      "background-color": "var(--lisio-background-color-primary)",
      bottom: "-20px",
      transform: "translateX(-50%)",
      left: "50%",
    },
  "ul.screen-ul > li > *": {
    width: "100% !important",
  },
  "ul.screen-ul": {
    "min-height": "calc(100vh - 230px)",
  },
  "ul.screen-ul.home": {
    "min-height": "calc(100vh - 195px)",
  },
  "li.has-footer": {
    "margin-top": "auto",
    position: "relative",
  },
  // "li.has-footer:before": {
  //   content: '""',
  //   position: "absolute",
  //   width: "80%",
  //   height: "0px",
  //   top: "15px",
  //   "border-bottom": "solid 2px var(--lisio-background-color-primary)",
  //   "pointer-events": "none",
  // },
  // "li.has-footer.no-before:before": {
  //   display: "none",
  // },
  "#management-screen > ul.lisio-custom-list": {
    width: "100%",
  },
  //RESPONSIVE
  "@media screen and (max-width : 389px)": {
    "ul.lisio-custom-list.mobile-column": {
      "flex-direction": "column !important",
    },
  },
  //SETTINGS
  "ul.margin-top-bot-minus-25px": {
    "margin-top": "-25px",
    "margin-bottom": "-25px",
  },
  "@support(height:1dvh)":{
    "ul.screen-ul.home": {
      "min-height": "calc(100dvh - 195px)",
    },
  }
};

export { listContainerStyles };