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-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-secondary::before {
      
      background-color: var(--colour-brand-secondary);
    }
    
    span.svg.fg-brand-secondary::after {
      
      background-color: var(--colour-brand-secondary);
    }
  
    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-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-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-grey::before {
      
      background-color: var(--colour-text-grey);
    }
    
    span.svg.fg-text-grey::after {
      
      background-color: var(--colour-text-grey);
    }
  
    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-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-accent-color::before {
      
      background-color: var(--colour-accent-color);
    }
    
    span.svg.fg-accent-color::after {
      
      background-color: var(--colour-accent-color);
    }
  
    span.svg.bg-main-blue::before {
      
      background-color: var(--colour-main-blue);
    }
    
    span.svg.fg-main-blue::after {
      
      background-color: var(--colour-main-blue);
    }
  
    span.svg.bg-light-grey1::before {
      
      background-color: var(--colour-light-grey1);
    }
    
    span.svg.fg-light-grey1::after {
      
      background-color: var(--colour-light-grey1);
    }
  
    span.svg.bg-light-grey2::before {
      
      background-color: var(--colour-light-grey2);
    }
    
    span.svg.fg-light-grey2::after {
      
      background-color: var(--colour-light-grey2);
    }
  
    span.svg.bg-light-background::before {
      
      background-color: var(--colour-light-background);
    }
    
    span.svg.fg-light-background::after {
      
      background-color: var(--colour-light-background);
    }
  
    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-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-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-hover::before {
      
      background-color: var(--colour-hover);
    }
    
    span.svg.fg-hover::after {
      
      background-color: var(--colour-hover);
    }
  
    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-dark-background::before {
      
      background-color: var(--colour-dark-background);
    }
    
    span.svg.fg-dark-background::after {
      
      background-color: var(--colour-dark-background);
    }
  
    span.svg.bg-border-color::before {
      
      background-color: var(--colour-border-color);
    }
    
    span.svg.fg-border-color::after {
      
      background-color: var(--colour-border-color);
    }
  
    span.svg.bg-border::before {
      
      background-color: var(--colour-border);
    }
    
    span.svg.fg-border::after {
      
      background-color: var(--colour-border);
    }
  
    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-input-border-color::before {
      
      background-color: var(--colour-input-border-color);
    }
    
    span.svg.fg-input-border-color::after {
      
      background-color: var(--colour-input-border-color);
    }
  
    span.svg.bg-input-bg-color::before {
      
      background-color: var(--colour-input-bg-color);
    }
    
    span.svg.fg-input-bg-color::after {
      
      background-color: var(--colour-input-bg-color);
    }
  
    span.svg.bg-light-green-cat::before {
      
      background-color: var(--colour-light-green-cat);
    }
    
    span.svg.fg-light-green-cat::after {
      
      background-color: var(--colour-light-green-cat);
    }
  
    span.svg.bg-light-blue-cat::before {
      
      background-color: var(--colour-light-blue-cat);
    }
    
    span.svg.fg-light-blue-cat::after {
      
      background-color: var(--colour-light-blue-cat);
    }
  
    span.svg.bg-light-pink-cat::before {
      
      background-color: var(--colour-light-pink-cat);
    }
    
    span.svg.fg-light-pink-cat::after {
      
      background-color: var(--colour-light-pink-cat);
    }
  
    span.svg.bg-light-gray-cat::before {
      
      background-color: var(--colour-light-gray-cat);
    }
    
    span.svg.fg-light-gray-cat::after {
      
      background-color: var(--colour-light-gray-cat);
    }
  
    span.svg.bg-required::before {
      
      background-color: var(--colour-required);
    }
    
    span.svg.fg-required::after {
      
      background-color: var(--colour-required);
    }
  
    span.svg.bg-review-color::before {
      
      background-color: var(--colour-review-color);
    }
    
    span.svg.fg-review-color::after {
      
      background-color: var(--colour-review-color);
    }
  
    span.svg.bg-old-price::before {
      
      background-color: var(--colour-old-price);
    }
    
    span.svg.fg-old-price::after {
      
      background-color: var(--colour-old-price);
    }
  
    span.svg.bg-discount-price-bg::before {
      
      background-color: var(--colour-discount-price-bg);
    }
    
    span.svg.fg-discount-price-bg::after {
      
      background-color: var(--colour-discount-price-bg);
    }
  
    span.svg.bg-submit::before {
      
      background-color: var(--colour-submit);
    }
    
    span.svg.fg-submit::after {
      
      background-color: var(--colour-submit);
    }
  
    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-rating-star::before {
      
      background-color: var(--colour-rating-star);
    }
    
    span.svg.fg-rating-star::after {
      
      background-color: var(--colour-rating-star);
    }
  
    span.svg.bg-like-button::before {
      
      background-color: var(--colour-like-button);
    }
    
    span.svg.fg-like-button::after {
      
      background-color: var(--colour-like-button);
    }
  
    span.svg.bg-dislike-button::before {
      
      background-color: var(--colour-dislike-button);
    }
    
    span.svg.fg-dislike-button::after {
      
      background-color: var(--colour-dislike-button);
    }
  
    span.svg.bg-data-labels::before {
      
      background-color: var(--colour-data-labels);
    }
    
    span.svg.fg-data-labels::after {
      
      background-color: var(--colour-data-labels);
    }
  
    span.svg.bg-favourite-color::before {
      
      background-color: var(--colour-favourite-color);
    }
    
    span.svg.fg-favourite-color::after {
      
      background-color: var(--colour-favourite-color);
    }
  
    span.svg.bg-delete-btn-color::before {
      
      background-color: var(--colour-delete-btn-color);
    }
    
    span.svg.fg-delete-btn-color::after {
      
      background-color: var(--colour-delete-btn-color);
    }
  
    span.svg.bg-delete-btn-bg::before {
      
      background-color: var(--colour-delete-btn-bg);
    }
    
    span.svg.fg-delete-btn-bg::after {
      
      background-color: var(--colour-delete-btn-bg);
    }
  
    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-table-row-border-color::before {
      
      background-color: var(--colour-table-row-border-color);
    }
    
    span.svg.fg-table-row-border-color::after {
      
      background-color: var(--colour-table-row-border-color);
    }