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

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

/**
 * Custom text input CSS
 * @source
 */
const customTextInputStyles: LisioCSSRules = {
  "div.text-input-container": {
    width: "90%",
    display: " flex",
    "flex-direction": "column",
  },
  "div.text-input-container.medium": {
    width: "80%",
  },
  'input[type="text"].lisio-custom-input': {
    border: "1px solid var(--lisio-color-grey)",
    "border-radius": "var(--lisio-border-radius-small)",
    "padding-left": "10px",
    "padding-right": "10px",
    height: "32px",
    width: "calc(100% - 20px)",
    color: "var(--lisio-font-color-primary)",
    margin: "0",
    "font-family": "'Calibri', sans-serif",
    "font-size": "var(--lisio-font-size-regular)",
  },
  "@supports(padding-inline: 10px)":{
    'input[type="text"].lisio-custom-input': {
      "padding-inline": "10px"
    }
  }
};

export { customTextInputStyles };