/**
 * EZsalt Help Tip - Inline help icon trigger
 *
 * Usage:
 * <span class="ezs-help-tip" data-help-title="..." data-help-content="..."></span>
 *
 * JS auto-injects the Material Icon. This CSS styles the trigger only.
 * The dialog reuses existing .ezs-dialog-* classes from ezsalt-design-system.css.
 *
 * Dependencies: ezsalt-design-system.css, Material Icons font
 */

/* Inline trigger — sits next to label text */
.ezs-help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: text-bottom;
    cursor: pointer;
    margin-left: 4px;
    outline: none;
    border-radius: 50%;
    transition: background 0.15s ease;
}

/* The injected icon */
.ezs-help-tip .material-icons {
    font-size: 18px;
    color: var(--ezs-on-surface-variant, #666);
    transition: color 0.15s ease;
    line-height: inherit;
}

/* Hover & focus states */
.ezs-help-tip:hover .material-icons,
.ezs-help-tip:focus-visible .material-icons {
    color: var(--ezs-primary, #1998D5);
}

.ezs-help-tip:focus-visible {
    outline: 2px solid var(--ezs-primary, #1998D5);
    outline-offset: 2px;
}