{"version":3,"file":"animatedIcon.module.mjs","names":[],"sources":["../../../../package/common/animatedIcon/animatedIcon.module.pcss"],"sourcesContent":[".animatedIcon {\n  position: relative;\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n\n  /* Fab's original technique: a single shared rotation on the whole icon, not per layer — both\n     the outgoing and incoming icon sit at the exact same angle at every instant, only their\n     opacity differs, which is what makes the spin read as one coherent piece rather than two\n     icons independently rotating past each other. Always a further full turn per step (not\n     Fab's 225°, which only worked there because its \"+\" icon looks identical rotated 45°) so an\n     arbitrary icon always lands back upright, no matter how many times it's toggled. A real\n     `transition`, so retapping mid-spin reverses smoothly from wherever it currently is instead\n     of snapping. */\n  &-spin {\n    transition: transform var(--animated-icon-duration, 200ms) ease;\n    transform: rotate(var(--animated-icon-spin-rotation, 0deg));\n\n    /* The wrapper alone carries the rotation in this variant — the two layers underneath it\n       only need to crossfade, not rotate individually. */\n    .animatedIcon-layer {\n      &:first-child,\n      &:last-child {\n        transform: none;\n      }\n    }\n  }\n\n  /* Two layers, always both mounted — never conditionally rendered. A `transition` only\n     retargets smoothly when the property changes on an element already on screen; a freshly-\n     mounted element with its \"final\" state applied in the same paint has no \"from\" state to\n     animate from. Keeping both layers permanently in the DOM (like Fab does) and only ever\n     toggling which one is `-front` is what makes this cancel cleanly mid-transition instead of\n     jumping or finishing a stale animation. */\n  &-layer {\n    position: absolute;\n    inset: 0;\n\n    /* FontAwesome's unlayered `height: 1em` outranks anything short of !important from inside the\n       library's layer, and has no variable to set instead. */\n    width: 100% !important;\n    height: 100% !important;\n    opacity: 0;\n    transition:\n      opacity var(--animated-icon-duration, 200ms) ease,\n      transform var(--animated-icon-duration, 200ms) ease;\n\n    /* Fixed per-layer resting pose (not per-toggle) — the first layer always approaches/leaves\n       through +90°, the second always through -90°, so which direction a given swap rotates in\n       depends only on which layer is taking over, the same way Fab's own icon always rotates\n       between two fixed angles rather than accumulating. */\n    &:first-child {\n      transform: rotate(90deg) scale(0.5);\n\n      &.animatedIcon-layer-front {\n        transform: none;\n      }\n    }\n\n    &:last-child {\n      transform: rotate(-90deg) scale(0.5);\n\n      &.animatedIcon-layer-front {\n        transform: none;\n      }\n    }\n\n    &-front {\n      opacity: 1;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animatedIcon-spin,\n  .animatedIcon-layer {\n    transition: none;\n  }\n}\n"],"mappings":""}