/**
 * @mergeTarget
 * @module Src/Components/CustomNav
 */

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

/**
 * Custom nav CSS
 * @source
 */
const customNavStyles: LisioCSSRules = {
  "div.text-nav-button-list": {
    width: "100%",
    "background-color": "var(--lisio-background-color-secondary)",
    "border-bottom": "2px solid var(--lisio-background-color-primary)",
    "padding-top": "8px",
  },
  "@media screen and (max-width : 390px)": {
    "div.text-nav-button-list": {
      "padding-top": "13px !important",
      "padding-bottom": "5px !important",
    },
    "div.text-nav-button-list li.selected::after": {
      bottom: "-8px !important",
    },
    "div.text-nav-button-list li.is-active button::before": {
      bottom: "1px !important",
    }
  },
  "div.text-nav-button-list ul": {
    width: "100%",
    display: "flex",
    "justify-content": "space-between",
    // background:
    //   "linear-gradient(to bottom, white 50%, var(--lisio-background-color-primary) 50%)",
    padding: "0px",
    "border-radius": "0",
  },
  "div.text-nav-button-list button": {
    width: "100%",
    position: "relative",
    "background-color": "var(--lisio-background-color-secondary)",
    padding: "10px 0 10px 0 !important",
    cursor: "pointer",
    border: "none",
    height: "100% !important",
    transition: "none",
  },
  "div.text-nav-button-list button:hover": {
    border: "none",
  },
  // "div.text-nav-button-list button.selected": {
  //   "border-radius":
  //     "var(--lisio-border-radius-small) var(--lisio-border-radius-small) 0 0",
  //   "background-color": "var(--lisio-background-color-primary) !important",
  //   position: "relative",
  //   border: "none",
  //   cursor: "default",
  // },
  "div.text-nav-button-list button.selected": {
    position: "relative",
    border: "none",
    cursor: "default",
    "background-color": "var(--lisio-background-color-secondary) !important",
  },
  "div.text-nav-button-list button.selected svg.lisio-custom-icon.grey>*": {
    color: "var(--lisio-color-primary)",
  },
  ".btn-header:hover svg.lisio-custom-icon.grey": {
    color: "white",
  },
  "div.text-nav-button-list li.selected::after": {
    content: "''",
    position: "absolute",
    bottom: "-3px",
    left: "0",
    width: "100%",
    height: "4px",
    "border-radius": "1000px",
    "background-color": "var(--lisio-color-primary)",
  },
  "div.text-nav-button-list li": {
    position: "relative",
    "max-height": "50px",
  },

  // "div.text-nav-button-list li:not(:last-child):not(.previous, .selected)::after":
  //   {
  //     content: "''",
  //     position: "absolute",
  //     "background-color": "var(--lisio-background-color-primary)",
  //     top: "50%",
  //     right: "-1px",
  //     width: "2px",
  //     height: "28px",
  //     "z-index": "4",
  //     transform: "translateY(-50%)",
  //   },
  //class is-active à mettre sur les catégories comportant des changements
  // "div.text-nav-button-list li.is-active button::before": {
  //   content: "''",
  //   position: "absolute",
  //   bottom: "6px",
  //   height: "34px",
  //   width: "34px",
  //   "z-index": "4",
  //   border: "2px solid var(--lisio-color-active)",
  //   "border-radius": "10px",
  // },
  "div.text-nav-button-list li.is-active button::before": {
    content: "''",
    position: "absolute",
    bottom: "6px",
    height: "4px",
    width: "14px",
    "z-index": "4",
    "border-radius": "10px",
    "background-color": "var(--lisio-color-active)",
  },
  // "div.text-nav-button-list button.next": {
  //   "border-radius": "0 0 0 var(--lisio-border-radius-small)",
  // },
  // "div.text-nav-button-list button.previous": {
  //   "border-radius": "0 0 var(--lisio-border-radius-small) 0",
  // },
  "div.text-nav-button-list button *": {
    "pointer-events": "none",
  },
  "div.text-nav-button-list svg": {
    height: "100%",
  },
  // "div.text-nav-button-list li:first-child button.selected": {
  //   "border-top-left-radius": "0",
  // },
  // "div.text-nav-button-list li:last-child button.selected": {
  //   "border-top-right-radius": "0",
  // },
  "div.text-nav-button-list.hidden": {
    display: "none",
  },
};

export { customNavStyles };