/**
 * @mergeTarget
 * @module Src/Components/ElementsContainer
 */

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

/**
 * Element constainer CSS
 * @source
 */
const elementsContainerStyles: LisioCSSRules = {
  "div.lisio-elements-container": {
    display: "flex",
    "row-gap": "16px",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    width: "95%",
    padding: "8px 0",
  },
  "div.lisio-elements-container.wrap": {
    "flex-wrap": "wrap",
  },
  "div.lisio-elements-container.width-auto": {
    width: "auto",
  },
  "div.lisio-elements-container.back-section": {
    padding: "0",
    "justify-content": "start",
  },
  "div.lisio-elements-container.justify-content-around": {
    "justify-content": "space-around",
  },
  "div.lisio-elements-container.justify-content-evenly": {
    "justify-content": "space-evenly",
  },
  "div.lisio-elements-container.justify-content-center": {
    "justify-content": "center",
  },
  "div.lisio-elements-container.row": {
    "flex-direction": "row",
    gap: "1rem",
  },
  "div.lisio-elements-container.gap-0": {
    gap: "0",
  },
  "div.lisio-elements-container.column": {
    "flex-direction": "column",
    "align-items": "center",
  },
  "div.lisio-elements-container.switch": {
    width: "95px !important",
    // "justify-content": "start",
    "justify-content": "flex-end",
    gap: "0.5rem",
    "border-radius": "0",
    "align-items": "center",
  },
  "div.lisio-elements-container.switch.switch-with-icon": {
    width: "110px !important",
  },
  "div.lisio-elements-container.transparent": {
    "background-color": "transparent",
  },
  "div.lisio-elements-container.secondary": {
    "background-color": "var(--lisio-background-color-secondary)",
  },
  "div.lisio-elements-container.primary": {
    "background-color": "var(--lisio-background-color-primary)",
  },
  "div.lisio-elements-container.full": {
    width: "95%",
  },
  "div.lisio-elements-container.h-full": {
    height: "100%",
  },
  "div.lisio-elements-container.w-max": {
    width: "100% !important",
  },
  "div.lisio-elements-container.align-items-center": {
    "align-items": "center",
  },
  "div.lisio-elements-container.hidden": {
    display: "none",
  },
  "label div.lisio-elements-container": {
    width: "80% !important",
  },
  "div.lisio-elements-container.margin-top-50px": {
    "margin-top": "50px",
  },
  "div.lisio-elements-container.home-page-icon": {
    height: "80%",
    width: "10%",
    "max-height": "30px",
    "margin-right": "6px",
    "margin-left": "6px",
    position: "relative",
    display: "flex",
    "justify-content": "center",
    "align-items": "center",
  },
  // "button.lisio-custom-button.active div.lisio-elements-container.home-page-icon::before": {
  //   content: "''",
  //   position: "absolute",
  //   bottom: "0",
  //   left: "50%",
  //   transform: "translateX(-50%)",
  //   height: "4px",
  //   width: "14px",
  //   "border-radius": "10px",
  //   "background-color": "var(--lisio-color-active)",
  // },
  //INFOBOX
  "div.lisio-button-infobox-container": {
    border: "2px solid transparent",
  },
  "div.lisio-button-infobox-container div.lisio-elements-container": {
    // overflow: "hidden",
    height: "auto",
    width: "100%",
  },
  "div.lisio-button-infobox-container.collapsed div.lisio-elements-container": {
    height: "0px !important",
    padding: "0",
  },
  "div.lisio-elements-container.infobox": {
    // "background-color": "var(--lisio-color-active-transparent)",
  },
  "div.lisio-elements-container.width-90": {
    width: "90%",
  },
  "div.lisio-elements-container.width-100": {
    width: "100%",
  },
  //RADIOS
  "li.lisio-custom-choice-item.content-row div.lisio-elements-container": {
    gap: "1rem",
    "align-items": "center",
  },
  "li.lisio-custom-choice-item.content-column div.lisio-elements-container": {
    "flex-direction": "column",
    "align-items": "center",
    "row-gap": "0",
  },
  "li.lisio-custom-choice-item.content-column div.lisio-elements-container p": {
    "text-align": "center",
  },
  //SLIDERS
  "div.lisio-custom-slider > div.lisio-elements-container": {
    width: "95%",
    "min-height": "40px",
    padding: "0px",
    transition: "border-color 0.2s ease",
  },
  "div.lisio-custom-slider.secondary > div.lisio-elements-container": {
    "background-color": "var(--lisio-background-color-secondary)",
    border: "2px solid var(--lisio-background-color-primary)",
    overflow: "hidden",
  },
  "div.lisio-custom-slider > div.lisio-elements-container.active": {
    border: "2px solid var(--lisio-color-active)",
  },
  "div.lisio-custom-slider > div.lisio-elements-container:hover": {
    border: "2px solid var(--lisio-color-hover)",
  },
  "div.lisio-elements-container.lisio-button-infobox-container": {
    position: "relative",
    display: "flex",
    width: "100%",
    "flex-direction": "column",
    "justify-content": "center",
    "align-items": "center",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    padding: "0",
    "row-gap": "0",
  },
  //HEADER
  "header .lisio-custom-header-div": {
    display: "flex",
    "flex-direction": "row",
    "align-items": "center",
    "justify-content": "space-between",
    width: "90%",
    height: "60px",
    padding: "0",
    "margin-right": "auto",
    "margin-left": "auto",
  },
  //FOOTER
  ".footer div.lisio-elements-container": {
    "justify-content": "space-around",
    padding: "8px 10px",
  },
  "div.lisio-elements-container.footer": {
    "margin-top": "50px",
  },
  "div.lisio-elements-container.footer.no-before": {
    "margin-top": "7px",
  },
  //INFOBOXES
  "div.lisio-elements-container.infobox-content": {
    display: "flex",
    "flex-direction": "column",
  },
  "div.lisio-elements-container.infobox-content.hidden": {
    display: "none",
  },
  //RADIO INPUT
  "ul.lisio-custom-choice label > div": {
    "padding-block": "8px",
  },
  //ECO SCREEN
  "#eco-screen div.lisio-elements-container.infobox": {
    "padding-bottom": "30px",
  },
  //DALTONISM
  "div.lisio-elements-container.ishihara-section": {
    "position": "sticky",
    bottom: "-10px",
    "z-index": "2",
    "padding-top": "12px",
    "border-radius": "0px",
    width: "100%",
    "padding-bottom": "1.5rem",
  },
  "div.lisio-elements-container.ishihara-section::after": {
    content: "''",
    width: "90%",
    height: "2px",
    "border-radius": "2px",
    background: "var(--lisio-background-color-primary)",
    position: "absolute",
    top: "0",
    left: "50%",
    transform: "translateX(-50%)"
  },
  "div.lisio-elements-container.ishihara-section::before": {
    content: "''",
    width: "90%",
    height: "2px",
    "border-radius": "2px",
    background: "var(--lisio-background-color-primary)",
    position: "absolute",
    bottom: "0",
    left: "50%",
    transform: "translateX(-50%)"
  },
  //RESPONSIVE
  "@media screen and (max-width : 389px)": {
    "div.lisio-elements-container.mobile-column": {
      "flex-direction": "column !important",
    },
  },
  //RESPONSIVE
  //   "@media screen and (max-width : 389px)": {
  //     "div.lisio-elements-container.mobile-column": {
  //       "flex-direction": "column !important",
  // "justify-content": "space-between",
  //     width: "90%",
  //     height: "60px",
  //     padding: "0",
  //     "margin-inline": "auto",
  //   },
  // }
  //RANGE
  "div.lisio-elements-container.custom-range-inputs-container": {
    width: "auto",
    display: "flex",
    "flex-direction": "column",
    gap: "8px"
  },
  "div.lisio-elements-container.custom-range-inputs-container div.lisio-elements-container": {
    width: "auto",
    display: "flex",
    gap: "8px",
    padding: "0",
    "justify-content": "space-between"
  },
  "div.lisio-elements-container.custom-ranges-container": {
    "flex-wrap": "wrap",
    "justify-content": "space-around"
  },
  "@supports (margin-inline: auto)": {
    "header .lisio-custom-header-div": {
      "margin-inline": "auto",
    },
  },
  "@supports (justify-content: end)": {
    "div.lisio-elements-container.switch": {
      "justify-content": "end",
    },
  }
};

export { elementsContainerStyles };