/**
 * Utilidades para Bootstrap Icons.
 *
 * Bootstrap Icons no trae clases de tamano, giro ni ancho fijo: solo el
 * glifo. Font Awesome si las traia, y el sistema las usa en 248 sitios
 * -`fa-spin` en 124, `fa-2x` en 48, `fa-3x` en 41-.
 *
 * Aqui se reproducen con el prefijo `bi-`, con los mismos factores que usaba
 * Font Awesome, para que el marcado migrado se comporte igual.
 */

/* Ancho fijo: alinea los iconos en columna, como en el menu lateral */
.bi-fw {
  width: 1.25em;
  text-align: center;
}

/* Tamanos. Los factores son los de Font Awesome. */
.bi-xs { font-size: .75em; }
.bi-sm { font-size: .875em; }
.bi-lg { font-size: 1.33333em; line-height: .75em; vertical-align: -.0667em; }
.bi-1x { font-size: 1em; }
.bi-2x { font-size: 2em; }
.bi-3x { font-size: 3em; }
.bi-4x { font-size: 4em; }
.bi-5x { font-size: 5em; }
.bi-6x { font-size: 6em; }
.bi-7x { font-size: 7em; }
.bi-8x { font-size: 8em; }
.bi-9x { font-size: 9em; }
.bi-10x { font-size: 10em; }

/* Giro continuo, para los indicadores de carga */
.bi-spin {
  animation: bi-spin 2s linear infinite;
}

/* Giro a saltos, como el `fa-pulse` de Font Awesome */
.bi-pulse {
  animation: bi-spin 1s steps(8) infinite;
}

@keyframes bi-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Quien pida no animar, no ve animacion */
@media (prefers-reduced-motion: reduce) {
  .bi-spin,
  .bi-pulse {
    animation: none;
  }
}

/* Alineacion lateral */
.bi-pull-left { float: left; margin-right: .3em; }
.bi-pull-right { float: right; margin-left: .3em; }

/* Rotaciones y reflejos */
.bi-rotate-90 { transform: rotate(90deg); }
.bi-rotate-180 { transform: rotate(180deg); }
.bi-rotate-270 { transform: rotate(270deg); }
.bi-flip-horizontal { transform: scaleX(-1); }
.bi-flip-vertical { transform: scaleY(-1); }

/* Recuadro e inversion */
.bi-border {
  border: .08em solid rgba(0, 0, 0, .12);
  border-radius: .1em;
  padding: .2em .25em .15em;
}

.bi-inverse { color: #fff; }