/**
 * @mergeTarget
 * @module Src/Components/CustomButton
 */

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

/**
 * Custom button CSS
 * @source
 */
const customButtonStyles: LisioCSSRules = {
  "button.lisio-custom-button": {
    display: "flex",
    "align-items": "center",
    "justify-content": "space-around",
    cursor: "pointer",
    padding: "8px 18px",
    border: "2px solid transparent",
    "word-break": "break-word",
    "font-family": "inherit",
    transition: "border 0.2s ease",
  },
  "button.lisio-custom-button:disabled": {
    visibility: "hidden",
  },
  "button.lisio-custom-button.primary": {
    "background-color": "var(--lisio-background-color-primary)",
    transition: "border-color 0.2s ease",
  },
  "button.lisio-custom-button.secondary": {
    "background-color": "var(--lisio-background-color-secondary)",
    transition: "border-color 0.2s ease",
  },
  "button.lisio-custom-button.transparent": {
    "background-color": "transparent",
  },
  "button.lisio-custom-button.red": {
    "background-color": "var(--lisio-color-red)",
  },
  "button.lisio-custom-button.red:hover": {
    "background-color": "var(--lisio-color-red-hover) !important",
  },
  "button.lisio-custom-button.red:hover *": {
    color: "white !important",
  },
  "button.lisio-custom-button.grey": {
    "background-color": "var(--lisio-color-grey2)",
  },
  "button.lisio-custom-button.grey:hover": {
    "background-color": "var(--lisio-color-grey-hover) !important",
  },
  "button.lisio-custom-button.btn-outline-grey": {
    "border": "1px solid var(--lisio-color-grey) !important",
    "background-color": "white !important",
  },
  "button.lisio-custom-button.btn-outline-grey:hover": {
    "background-color": "var(--lisio-color-grey) !important",
  },
  "button.lisio-custom-button.btn-outline-grey:hover p, button.lisio-custom-button.btn-outline-grey:hover svg": {
    color: "white !important",
  },
  "button.lisio-custom-button.btn-grey-no-border": {
    "border": "none !important",
    "background-color": "white !important",
  },
  "button.lisio-custom-button.btn-grey-no-border:hover": {
    "background-color": "var(--lisio-color-grey) !important",
  },
  "button.lisio-custom-button.btn-grey-no-border:hover p, button.lisio-custom-button.btn-grey-no-border:hover svg": {
    color: "white !important",
  },
  "button.lisio-custom-button.outline-red": {
    border: "2px solid var(--lisio-color-red) !important",
    "background-color": "white !important",
  },
  "button.lisio-custom-button.red p": {
    color: "white",
  },
  "button.lisio-custom-button.blue-green": {
    "background-color": "var(--lisio-color-primary)",
  },
  // "button.lisio-custom-button.btn-square": {
  //   "border-radius": "var(--lisio-border-radius-small)",
  //   "aspect-ratio": "1/1"
  // },
  "button.lisio-custom-button.btn-back": {
    padding: "2px 5px",
    gap: "10px",
    "background-color": "var(--lisio-background-color-primary)",
  },
  "button.lisio-custom-button.space-between": {
    "justify-content": "space-between",
    // padding: "8px 8px 8px 8px",
  },
  // "button.lisio-custom-button.btn-square.visibility-hidden": {
  //   visibility: "hidden",
  // },
  "button.lisio-custom-button.btn-pill": {
    "border-radius": "var(--lisio-border-radius-extra-large)",
  },
  "button.lisio-custom-button.btn-small": {
    width: "50%",
  },
  "button.lisio-custom-button.width-55": {
    width: "55%",
  },
  "button.lisio-custom-button.width-75": {
    width: "75%",
  },
  "button.lisio-custom-button.btn-medium": {
    width: "95%",
  },
  "button.lisio-custom-button.width-100": {
    width: "100%",
  },
  "button.lisio-custom-button.button-category": {
    "padding-left": "0px",
    "padding-right": "0px",
  },
  "button.lisio-custom-button.margin-left-30": {
    "margin-left": "30px",
  },
  "button.lisio-custom-button.txt-margin-right-40 div.lisio-texts-container": {
    "margin-right": "40px",
  },
  "button.lisio-custom-button.btn-nav": {
    "min-width": "121px",
    padding: "8px 16px",
    "border-radius": "var(--lisio-border-radius-medium)",
  },
  "button.lisio-custom-button.column": {
    "flex-direction": "column",
  },
  "button.lisio-custom-button.row": {
    "flex-direction": "row",
  },
  "button#adaptation div.lisio-texts-container": {
    "margin-left": "18px",
  },
  "button#adaptation svg": {
    width: "13%",
  },
  "button#adaptation div.switch": {
    width: "125px !important",
  },
  "button#adaptation div.switch div.lisio-texts-container ": {
    "margin-left": "0px",
  },
  'button.lisio-custom-button.active, button.lisio-custom-button[aria-checked="true"]':
    {
      transition: "border-color 0.2s ease",
    },
  // "button.lisio-custom-button.active": {
  //   "border-color": "var(--lisio-color-active)",
  //   transition: "border-color 0.2s ease",
  // },
  ".infobox-radio button.lisio-custom-button": {
    "margin-top": "10px",
  },
  // "button.lisio-custom-button:hover": {
  //   border: "solid 2px var(--lisio-color-hover)",
  // },
  "button.lisio-custom-button:not(#arrow-right-nav):not(#arrow-left-nav):focus-visible":
    {
      outline: "solid 2px var(--lisio-color-hover) !important",
      "z-index": "5",
    },
  //SLIDERS
  "div.lisio-custom-slider button.lisio-custom-button": {
    width: "70%",
    "min-width": "40px",
    padding: "0 !important",
    "border-radius": "0",
    "border-top": "none",
    "border-bottom": "none",
  },
  "div.lisio-custom-slider.secondary button.lisio-custom-button": {
    "border-right": "1px solid var(--lisio-background-color-primary)",
    "border-left": "none",
    "border-radius":
      "var(--lisio-border-radius-large) 0 0 var(--lisio-border-radius-large)",
    // "-webkit-box-shadow": "inset 3px -4px 5px rgba(0,0,0, 0.05)",
    // "box-shadow": "inset 3px -4px 5px rgba(0,0,0, 0.05)",
  },
  "div.lisio-custom-slider.secondary button.lisio-custom-button:last-child": {
    "border-right": "none",
    "border-left": "1px solid var(--lisio-background-color-primary)",
    "border-radius":
      "0 var(--lisio-border-radius-large) var(--lisio-border-radius-large) 0",
    // "-webkit-box-shadow": "inset -3px -4px 5px rgba(0,0,0, 0.05)",
    // "box-shadow": "inset -3px -4px 5px rgba(0,0,0, 0.05)",
  },
  //HEADER
  "header button.lisio-custom-button.btn-small": {
    height: "55%",
    width: "33px",
    padding: "0px",
    border: "none",
  },
  "header button.lisio-custom-button.btn-header": {
    width: "33px",
    height: "33px",
    border: "none",
    padding: "0px",
    "background-color": "transparent",
  },
  "header button.lisio-custom-button.btn-header:hover": {
    "background-color": "var(--lisio-color-grey)",
  },
  "header button.lisio-custom-button.btn-header.red:hover": {
    "background-color": "var(--lisio-color-red)",
  },
  // "header button.lisio-custom-button:hover": {
  //   "box-shadow":
  //     "inset -2px -2px 4px rgba(255, 255, 255, 0.3), inset 2px 2px 4px rgba(0, 0, 0, 0.3)!important",
  //   border: "none",
  // },
  // "header button.lisio-custom-button:disabled:hover": {
  //   "background-color": "lightgray !important",
  //   cursor: "default",
  //   "box-shadow":
  //     "inset 2px 2px 4px rgba(255, 255, 255, 0.3), inset -2px -2px 4px rgba(0, 0, 0, 0.3)!important",
  // },
  "header#lisio-custom-header button.hidden": {
    opacity: "0",
    "pointer-events": "none",
    cursor: "none",
  },
  "header#lisio-custom-header button.unused": {
    opacity: "0",
    "pointer-events": "none",
    cursor: "none",
  },
  //FOOTER
  "footer button.lisio-custom-button": {
    padding: "2px",
  },
  //NAV
  "div.text-nav-button-list button.lisio-custom-button": {
    height: "50px !important",
    width: "50px !important",
    padding: "0 !important",
    "justify-content": "center",
    "row-gap": "8px",
    // "z-index": "3",
    "border-radius": "10rem",
  },
  // ".text-nav-button-list button#arrow-right-nav": {
  //   "-webkit-box-shadow": "-5px 0px 15px 0px rgba(0,0,0,0.2)",
  //   "box-shadow": "-5px 0px 15px 0px rgba(0,0,0,0.2)",
  // },
  // ".text-nav-button-list button#arrow-left-nav": {
  //   "-webkit-box-shadow": "5px 0px 15px 0px rgba(0,0,0,0.2)",
  //   "box-shadow": "5px 0px 15px 0px rgba(0,0,0,0.2)",
  // },
  // "nav#lisio-custom-nav > div.lisio-elements-container > div.lisio-elements-container > button.lisio-custom-button":
  //   {
  //     position: "relative",
  //   },
  // "nav#lisio-custom-nav > div.lisio-elements-container > div.lisio-elements-container > button.lisio-custom-button.active":
  //   {
  //     "border-color": "var(--lisio-color-primary)",
  //   },
  // "nav#lisio-custom-nav > div.lisio-elements-container > div.lisio-elements-container > button.lisio-custom-button:not(:last-child):after":
  //   {
  //     content: "''",
  //     height: "80%",
  //     width: "1px",
  //     "background-color": "var(--lisio-background-color-primary)",
  //     position: "absolute",
  //     right: "-0.65rem",
  //     "pointer-events": "none",
  //   },
  // "button.lisio-custom-button#arrow-right-nav:hover, button.lisio-custom-button#arrow-left-nav:hover":
  //   {
  //     border: "white solid 2px",
  //   },
  //RESPONSIVE
  "@media screen and (max-width : 390px)": {
    "button.lisio-custom-button.btn-nav": {
      "min-width": "98px !important",
    },
    "header button.lisio-custom-button.btn-small": {
      height: "36px !important",
      width: "36px !important",
      padding: "6px !important",
    },
    "div.text-nav-button-list button.lisio-custom-button": {
      height: "40px !important",
      width: "40px !important",
    },
  },

  "button.lisio-custom-button.btn-grey svg": {
    color: "var(--lisio-color-grey)",
  },
  //BUTTON HOVER
  "button.lisio-custom-button.btn-grey:hover": {
    "background-color": "var(--lisio-color-grey)",
    "border-radius": "10rem",
  },
  "button.lisio-custom-button.btn-grey:hover *": {
    color: "white",
  },

  "button.lisio-custom-button:not(.btn-grey):hover": {
    "background-color": "var(--lisio-color-primary)",
    // "background-color": "var(--lisio-background-color-primary)",
    "border-radius": "10rem",
  },
  "button.lisio-custom-button.primary:hover": {
    "background-color": "var(--lisio-color-primary)",
    "border-radius": "10rem",
  },
  "button.lisio-custom-button.primary:hover *": {
    color: "white",
  },
  "button.lisio-custom-button.secondary:hover": {
    "background-color": "var(--lisio-background-color-primary)",
    "border-radius": "10rem",
  },
  // "button.lisio-custom-button.secondary:hover *": {
  //   color: "black",
  // },
  //  "button.lisio-custom-button:hover p, button.lisio-custom-button:hover:not(.selected) svg, button.lisio-custom-button:hover label, li.lisio-custom-choice-item label:hover svg:not(.theme-icon, .infobox-radio *)":
  // {
  //   color: "black",
  // },
  "button.lisio-custom-button:disabled:hover p": {
    color: "black !important",
  },
  // "button.lisio-custom-button:hover div::before": {
  //   "background-color": "black !important",
  // },
  // "button.lisio-custom-button:hover div.lisio-switch-round": {
  //   "border-color": "black",
  //   "background-color": "var(--lisio-background-color-primary)",
  // },
  // "button.lisio-custom-button:hover svg.lisio-custom-icon.arrow": {
  //   color: "black !important",
  // },
  ".reset": {
    "background-color": "black",
  },
  ".reset:hover": {
    "background-color": "var(--lisio-color-red) !important",
    // "border-color": "var(--lisio-color-red)",
  },
  "#reset:hover *": {
    color: "white",
  },
  "svg.lisio-custom-icon": {
    transition: "none !important",
  },
  //RESET SCREEN
  "#reset-button": {
    "margin-top": "20px",
  },
  //USER
  "button.lisio-custom-button.green": {
    "background-color": "var(--lisio-color-primary)",
  },
  "button.lisio-custom-button.green p": {
    color: "white",
  },
  "button.lisio-custom-button.green:hover": {
    "background-color": "var(--lisio-color-primary-black-hover)",
  },
  //TODO
  "button[id$='-more'] p": {
    "font-size": "var(--lisio-font-size-small) !important",
  },
  "button[id$='-more']": {
    padding: "0 8px",
  },
  //RANGE
  "div.lisio-elements-container.custom-range-inputs-container button.lisio-custom-button": {
    "border-radius": "50px",
    width: "30px",
    height: "30px",
    border: "none",
    padding: "5px",
  },
  //INFOBOXES
  "div.lisio-elements-container.infobox-content button.lisio-custom-button.infobox-settings-button":
    {
      width: "fit-content",
      "max-width": "90%",
      "margin-right": "auto",
      "margin-left": "auto",
      padding: "5px",
      "padding-right": "15px",
      "padding-left": "15px",
    },
  "button.lisio-custom-button.infobox-synth-button": {
    width: "fit-content",
    "max-width": "90%",
    "margin-right": "auto",
    "margin-left": "auto",
    padding: "5px",
    "padding-right": "15px",
    "padding-left": "15px",
  },
  "button.btn-back": {
    "margin-bottom": "16px",
    "margin-left": "2.5%",
    "margin-right": "auto",
    color: "black",
  },
  "button.btn-back.d-none": {
    display: "none",
  },
  "@supports (margin-inline: auto)": {
    "div.lisio-elements-container.infobox-content button.lisio-custom-button.infobox-settings-button, button.lisio-custom-button.infobox-synth-button": {
      "margin-inline": "auto",
    },
  },
  "@supports (padding-inline: 0px)": {
    "button.lisio-custom-button.button-category":{
      "padding-inline": "0px",
    },
    "div.lisio-elements-container.infobox-content button.lisio-custom-button.infobox-settings-button, button.lisio-custom-button.infobox-synth-button":{
      "padding-inline": "15px",
    }
  },
};
export { customButtonStyles };