/**
 * @mergeTarget
 * @module Src/Components/CustomIcon
 */

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

/**
 * Custom icon CSS
 * @source
 */
const customIconStyles: LisioCSSRules = {
  "svg.lisio-custom-icon": {
    height: "100%",
    "aspect-ratio": "1/1",
    transition: "color 0.2s ease",
  },
  "svg.lisio-custom-icon.m-left": {
    "margin-left": "15px",
  },
  "svg.lisio-custom-icon.m-right": {
    "margin-right": "10px",
  },
  "svg.lisio-custom-icon.theme-icon": {
    padding: "4px",
    "border-radius": "8px",
  },
  "svg.lisio-custom-icon.no-ratio": {
    "aspect-ratio": "auto",
  },
  "svg.lisio-custom-icon.white": {
    color: "#fff",
  },
  "svg.lisio-custom-icon.black": {
    color: "#000",
  },
  "svg.lisio-custom-icon.secondary": {
    color: "var(--lisio-color-active)",
  },
  "svg.lisio-custom-icon.red": {
    color: "var(--lisio-color-red)",
  },
  "svg.lisio-custom-icon.green": {
    color: "var(--lisio-color-green)",
  },
  "svg.lisio-custom-icon.grey": {
    color: "var(--lisio-color-grey)",
  },
  "svg.lisio-custom-icon.grey2": {
    color: "var(--lisio-color-grey2)",
  },
  "svg.lisio-custom-icon.primary": {
    color: "var(--lisio-color-primary)",
  },
  "svg.lisio-custom-icon.arrow": {
    height: "21px",
    // width: "10%",
  },
  "svg.lisio-custom-icon.arrow-secondary": {
    height: "16px",
  },
  "svg.lisio-custom-icon.width-8": {
    width: "8% !important",
  },
  "div.lisio-elements-container.home-page-icon svg": {
    height: "100%",
    width: "100%",
  },
  "button.lisio-custom-button svg.home-page-icon": {
    "margin-right": "6px",
    "margin-left": "6px",
  },
  "svg.left": {
    transform: "rotate(180deg)",
  },
  "button.lisio-custom-button.active svg.lisio-custom-icon.arrow": {
    color: "var(--lisio-color-primary)",
    transition: "color 0.2s ease",
    position: "relative",
    width: "15px",
    height: "22px",
  },
  "button.lisio-custom-button.active svg.lisio-custom-icon.arrow > *": {
    "stroke-width": "5",
  },
  "svg.border-flags": {
    "border-radius": "4px",
    width: "30px !important",
    height: "22.5px !important",
    filter: "drop-shadow(0px 0px 2px rgba(0,0,0,0.5))",
  },
  // "svg.shadow-flags": {
  //   filter: "drop-shadow(0px 0px 2px rgba(0,0,0,0.5))",
  // },
  "svg.lisio-custom-icon.padding-inline-start-30px": {
    "padding-left": "30px",
    "padding-inline-start": "30px",
  },
  "svg.lisio-custom-icon.padding-inline-start-20px": {
    "padding-left": "20px",
    "padding-inline-start": "20px",
  },
  "li.lisio-custom-choice-item.checked:not(.default-choice-item) label svg.lisio-custom-icon.font-family-icon": {
    "stroke-width": "0.6px",
    stroke: "black",
  },
  //SETTINGS
  "svg.lisio-custom-icon.c-y-bg-bl": {
    border: "2px solid blue",
    color: "yellow",
    "background-color": "blue",
  },
  "svg.lisio-custom-icon.c-bl-bg-w": {
    border: "2px solid blue",
    color: "blue",
    "background-color": "#fff",
  },
  "svg.lisio-custom-icon.c-w-bg-bk": {
    border: "2px solid black",
    color: "white",
    "background-color": "black",
  },
  "svg.lisio-custom-icon.c-bk-bg-w": {
    border: "2px solid black",
    color: "black",
    "background-color": "#fff",
  },
  "svg.lisio-custom-icon.c-bk-bg-g": {
    border: "2px solid #e8e8e8",
    color: "black",
    "background-color": "#e8e8e8",
  },
  "svg.lisio-custom-icon.c-w-bg-gy": {
    border: "2px solid #212629",
    color: "#DFE3E7",
    "background-color": "#212629",
  },
  "svg.lisio-custom-icon.margin-left-0": {
    "margin-left": "3px",
    height: "90%",
  },
  // //TRANSLATION
  // "button#translation svg": {
  //   "border-radius": "4px",
  // },
  //SLIDER
  "div.lisio-custom-slider button.lisio-custom-button svg>*": {
    transition: "stroke-width 0.2s ease",
  },
  "div.lisio-custom-slider button.lisio-custom-button svg": {
    color: "black",
  },
  "div.lisio-custom-slider button.lisio-custom-button:active svg>*": {
    "stroke-width": "3px",
  },
  "div.lisio-custom-slider button.lisio-custom-button:hover svg>*": {
    "stroke-width": "4px",
  },
  //header
  "header#lisio-custom-header svg.close": {
    width: "18px",
  },
  "header#lisio-custom-header svg.logo-color": {
    color: "var(--lisio-color-logo)",
  },
  "header#lisio-custom-header button.outline-grey:hover svg": {
    color: "var(--lisio-color-grey)",
  },
  "header#lisio-custom-header button.outline-red:hover svg": {
    color: "var(--lisio-color-red)",
  },
  "header#lisio-custom-header svg:not(.close):not(.more):not(.home)": {
    "margin-left": "18%",
    "margin-bottom": "7px",
  },
  "header#lisio-custom-header svg.more circle": {
    fill: "none",
  },
  // "header#lisio-custom-header svg.home": {
  //   width: "25px",
  // },
  //NAV
  "div.text-nav-button-list svg.lisio-custom-icon": {
    height: "28px",
    width: "28px",
  },
  "div.text-nav-button-list svg.lisio-custom-icon.speak-icon": {
    width: "32px",
  },

  // ".text-nav-button-list svg.lisio-custom-icon.arrow": {
  //   height: "21px",
  //   width: "80%",
  //   "pointer-events": "none",
  //   transition: "height 0.2s",
  // },
  // "div.text-nav-button-list svg.lisio-custom-icon.leaf": {
  //   width: "40%",
  // },
  // ".text-nav-button-list button:active svg.lisio-custom-icon.arrow": {
  //   height: "20px",
  // },
  // "nav#lisio-custom-nav:not(.shadow-before) > button#arrow-left-nav > svg": {
  //   color: "var(--lisio-background-color-primary)",
  // },
  // "nav#lisio-custom-nav:not(.shadow-after) > button#arrow-right-nav > svg": {
  //   color: "var(--lisio-background-color-primary)",
  // },
  // ".text-nav-button-list svg.deepl-flag": {
  //   width: "30px !important",
  //   height: "100% !important",
  // },
  //SYNTH
  "svg.lisio-custom-icon.synth": {
    height: "25px !important",
  },
  //SETTINGS
  "svg.lisio-custom-icon.word-spacing": {
    height: "30px !important",
  },
  "@supports (margin-inline: 6px)": {
    "button.lisio-custom-button svg.home-page-icon": {
      "margin-inline": "6px",
    },
  }
};

export { customIconStyles };