/*!
 * platform-tools icon modifiers (pti-*) — the same Font Awesome-style modifiers
 * on top of any pack: <i class="bi bi-camera pti pti-2x pti-spin" aria-hidden="true"></i>
 * or <i class="am am-camera pti pti-fw"></i>. README "Icon packs".
 *
 * Only pti-* classes are styled here: native `bi bi-*` markup without them is
 * untouched. Colour is always currentColor (text-primary etc. tint the icon).
 * Tunables: --pti-spin-duration, --pti-pulse-duration, --pti-border-color,
 * --pti-border-width, --pti-border-radius, --pti-li-width, --pti-stack-size.
 * Duotone (two-layer art only): pti-duotone, pti-swap-opacity and
 * --pti-primary-color/-opacity, --pti-secondary-color/-opacity (end of file).
 */

/* Tunables (a site overrides them in its own :root or on any ancestor). */
:root {
  --pti-spin-duration: 2s;
  --pti-pulse-duration: 1s;
  --pti-border-width: .08em;
  --pti-border-color: var(--bs-border-color, currentColor);
  --pti-border-radius: .1em;
  --pti-li-width: 2em;
  --pti-stack-size: 2em;
}

/* Base: an inline box that can be transformed (an inline <i> cannot). */
.pti {
  display: inline-block;
  line-height: 1;
  vertical-align: -.125em;
}
/* Font packs draw the glyph in ::before with their own vertical offset; inside
   a .pti box it sits at the top, so the box is exactly 1em and spins on its
   centre. (Two attribute-free classes beat `.bi::before` without !important.) */
.pti[class]::before { vertical-align: top; }

/* ── Sizes (relative to the surrounding text, like fa-xs … fa-10x) ─────── */
.pti-xs  { font-size: .75em; }
.pti-sm  { font-size: .875em; }
.pti-lg  { font-size: 1.25em; }
.pti-xl  { font-size: 1.5em; }
.pti-2x  { font-size: 2em; }
.pti-3x  { font-size: 3em; }
.pti-4x  { font-size: 4em; }
.pti-5x  { font-size: 5em; }
.pti-6x  { font-size: 6em; }
.pti-7x  { font-size: 7em; }
.pti-8x  { font-size: 8em; }
.pti-9x  { font-size: 9em; }
.pti-10x { font-size: 10em; }

/* ── Fixed width: icons line up in menus and lists ─────────────────────── */
.pti-fw {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

/* ── Animation ─────────────────────────────────────────────────────────── */
.pti-spin,
.pti-pulse {
  display: inline-block;
  transform-origin: 50% 50%;
}
.pti-spin  { animation: pti-spin var(--pti-spin-duration, 2s) linear infinite; }
.pti-pulse { animation: pti-spin var(--pti-pulse-duration, 1s) steps(8) infinite; }
@keyframes pti-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pti-spin,
  .pti-pulse { animation: none; }
}

/* ── Rotate and flip (combinable: one transform built from variables) ──── */
.pti-rotate-90   { --pti-rotate: 90deg; }
.pti-rotate-180  { --pti-rotate: 180deg; }
.pti-rotate-270  { --pti-rotate: 270deg; }
.pti-flip-h      { --pti-flip-x: -1; }
.pti-flip-v      { --pti-flip-y: -1; }
.pti-flip-both   { --pti-flip-x: -1; --pti-flip-y: -1; }
.pti-rotate-90,
.pti-rotate-180,
.pti-rotate-270,
.pti-flip-h,
.pti-flip-v,
.pti-flip-both {
  display: inline-block;
  transform: rotate(var(--pti-rotate, 0deg)) scale(var(--pti-flip-x, 1), var(--pti-flip-y, 1));
}

/* ── Border and pull (an icon beside a paragraph) ──────────────────────── */
.pti-border {
  display: inline-block;
  padding: .2em .25em .15em;
  border: var(--pti-border-width, .08em) solid var(--pti-border-color, var(--bs-border-color, currentColor));
  border-radius: var(--pti-border-radius, .1em);
}
.pti-pull-start {
  float: left;
  float: inline-start;
  margin-inline-end: .3em;
}
.pti-pull-end {
  float: right;
  float: inline-end;
  margin-inline-start: .3em;
}

/* ── Lists: <ul class="pti-ul"><li><i class="… pti-li"></i>Texto</li></ul> ── */
.pti-ul {
  list-style: none;
  margin-inline-start: calc(var(--pti-li-width, 2em) * 1.25);
  padding-inline-start: 0;
}
.pti-ul > li { position: relative; }
.pti-li {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--pti-li-width, 2em) * -1.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pti-li-width, 2em);
  height: 1.5em;
  height: 1lh;
  line-height: inherit;
  vertical-align: baseline;
}

/* ── Stacks: two icons on top of each other ────────────────────────────── */
/* <span class="pti-stack"><i class="bi bi-circle-fill pti-stack-2x"></i>
     <i class="bi bi-flag-fill pti-stack-1x pti-inverse"></i></span>        */
.pti-stack {
  position: relative;
  display: inline-block;
  width: var(--pti-stack-size, 2em);
  height: var(--pti-stack-size, 2em);
  line-height: var(--pti-stack-size, 2em);
  vertical-align: middle;
}
.pti-stack-1x,
.pti-stack-2x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  vertical-align: baseline;
}
.pti-stack-2x { font-size: 2em; }
.pti-stack-1x::before,
.pti-stack-2x::before { vertical-align: top; }
.pti-inverse { color: var(--bs-body-bg, #fff); }

/* ── Duotone: Font Awesome's duotone with pti names (README "Duotone") ───── */
/* Two-tone art has a primary and a secondary layer (`.pti-primary` /
   `.pti-secondary` shapes in the inline packs; ::before/::after in a mask pack's
   duotone_css). Variables, set on the icon or any ancestor:
     --pti-primary-color     (unset: the art's own colour; currentColor on masks)
     --pti-secondary-color   (unset: the art's own colour; currentColor on masks)
     --pti-primary-opacity   (1)    only under .pti-duotone
     --pti-secondary-opacity (.4)   only under .pti-duotone
   Nothing is declared here: the defaults are var() fallbacks (as FA does), so
   an ancestor can set them and an icon with no variable looks as before. The
   colours are painted by the shapes themselves (inline fallbacks written at
   import). `.pti-duotone` turns on the faded secondary; `.pti-swap-opacity`
   swaps which layer is faded. `--pti-o` is internal: a shape's own opacity. */
@property --pti-o {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.pti-duotone .pti-primary {
  opacity: calc(var(--pti-o, 1) * var(--pti-primary-opacity, 1));
}
.pti-duotone .pti-secondary {
  opacity: calc(var(--pti-o, 1) * var(--pti-secondary-opacity, .4));
}
.pti-duotone.pti-swap-opacity .pti-primary {
  opacity: calc(var(--pti-o, 1) * var(--pti-secondary-opacity, .4));
}
.pti-duotone.pti-swap-opacity .pti-secondary {
  opacity: calc(var(--pti-o, 1) * var(--pti-primary-opacity, 1));
}