@layer holo-icon {
:where([data-holo-role="IconVisual"]) {
  position: relative;
  display: inline-grid;
  inline-size: 1em;
  block-size: 1em;
  place-items: center;
  flex-shrink: 0;
}
}

:where([data-holo-role="IconSpinner"]) {
  position: absolute;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  inline-size: max(42%, 0.7rem);
  aspect-ratio: 1;
  border: max(2px, 0.18rem) solid color-mix(in srgb, var(--holo-panel),
    transparent 18%);
  border-block-start-color: var(--holo-accent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--holo-panel), transparent 38%);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--holo-accent), transparent
    44%);
  animation: holo-icon-spin 720ms linear infinite;
  pointer-events: none;
}

:where([data-holo-role="IconVisual"][aria-busy="true"], [data-holo-activity-target~="Icon"][data-running="true"] [data-holo-role="IconVisual"][data-holo-activity="Interaction"]) > [data-holo-role="IconSpinner"] {
  display: block;
}

:where([data-holo-role="IconVisual"][aria-busy="true"], [data-holo-activity-target~="Icon"][data-running="true"] [data-holo-role="IconVisual"][data-holo-activity="Interaction"]) > [data-holo-role="Icon"] {
  visibility: hidden;
}

@keyframes holo-icon-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-holo-role="IconSpinner"]) {
    animation-duration: 1.8s;
  }
}

@font-face {
  font-family: "Phosphor-Light";
  src: url("./Icon.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-light {
  font-family: "Phosphor-Light";
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Todo ID semántico conserva una presencia visible aunque el catálogo físico
   no tenga todavía una traducción específica. Las reglas concretas de abajo,
   más específicas, sustituyen este glifo neutral. */
.ph-light::before {
  content: "\e18a";
}

.ph-light.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph-light.ph-arrow-down:before {
  content: "\e03e";
}
.ph-light.ph-arrow-left:before {
  content: "\e058";
}
.ph-light.ph-arrow-right:before {
  content: "\e06c";
}
.ph-light.ph-arrow-up:before {
  content: "\e08e";
}
.ph-light.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph-light.ph-arrows-down-up:before {
  content: "\e098";
}
.ph-light.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph-light.ph-arrows-out:before {
  content: "\e0a2";
}
.ph-light.ph-bank:before {
  content: "\e0b4";
}
.ph-light.ph-book:before {
  content: "\e0e2";
}
.ph-light.ph-book-open:before {
  content: "\e0e6";
}
.ph-light.ph-books:before {
  content: "\e758";
}
.ph-light.ph-caret-circle-down:before {
  content: "\e11e";
}
.ph-light.ph-caret-double-left:before {
  content: "\e128";
}
.ph-light.ph-caret-double-right:before {
  content: "\e12a";
}
.ph-light.ph-caret-down:before {
  content: "\e136";
}
.ph-light.ph-caret-left:before {
  content: "\e138";
}
.ph-light.ph-caret-right:before {
  content: "\e13a";
}
.ph-light.ph-caret-up:before {
  content: "\e13c";
}
.ph-light.ph-chat:before {
  content: "\e15c";
}
.ph-light.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph-light.ph-chat-dots:before {
  content: "\e170";
}
.ph-light.ph-check:before {
  content: "\e182";
}
.ph-light.ph-check-circle:before {
  content: "\e184";
}
.ph-light.ph-circle:before {
  content: "\e18a";
}
.ph-light.ph-circles-three-plus:before {
  content: "\e194";
}
.ph-light.ph-clipboard:before {
  content: "\e196";
}
.ph-light.ph-clock:before {
  content: "\e19a";
}
.ph-light.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph-light.ph-clock-counter-clockwise:before {
  content: "\e1a0";
}
.ph-light.ph-code:before {
  content: "\e1bc";
}
.ph-light.ph-coin:before {
  content: "\e60e";
}
.ph-light.ph-compass:before {
  content: "\e1c8";
}
.ph-light.ph-copy:before {
  content: "\e1ca";
}
.ph-light.ph-crosshair:before {
  content: "\e1d6";
}
.ph-light.ph-cube:before {
  content: "\e1da";
}
.ph-light.ph-database:before {
  content: "\e1de";
}
.ph-light.ph-device-mobile:before {
  content: "\e1e0";
}
.ph-light.ph-diamond:before {
  content: "\e1ec";
}
.ph-light.ph-download:before {
  content: "\e20a";
}
.ph-light.ph-envelope:before {
  content: "\e214";
}
.ph-light.ph-envelope-simple:before {
  content: "\e218";
}
.ph-light.ph-eye:before {
  content: "\e220";
}
.ph-light.ph-file:before {
  content: "\e230";
}
.ph-light.ph-file-text:before {
  content: "\e23a";
}
.ph-light.ph-flask:before {
  content: "\e79e";
}
.ph-light.ph-floppy-disk:before {
  content: "\e248";
}
.ph-light.ph-folder:before {
  content: "\e24a";
}
.ph-light.ph-folder-open:before {
  content: "\e256";
}
.ph-light.ph-gear:before {
  content: "\e270";
}
.ph-light.ph-git-branch:before {
  content: "\e278";
}
.ph-light.ph-git-diff:before {
  content: "\e27c";
}
.ph-light.ph-globe:before {
  content: "\e288";
}
.ph-light.ph-hash:before {
  content: "\e2a2";
}
.ph-light.ph-house:before {
  content: "\e2c2";
}
.ph-light.ph-image:before {
  content: "\e2ca";
}
.ph-light.ph-info:before {
  content: "\e2ce";
}
.ph-light.ph-key:before {
  content: "\e2d6";
}
.ph-light.ph-lightning:before {
  content: "\e2de";
}
.ph-light.ph-link:before {
  content: "\e2e2";
}
.ph-light.ph-list-bullets:before {
  content: "\e2f2";
}
.ph-light.ph-list-checks:before {
  content: "\eadc";
}
.ph-light.ph-list-numbers:before {
  content: "\e2f6";
}
.ph-light.ph-lock:before {
  content: "\e2fa";
}
.ph-light.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph-light.ph-minus:before {
  content: "\e32a";
}
.ph-light.ph-minus-circle:before {
  content: "\e32c";
}
.ph-light.ph-monitor:before {
  content: "\e32e";
}
.ph-light.ph-note:before {
  content: "\e348";
}
.ph-light.ph-package:before {
  content: "\e390";
}
.ph-light.ph-palette:before {
  content: "\e6c8";
}
.ph-light.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph-light.ph-pen-nib:before {
  content: "\e3ac";
}
.ph-light.ph-pencil:before {
  content: "\e3ae";
}
.ph-light.ph-pencil-simple:before {
  content: "\e3b4";
}
.ph-light.ph-phone:before {
  content: "\e3b8";
}
.ph-light.ph-play:before {
  content: "\e3d0";
}
.ph-light.ph-plug:before {
  content: "\e946";
}
.ph-light.ph-plus:before {
  content: "\e3d4";
}
.ph-light.ph-pulse:before {
  content: "\e000";
}
.ph-light.ph-puzzle-piece:before {
  content: "\e596";
}
.ph-light.ph-quotes:before {
  content: "\e660";
}
.ph-light.ph-robot:before {
  content: "\e762";
}
.ph-light.ph-rocket-launch:before {
  content: "\e3fe";
}
.ph-light.ph-scroll:before {
  content: "\eb7a";
}
.ph-light.ph-seal-check:before {
  content: "\e606";
}
.ph-light.ph-shapes:before {
  content: "\ec5e";
}
.ph-light.ph-shield:before {
  content: "\e40a";
}
.ph-light.ph-sidebar:before {
  content: "\eab6";
}
.ph-light.ph-sliders:before {
  content: "\e432";
}
.ph-light.ph-sparkle:before {
  content: "\e6a2";
}
.ph-light.ph-speaker-high:before {
  content: "\e44a";
}
.ph-light.ph-squares-four:before {
  content: "\e464";
}
.ph-light.ph-table:before {
  content: "\e476";
}
.ph-light.ph-terminal:before {
  content: "\e47e";
}
.ph-light.ph-text-b:before {
  content: "\e5be";
}
.ph-light.ph-text-italic:before {
  content: "\e5c0";
}
.ph-light.ph-text-strikethrough:before {
  content: "\e5c2";
}
.ph-light.ph-toggle-left:before {
  content: "\e674";
}
.ph-light.ph-trash:before {
  content: "\e4a6";
}
.ph-light.ph-tree-structure:before {
  content: "\e67c";
}
.ph-light.ph-upload:before {
  content: "\e4be";
}
.ph-light.ph-user:before {
  content: "\e4c2";
}
.ph-light.ph-user-circle:before {
  content: "\e4c4";
}
.ph-light.ph-warning:before {
  content: "\e4e0";
}
.ph-light.ph-warning-circle:before {
  content: "\e4e2";
}
.ph-light.ph-x:before {
  content: "\e4f6";
}
.ph-light.ph-x-circle:before {
  content: "\e4f8";
}