/* icons.css */

/* Налаштування */
:root {
  --icons-path: "/images/icons"; 
  --icon-size: 22px;              
  --icon-gap: 6px;                
}

p {
  margin: 5px;
}

a {
    display: inline-flex;
    /* Вирівнюємо іконку та текст по центру */
    align-items: top; 
    justify-content: center; 
}


/*
a {
  display: inline-flex;
  /* Вирівнюємо іконку по верхньому краю тексту 
  align-items: flex-start; 
  /* Важливо: вирівнювання по лівому краю, щоб текст не "гуляв"
  justify-content: flex-start; 
  text-align: left; /* Щоб текст усередині посилання притискався до лівого краю 
  text-decoration: none;
}
*/

a[href$=".pdf"]::before,
a[href$=".xml"]::before,
a[href$=".docx"]::before,
a[href$=".p7s"]::before {
  content: "";
  display: inline-block;

  width: var(--icon-size);
  height: var(--icon-size);
  
  /* !!! КЛЮЧОВЕ ВИПРАВЛЕННЯ !!! 
     Забороняє іконці стискатися, зберігаючи її фіксований розмір */
  flex-shrink: 0; 
  
  background-size: contain;
  background-repeat: no-repeat;
  
/* Трохи підправимо відступ, щоб іконка була на рівні першого рядка */
  margin-top: 2px; 
  margin-right: var(--icon-gap);
  /* Приберіть margin-left: 10px, якщо хочете, щоб конструкція була чітко по центру комірки */
  margin-left: 0;
  
/*  margin-right: var(--icon-gap); 
  margin-left: 10px;*/
  
  /* власне команди для іконок */
  background-image: url('/images/icons/pdf.png'); /* для PDF */
}

a[href$=".p7s"]::before {
  background-image: url('/images/icons/p7s.png'); /* для P7S */
}

a[href$=".xml"]::before {
  background-image: url('/images/icons/xml72.png'); /* для XML */
}

a[href$=".docx"]::before {
  background-image: url('/images/icons/word.png'); /* для DOCX */
}