/**
 * @mergeTarget
 * @module Src/Components/CustomInput/CustomSlider
 */

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

/**
 * Custom slider CSS
 * @source
 */
const customSliderStyles: LisioCSSRules = {
  "div.lisio-custom-slider": {
    display: "flex",
    "flex-direction": "column",
    "justify-content": "space-between",
    "align-items": "center",
    width: "44%",
    "background-repeat": "no-repeat",
    "background-size": "200% 100%",
    overflow: "hidden",
    transition: "border-color 0.2s ease",
    padding: "5px",
    "padding-top": "15px",
  },
  "ul.settings-section li.lisio-custom-list-item div.lisio-custom-slider": {
    width: "100%",
  },
  "#synth-screen div.lisio-custom-slider": {
    width: "100%",
  },
  "div.lisio-custom-slider.secondary": {
    "background-color": "var(--lisio-background-color-secondary)",
    "border-radius": "var(--lisio-border-radius-extra-large)",
  },
  "div.lisio-custom-slider .slider-text-value": {
    border: "solid 2px var(--lisio-background-color-secondary) !important",
    transition: "border 0.2s ease",
  },
  "div.lisio-custom-slider .slider-text-value:hover": {
    border: "solid 2px var(--lisio-color-hover) !important",
  },
  'input[type="number"].lisio-custom-input': {
    border: "none",
    width: "100%",
    "text-align": "center",
    color: "var(--lisio-font-color-primary)",
    margin: "0",
    padding: "0",
    "font-weight": "bold",
    "font-family": "'Calibri', sans-serif",
    "font-size": "var(--lisio-font-size-regular)",
  },
  //RESPONSIVE
  "@media screen and (max-width : 389px)": {
    "div.lisio-custom-slider": {
      padding: "4px",
      "padding-top": "15px",
    },
  },
};

export { customSliderStyles };