/* =============================================================================
   INFO ICON — the one "more information" affordance for the whole system.

   THE DESIGN IS DEFINED ONCE, in the custom properties below. Everything else
   in this file just points at them.

   New markup must use the template tag, never a hand-rolled icon:

       {% load ui_components %}
       {% info_icon title="Courier Receipt" text="Upload the receipt ..." %}

   See core/templatetags/ui_components.py and templates/components/info_icon.html.

   The second half of this file is a compatibility layer for the ~450 icon-font
   call sites that predate the component (bi-info-circle, bi-info-circle-fill,
   fas fa-info-circle, fa-solid fa-circle-info). It repaints all of them with
   the same artwork, size and colour, so the product is consistent today rather
   than after 200 template rewrites. Convert those to the tag as you touch them;
   nothing here needs to change when you do.

   The tooltip bubble is the shared smart tooltip (#appTooltip in base.html +
   css/custom-tooltip.css + js/custom-tooltip.js). This file only owns the glyph.
   ============================================================================= */

:root {
    /* The artwork. Same path as templates/components/info_icon.html, as a mask
       so the legacy icon fonts can be repainted with it. Used as a mask, not an
       image: the fill colour is irrelevant, only the shape matters. */
    --ui-info-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 16 A8 8 0 1 0 8 0 A8 8 0 0 0 8 16 Z M8 14.6 A6.6 6.6 0 1 1 8 1.4 A6.6 6.6 0 0 1 8 14.6 Z M8 3.6 A1 1 0 1 1 8 5.6 A1 1 0 0 1 8 3.6 Z M8 6.8 A0.85 0.85 0 0 1 8.85 7.65 V11.35 A0.85 0.85 0 0 1 7.15 11.35 V7.65 A0.85 0.85 0 0 1 8 6.8 Z'/%3E%3C/svg%3E");

    /* Taken from the customer pages' cu-info-icon, which is the reference
       design: a 12px muted-grey filled circle sitting mid-line next to its
       label. One size on purpose — a size knob is how icon sets drift apart. */
    --ui-info-icon-size: 12px;
    --ui-info-icon-color: #6b7280;
    --ui-info-icon-color-hover: #918151;
    /* For the few icons that sit on a dark surface, where the muted grey has
       too little contrast. Same escape hatch as the `light` tone. */
    --ui-info-icon-color-on-dark: #ffffff;
    --ui-info-icon-gap: 4px;
    --ui-info-icon-align: middle;
}

/* =============================================================================
   1. THE COMPONENT
   ============================================================================= */

.ui-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    /* Absolute, so the glyph keeps its size inside headings, labels and tables. */
    font-size: var(--ui-info-icon-size);
    line-height: 1;
    vertical-align: var(--ui-info-icon-align);
    margin-left: var(--ui-info-icon-gap);
    flex-shrink: 0;
    color: var(--ui-info-icon-color);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ui-info-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    /* The tooltip is bound to the wrapper; let the SVG stay out of the way. */
    pointer-events: none;
}

.ui-info-icon:hover,
.ui-info-icon:focus {
    color: var(--ui-info-icon-color-hover);
}

.ui-info-icon:focus {
    outline: none;
}

.ui-info-icon:focus-visible {
    outline: 2px solid rgba(145, 129, 81, 0.55);
    outline-offset: 2px;
}

/* ---------- Tones ----------
   The default (muted grey) is the standard. Reach for these only when the icon
   sits on a surface where the default has too little contrast. */
.ui-info-icon--theme { color: var(--ui-info-icon-color-hover); }
.ui-info-icon--dark  { color: #220035; }
.ui-info-icon--light { color: #ffffff; }

.ui-info-icon--light:hover,
.ui-info-icon--light:focus {
    color: rgba(255, 255, 255, 0.75);
}

/* =============================================================================
   2. LEGACY ICON-FONT CALL SITES

   Add the class `ui-info-icon-exempt` to opt an icon out — for the handful that
   are status markers rather than a help affordance (e.g. the blue marker in the
   pre-start checklist, which belongs with the check / cross / warning glyphs
   around it), or that sit on a dark surface and need their own colour.
   ============================================================================= */

.bi-info-circle:not(.ui-info-icon-exempt),
.bi-info-circle-fill:not(.ui-info-icon-exempt),
.fa-info-circle:not(.ui-info-icon-exempt),
.fa-circle-info:not(.ui-info-icon-exempt) {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    font-size: var(--ui-info-icon-size) !important;
    line-height: 1 !important;
    vertical-align: var(--ui-info-icon-align) !important;
    color: var(--ui-info-icon-color) !important;
    cursor: pointer !important;
    /* Undoes the bold some pages set on these; irrelevant once masked, but the
       icon fonts render heavier when it is left on. */
    font-weight: normal !important;
    transition: color 0.15s ease;
}

.bi-info-circle:not(.ui-info-icon-exempt):hover,
.bi-info-circle-fill:not(.ui-info-icon-exempt):hover,
.fa-info-circle:not(.ui-info-icon-exempt):hover,
.fa-circle-info:not(.ui-info-icon-exempt):hover {
    color: var(--ui-info-icon-color-hover) !important;
}

/* Swap the font glyph for the component's artwork. This is what makes the
   outline (bi-info-circle), filled (bi-info-circle-fill) and Font Awesome
   variants draw as one icon — and it is version-independent, which matters
   because the app loads bootstrap-icons 1.10.3 on some pages and 1.11.3 on
   others, and their codepoints are not guaranteed to agree. */
.bi-info-circle:not(.ui-info-icon-exempt)::before,
.bi-info-circle-fill:not(.ui-info-icon-exempt)::before,
.fa-info-circle:not(.ui-info-icon-exempt)::before,
.fa-circle-info:not(.ui-info-icon-exempt)::before {
    content: "" !important;
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--ui-info-icon-glyph) center / contain no-repeat;
            mask: var(--ui-info-icon-glyph) center / contain no-repeat;
}

/* Font Awesome runs in SVG mode here (assets/js/all.min.js rewrites the <i>
   into an <svg>), so the rules above never see a ::before to work with. */
svg.svg-inline--fa.fa-circle-info:not(.ui-info-icon-exempt) {
    width: 1em !important;
    height: 1em !important;
    font-size: var(--ui-info-icon-size) !important;
    vertical-align: var(--ui-info-icon-align) !important;
    color: var(--ui-info-icon-color);
    cursor: pointer;
    background-color: currentColor;
    -webkit-mask: var(--ui-info-icon-glyph) center / contain no-repeat;
            mask: var(--ui-info-icon-glyph) center / contain no-repeat;
}

svg.svg-inline--fa.fa-circle-info:not(.ui-info-icon-exempt):hover {
    color: var(--ui-info-icon-color-hover);
}

svg.svg-inline--fa.fa-circle-info:not(.ui-info-icon-exempt) > path {
    display: none !important;
}