/*Dentro lo stile del componente non influenza gli elementi esterni*/
my-tickets {
	
   /***********************
   * TOKEN GENERICI (base)
   ***********************/
  --color-black: #000;
  --color-white: #fff;
  --color-primary: #0054B7;
  --color-secondary: #ff8f00;
  --color-highlight: #e3e0de;
  --color-warning: var(--bs-warning);
  --color-gray-mid: #f4f4f4;
  --color-gray-muted: #6c757d;

  --space-0: 0;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-12: 3rem;
  --border-radius-2: 2px;
  --border-radius-5: 5px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-style-solid: solid;

  --box-shadow-default: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --box-shadow-none: none;

  --transition-border-color: border-color 0.5s ease;

  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --font-family-mono: "Roboto Mono", monospace;

  /***********************
   * VARIABILI TICKET (autoesplicative)
   ***********************/

  /*** COLORI ***/
  --ticket-form-background-color: #fff!important;
  --ticket-card-border-color: var(--color-primary);
  --ticket-link-text-color: var(--color-primary);
  --ticket-link-text-color-hover: var(--color-primary);
  --ticket-form-title-border-color: var(--color-primary);
  --ticket-hover-background-color: var(--color-warning);
  --ticket-input-background-color: var(--color-white);
  --ticket-body-background-color: var(--color-white);
  
  /*** ticket container **/
  --ticket-container-background-color: var(--color-white);
  --ticket-container-section-padding: var(--ticket-container-section-padding);
  --ticket-container-section-padding-vertical: var(--space-4);
  --ticket-container-section-padding-horizontal: var(--space-4);
  --ticket-container-color-txt: var(--color-black);

  --ticket-txt-msg-color: var(--color-gray-muted);


  /*** BORDI E RAGGI ***/
  --ticket-border-radius: var(--border-radius-5);
  --ticket-border-width: var(--border-width-3);
  --ticket-border-style: var(--border-style-solid);
  --ticket-card-border-none: 0;

  /*** SPAZIATURE ***/
  --ticket-section-padding: var(--space-5pct);
  --ticket-padding-none: var(--space-0);

  /*** OMBRE ***/
  --ticket-card-box-shadow: var(--box-shadow-default);
  --ticket-card-box-shadow-hover: var(--box-shadow-none);

  /*** TRANSIZIONI ***/
  --ticket-transition-border: var(--transition-border-color);

  /*** LINK DECORATION ***/
  --ticket-link-text-decoration: none;
  --ticket-link-text-decoration-hover: underline;

  /*** HEADER LAYOUT ***/
  --ticket-header-display: flex;
  --ticket-header-justify-content: space-between;
  --ticket-header-align-items: center;

  /***********************
   * VARIABILI TIMELINE (ticket)
   ***********************/
  --ticket-timeline-line-width: 4px;
  --ticket-timeline-line-gradient-start: #ff8f00;
  --ticket-timeline-line-gradient-end: #ff8f00;

  --ticket-timeline-card-title-font-size: var(--font-size-md);
  --ticket-timeline-card-title-line-height: var(--line-height-base);
  --ticket-timeline-card-title-font-weight: var(--font-weight-bold);
  --ticket-timeline-card-title-color: var(--color-dark);

  --ticket-timeline-list-btn-border-width: var(--border-width-1);
  --ticket-timeline-list-btn-border-color: var(--color-primary);
  --ticket-timeline-list-btn-border-radius: var(--border-radius-5);
  --ticket-timeline-list-btn-bg: var(--color-white);
  --ticket-timeline-list-btn-padding-vertical: var(--space-2);
  --ticket-timeline-list-btn-padding-horizontal: var(--space-4);
  --ticket-timeline-list-btn-font-size: var(--font-size-md);
  --ticket-timeline-list-btn-font-weight: var(--font-weight-regular);
  --ticket-timeline-list-btn-line-height: var(--line-height-base);
  --ticket-timeline-list-btn-color: var(--color-primary);

  --ticket-timeline-pin-icon-width: var(--space-12);
  --ticket-timeline-pin-icon-height: var(--space-12);
  --ticket-timeline-pin-icon-border-radius: var(--space-12);
  --ticket-timeline-pin-icon-border-width: var(--border-width-2);
  --ticket-timeline-pin-icon-box-shadow: var(--box-shadow-default);
    --ticket-timeline-pin-icon-background: #ff8f00;

  --ticket-timeline-pin-text-color: #000;
  --ticket-timeline-pin-text-bg: #ff8f00;
  --ticket-timeline-pin-text-border-radius: var(--border-radius-2);
  --ticket-timeline-pin-text-font-family: var(--font-family-mono);
  --ticket-timeline-pin-text-font-size: var(--font-size-sm);
  --ticket-timeline-pin-text-font-weight: var(--font-weight-semibold);
  --ticket-timeline-pin-text-line-height: var(--line-height-base);
  --ticket-timeline-pin-text-text-transform: uppercase;
}

/*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*/
  
}