/*
    Styling for the InformationIcon component, the site's circled "i" icon beside a label. The icon is
    in a gray, lower-contrast text color, so it doesn't draw the eye from the label.
*/
.information-icon
{
    /* The tooltip's trigger is a block element, so it is made inline to sit beside the label. */
    > .tooltip-trigger
    {
        display: inline-block;
    }

    /* Styling for the circled "i". */
    .information-icon-symbol
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        margin-left: 0.25rem;
        /* Round, so the focus outline, which follows it, circles the icon. */
        border-radius: 50%;
        color: var(--neutral-surface-low-emphasis-contrast-color);
        /* The help cursor marks it as something to hover for an explanation, not to click. */
        cursor: help;
        vertical-align: middle;

        /* The icon's circle fills about 0.78 of its box, so the box is 1rem over 0.78, keeping the
           circle 1rem across; it reaches past the symbol's box only by its empty margin. */
        ion-icon
        {
            flex-shrink: 0;
            font-size: calc(1rem / 0.78);
        }

        &:hover
        {
            color: var(--neutral-surface-medium-emphasis-contrast-color);
        }

        &:focus-visible
        {
            outline: 2px solid var(--primary-higher-emphasis-color);
            outline-offset: 2px;
        }
    }
}