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

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

/**
 * Custom choice CSS
 * @source
 */
const customChoiceStyles: LisioCSSRules = {
  "ul.lisio-custom-choice": {
    display: "flex",
    "flex-direction": "column",
    "align-items": "center",
    "row-gap": "8px",
    "border-radius": "var(--lisio-border-radius-extra-large)",
    margin: "0",
    padding: "8px 0",
    width: "90%",
    "list-style": "none",
  },
  "ul.lisio-custom-choice.primary": {
    "background-color": "var(--lisio-background-color-primary)",
  },
  "ul.lisio-custom-choice.secondary": {
    "background-color": "var(--lisio-background-color-secondary)",
  },
  "ul.lisio-custom-choice.full": {
    width: "100%",
  },
  "ul.settings-section li.lisio-custom-list-item ul.lisio-custom-choice": {
    width: "100%",
  },
  ".settings-section .lisio-custom-choice": {
    width: "47%",
  },
};

export { customChoiceStyles };