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-light-cream::before {
      
      background-color: var(--colour-light-cream);
    }
    
    span.svg.fg-light-cream::after {
      
      background-color: var(--colour-light-cream);
    }
  
    span.svg.bg-light-blue::before {
      
      background-color: var(--colour-light-blue);
    }
    
    span.svg.fg-light-blue::after {
      
      background-color: var(--colour-light-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-darker::before {
      
      background-color: var(--colour-bg-darker);
    }
    
    span.svg.fg-bg-darker::after {
      
      background-color: var(--colour-bg-darker);
    }
  
    span.svg.bg-bg-dark-alt::before {
      
      background-color: var(--colour-bg-dark-alt);
    }
    
    span.svg.fg-bg-dark-alt::after {
      
      background-color: var(--colour-bg-dark-alt);
    }
  
    span.svg.bg-bg-black::before {
      
      background-color: var(--colour-bg-black);
    }
    
    span.svg.fg-bg-black::after {
      
      background-color: var(--colour-bg-black);
    }
  
    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-white::before {
      
      background-color: var(--colour-text-white);
    }
    
    span.svg.fg-text-white::after {
      
      background-color: var(--colour-text-white);
    }
  
    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-text-muted::before {
      
      background-color: var(--colour-text-muted);
    }
    
    span.svg.fg-text-muted::after {
      
      background-color: var(--colour-text-muted);
    }
  
    span.svg.bg-text-subtle::before {
      
      background-color: var(--colour-text-subtle);
    }
    
    span.svg.fg-text-subtle::after {
      
      background-color: var(--colour-text-subtle);
    }
  
    span.svg.bg-text-body-dark::before {
      
      background-color: var(--colour-text-body-dark);
    }
    
    span.svg.fg-text-body-dark::after {
      
      background-color: var(--colour-text-body-dark);
    }
  
    span.svg.bg-text-credit::before {
      
      background-color: var(--colour-text-credit);
    }
    
    span.svg.fg-text-credit::after {
      
      background-color: var(--colour-text-credit);
    }
  
    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);
    }
  
    span.svg.bg-facebook-blue::before {
      
      background-color: var(--colour-facebook-blue);
    }
    
    span.svg.fg-facebook-blue::after {
      
      background-color: var(--colour-facebook-blue);
    }
  
    span.svg.bg-instagram-pink::before {
      
      background-color: var(--colour-instagram-pink);
    }
    
    span.svg.fg-instagram-pink::after {
      
      background-color: var(--colour-instagram-pink);
    }
  
    span.svg.bg-dark-overlay::before {
      
      background-color: var(--colour-dark-overlay);
    }
    
    span.svg.fg-dark-overlay::after {
      
      background-color: var(--colour-dark-overlay);
    }