/*Dentro lo stile del componente non influenza gli elementi esterni*/
my-knowledge-base {
   /***********************
   * DESIGN TOKENS BASE
   ***********************/
  --color-black: #000;
  --color-white: #fff;
  --color-primary: #0054B7;
  --color-secondary: #ff8f00;
  --color-highlight: #e3e0de;

  --radius-none: 0;
  --radius-sm: 5px;
  
  --border-width-xs: 1px;
  --border-width-md: 3px;
  --border-style-solid: solid;

  --spacing-none: 0;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-1: 1rem;
  --spacing-2: 1.5rem;

  --font-weight-bold: bold;
  --font-size-xs: 10px;

  --shadow-card: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --shadow-card-hover: 0 .5rem 1rem rgba(0, 0, 0, .45);
  --shadow-none: none;

  --transition-border: border-color .5s ease;

  --cursor-pointer: pointer;

  /***********************
   * KLB CUSTOM PROPERTIES
   ***********************/

  /*** LINKS ***/
  --klb-link-text-color: var(--color-primary);
  --klb-link-text-color-hover: var(--color-primary);
  --klb-link-text-decoration: none;
  --klb-link-text-decoration-hover: underline;

  /*** LINK ASSISTENZA ***/
  --klb-assistance-link-text-color: var(--color-primary);
  --klb-assistance-link-text-color-hover: var(--color-black);
  --klb-assistance-link-text-decoration: none;
  --klb-assistance-link-text-decoration-hover: underline;

  /*** LISTE ***/
  --klb-list-marker-content: "•";
  --klb-list-marker-color: var(--color-black);
  --klb-list-marker-spacing-x: var(--spacing-xs);
  --klb-list-marker-font-size: var(--font-size-xs);
  --klb-list-marker-font-weight: var(--font-weight-bold);

  /*** INPUT GROUP ***/
   --klb-form-group-mt: 1.5rem;
  --klb-input-height: 45px;
  --klb-input-vertical-align: center;
  --klb-input-display: flex;
  --klb-input-border-radius: var(--radius-none);
  --klb-input-btn-pa: var( --spacing-1);
  --klb-input-pa: var(--spacing-none);
  --klb-input-group-mb: 0px;
  --klb-list-group-item-padding-y: var(--spacing-1);
  --klb-list-group-item-padding-x: var(--spacing-1);
  --klb-list-group-color: var(--bs-list-group-color);
  --klb-list-group-bg: var(--bs-list-group-bg);
  --klb-list-group-border-width: 1px;
  --klb-list-group-border-color:  rgba(0, 0, 0, 0.125);
  --klb-list-group-mt: 0px;

  /*** LIST ITEM (HOVER) ***/
  --klb-list-item-hover-text-color: var(--color-black);
  --klb-list-item-hover-background-color: var(--color-highlight);
  --klb-list-item-hover-icon-color: var(--color-black);

  /*** CARD ***/
  --klb-csi-ce--knowledge-base-px: 0px;
  --klb-card-col-gx: var( --spacing-s);
  --klb-card-col-gy: var(--spacing-2);
  --klb-card-border-width: var(--border-width-xs);
  --klb-card-border-style: var(--border-style-solid);
  --klb-card-border-color: #d9d9d9;
  --klb-card-border-color-hover: #d9d9d9;
  --klb-card-border-radius: var(--radius-sm);
  --klb-card-padding: 1%;
  --klb-card-box-shadow: var(--shadow-card);
  --klb-card-box-shadow-hover: var(--shadow-card-hover);
  --klb-card-transition: var(--transition-border);
  --klb-card-clickable-bg: var(--klb-card-clickable-bg);
  --klb-card-clickable-bg-hover: var(--color-secondary);
  --klb-card-color-hover: var(--color-black);

  /*** INTERATTIVITÀ ***/
  --klb-pointer-cursor: var(--cursor-pointer);
  
  
}

/*Le variabili esterne ai componenti devono essere definite a parte o prese dal root*/
body {
  /*ATTENZIONE! Impostato così sovrascrive tutta la pagina ospite se il file css è l'ultimo importato*/
  
}