/* dc-icons: sizing / animation utilities for the inline-SVG icon replacement.
   Replaces the FontAwesome webfont utility classes (fa-2x, fa-fw, fa-spin ...).
   The runtime (js/dc-icons.js) injects a <svg class="dc-svg"> inside every
   <i class="fa …"> element; these rules size and animate that host element. */

.fa, .fas, .far, .fab, .fal, .fat {
    display: inline-block;
    line-height: 1;
    text-rendering: auto;
}
svg.dc-svg { display: inline-block; }

/* fixed width */
.fa-fw { width: 1.25em; text-align: center; }
.fa-fw > svg.dc-svg { width: 1em; }

/* sizes */
.fa-2xs { font-size: .625em; }
.fa-xs  { font-size: .75em; }
.fa-sm  { font-size: .875em; }
.fa-lg  { font-size: 1.25em; vertical-align: -.075em; }
.fa-xl  { font-size: 1.5em; }
.fa-2xl { font-size: 2em; }
.fa-1x  { font-size: 1em; }
.fa-2x  { font-size: 2em; }
.fa-3x  { font-size: 3em; }
.fa-4x  { font-size: 4em; }
.fa-5x  { font-size: 5em; }
.fa-6x  { font-size: 6em; }
.fa-7x  { font-size: 7em; }
.fa-8x  { font-size: 8em; }
.fa-9x  { font-size: 9em; }
.fa-10x { font-size: 10em; }

/* bordered / pulled */
.fa-border { border: solid .08em #eee; border-radius: .1em; padding: .2em .25em .15em; }
.fa-pull-left  { float: left;  margin-right: .3em; }
.fa-pull-right { float: right; margin-left: .3em; }

/* list */
.fa-ul { margin-left: 2.5em; padding-left: 0; list-style-type: none; }
.fa-ul > li { position: relative; }
.fa-li { position: absolute; left: -2em; width: 2em; text-align: center; }

/* animation */
@keyframes dc-fa-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.fa-spin  { animation: dc-fa-spin 2s linear infinite; }
.fa-pulse { animation: dc-fa-spin 1s steps(8) infinite; }
@media (prefers-reduced-motion: reduce) {
    .fa-spin, .fa-pulse { animation-duration: 0s; }
}

/* rotate / flip */
.fa-rotate-90  { transform: rotate(90deg); }
.fa-rotate-180 { transform: rotate(180deg); }
.fa-rotate-270 { transform: rotate(270deg); }
.fa-flip-horizontal { transform: scaleX(-1); }
.fa-flip-vertical   { transform: scaleY(-1); }
.fa-flip-both       { transform: scale(-1, -1); }

/* --- контекстное меню деревьев (jquery.contextMenu) ------------------------
   Вендорное правило рассчитано на FontAwesome-5-JS, который ЗАМЕНЯЕТ <i> на
   <svg>, поэтому у него совпадает ровно один из двух селекторов:

       .context-menu-icon--fa5 i,
       .context-menu-icon--fa5 svg { position:absolute; top:.3em; left:.5em }

   dc-icons.js вкладывает <svg> ВНУТРЬ <i> — совпадают оба. <i> становится
   абсолютным (а значит контейнером для потомка), и смещение .5em применяется
   дважды: иконка уезжает на 1em, съедая весь отступ пункта (2em) и упираясь
   в подпись. Широкие иконки (eye-slash — 1.25em) наезжают на текст.
   По вертикали фиксированный top:.3em промахивается мимо центра строки.

   Возвращаем один слот 2em с центрированием по обеим осям — ту же геометрию,
   что у шрифтового варианта (.context-menu-icon::before: width:2em,
   text-align:center, вертикальный центр). Специфичность выше вендорной
   (0,3,1 против 0,2,1), поэтому порядок подключения файлов роли не играет. */
.context-menu-item.context-menu-icon.context-menu-icon--fa5 > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: auto;
}

/* Вложенный svg — обычный поток: центрирует его флексом родитель, второе
   абсолютное позиционирование как раз и складывало смещения. */
.context-menu-item.context-menu-icon.context-menu-icon--fa5 > i > svg {
    position: static;
    top: auto;
    left: auto;
}

/* stacked icons */
.fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; }
.fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; }
.fa-stack-1x { line-height: inherit; }
.fa-stack-2x { font-size: 2em; }
.fa-inverse { color: #fff; }