span.svg {
    
    display: inline-grid;
    
    grid-template-columns: auto;
    grid-template-rows: auto;
    
    justify-items: start;
    align-items: start;
    
    column-gap: 0.25rem;          /* distanca midis ikonës dhe përmbajtjes */
  }
    
  span.svg::before,                                   /* frame */
  span.svg::after {                                   /* icon */
    
    content: "";
    
    height: calc(var(--default-line-height) * 1em);     /* madhësia e pseudo-elementit */
    aspect-ratio: 1;
    
    grid-column: 1;
    grid-row: 1;
  }
  
  span.svg::before {

    background-color: transparent;              /* default background color */
  }

  span.svg::after {

    mask-size: var(--default-font-size);        /* madhësia e imazhit */
    mask-position: center center;
    mask-repeat: no-repeat;

    background-color: currentColor;             /* default icon color */
  }
  
    span.svg.bg-brand-main::before {
      
      background-color: var(--colour-brand-main);
    }
    
    span.svg.fg-brand-main::after {
      
      background-color: var(--colour-brand-main);
    }
  
    span.svg.bg-brand-dark::before {
      
      background-color: var(--colour-brand-dark);
    }
    
    span.svg.fg-brand-dark::after {
      
      background-color: var(--colour-brand-dark);
    }
  
    span.svg.bg-brand-main-light::before {
      
      background-color: var(--colour-brand-main-light);
    }
    
    span.svg.fg-brand-main-light::after {
      
      background-color: var(--colour-brand-main-light);
    }
  
    span.svg.bg-brand-alt-red::before {
      
      background-color: var(--colour-brand-alt-red);
    }
    
    span.svg.fg-brand-alt-red::after {
      
      background-color: var(--colour-brand-alt-red);
    }
  
    span.svg.bg-brand-alt-green::before {
      
      background-color: var(--colour-brand-alt-green);
    }
    
    span.svg.fg-brand-alt-green::after {
      
      background-color: var(--colour-brand-alt-green);
    }
  
    span.svg.bg-brand-alt-blue::before {
      
      background-color: var(--colour-brand-alt-blue);
    }
    
    span.svg.fg-brand-alt-blue::after {
      
      background-color: var(--colour-brand-alt-blue);
    }
  
    span.svg.bg-bg-light::before {
      
      background-color: var(--colour-bg-light);
    }
    
    span.svg.fg-bg-light::after {
      
      background-color: var(--colour-bg-light);
    }
  
    span.svg.bg-bg-dark::before {
      
      background-color: var(--colour-bg-dark);
    }
    
    span.svg.fg-bg-dark::after {
      
      background-color: var(--colour-bg-dark);
    }
  
    span.svg.bg-bg-form::before {
      
      background-color: var(--colour-bg-form);
    }
    
    span.svg.fg-bg-form::after {
      
      background-color: var(--colour-bg-form);
    }
  
    span.svg.bg-text-light::before {
      
      background-color: var(--colour-text-light);
    }
    
    span.svg.fg-text-light::after {
      
      background-color: var(--colour-text-light);
    }
  
    span.svg.bg-text-dark::before {
      
      background-color: var(--colour-text-dark);
    }
    
    span.svg.fg-text-dark::after {
      
      background-color: var(--colour-text-dark);
    }
  
    span.svg.bg-text-gray::before {
      
      background-color: var(--colour-text-gray);
    }
    
    span.svg.fg-text-gray::after {
      
      background-color: var(--colour-text-gray);
    }
  
    span.svg.bg-text-dark-gray::before {
      
      background-color: var(--colour-text-dark-gray);
    }
    
    span.svg.fg-text-dark-gray::after {
      
      background-color: var(--colour-text-dark-gray);
    }
  
    span.svg.bg-bg-gray::before {
      
      background-color: var(--colour-bg-gray);
    }
    
    span.svg.fg-bg-gray::after {
      
      background-color: var(--colour-bg-gray);
    }
  
    span.svg.bg-border-gray::before {
      
      background-color: var(--colour-border-gray);
    }
    
    span.svg.fg-border-gray::after {
      
      background-color: var(--colour-border-gray);
    }
  
    span.svg.bg-button-gray::before {
      
      background-color: var(--colour-button-gray);
    }
    
    span.svg.fg-button-gray::after {
      
      background-color: var(--colour-button-gray);
    }
  
    span.svg.bg-wide-stripe-default::before {
      
      background-color: var(--colour-wide-stripe-default);
    }
    
    span.svg.fg-wide-stripe-default::after {
      
      background-color: var(--colour-wide-stripe-default);
    }
  
    span.svg.bg-required::before {
      
      background-color: var(--colour-required);
    }
    
    span.svg.fg-required::after {
      
      background-color: var(--colour-required);
    }
  
    span.svg.bg-active::before {
      
      background-color: var(--colour-active);
    }
    
    span.svg.fg-active::after {
      
      background-color: var(--colour-active);
    }
  
    span.svg.bg-inactive::before {
      
      background-color: var(--colour-inactive);
    }
    
    span.svg.fg-inactive::after {
      
      background-color: var(--colour-inactive);
    }
  
    span.svg.bg-paid::before {
      
      background-color: var(--colour-paid);
    }
    
    span.svg.fg-paid::after {
      
      background-color: var(--colour-paid);
    }
  
    span.svg.bg-unpaid::before {
      
      background-color: var(--colour-unpaid);
    }
    
    span.svg.fg-unpaid::after {
      
      background-color: var(--colour-unpaid);
    }
  
    span.svg.bg-price-strike-through::before {
      
      background-color: var(--colour-price-strike-through);
    }
    
    span.svg.fg-price-strike-through::after {
      
      background-color: var(--colour-price-strike-through);
    }
  
    span.svg.bg-invoice-table-header::before {
      
      background-color: var(--colour-invoice-table-header);
    }
    
    span.svg.fg-invoice-table-header::after {
      
      background-color: var(--colour-invoice-table-header);
    }
  
    span.svg.bg-feedback-confirmation::before {
      
      background-color: var(--colour-feedback-confirmation);
    }
    
    span.svg.fg-feedback-confirmation::after {
      
      background-color: var(--colour-feedback-confirmation);
    }
  
    span.svg.bg-feedback-attention::before {
      
      background-color: var(--colour-feedback-attention);
    }
    
    span.svg.fg-feedback-attention::after {
      
      background-color: var(--colour-feedback-attention);
    }
  
    span.svg.bg-list-bullet-included::before {
      
      background-color: var(--colour-list-bullet-included);
    }
    
    span.svg.fg-list-bullet-included::after {
      
      background-color: var(--colour-list-bullet-included);
    }
  
    span.svg.bg-ratings-star::before {
      
      background-color: var(--colour-ratings-star);
    }
    
    span.svg.fg-ratings-star::after {
      
      background-color: var(--colour-ratings-star);
    }
  
    span.svg.bg-whatsapp-green::before {
      
      background-color: var(--colour-whatsapp-green);
    }
    
    span.svg.fg-whatsapp-green::after {
      
      background-color: var(--colour-whatsapp-green);
    }