/*
 * Tooltip: plug-in de Dynamic Action para Oracle APEX.
 * https://github.com/cleitonrcruz/oracle-apex-tooltip
 *
 * Cores e superficie saem das variaveis do Universal Theme, entao o balao acompanha o theme style (claro ou escuro)
 * sem nenhum ajuste. Cada variavel tem valor de reserva para funcionar tambem fora do tema.
 */
.cr-Tooltip {
    --cr-tooltip-accent: var(--ut-palette-success, #2e7d32);
    --cr-tooltip-max-width: 480px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    box-sizing: border-box;
    min-width: min(200px, var(--cr-tooltip-max-width));
    max-width: min(var(--cr-tooltip-max-width), calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 14px 18px 14px 23px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--ut-component-border-color, rgba(16, 24, 40, .1));
    border-radius: 10px;
    background-color: var(--ut-component-background-color, #fff);
    color: var(--ut-component-text-default-color, #2c2c2a);
    /* a faixa na cor do acento e sombra interna: fica parada quando o texto longo rola dentro do balao */
    box-shadow: inset 5px 0 0 var(--cr-tooltip-accent), 0 14px 34px -10px rgba(16, 24, 40, .24),
        0 3px 8px -3px rgba(16, 24, 40, .12);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .18s ease-in, transform .18s ease-in, visibility 0s linear .18s;
}
.cr-Tooltip.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

.cr-Tooltip--primary { --cr-tooltip-accent: var(--ut-palette-primary, #2563eb); }
.cr-Tooltip--warning { --cr-tooltip-accent: var(--ut-palette-warning, #b26a00); }
.cr-Tooltip--danger { --cr-tooltip-accent: var(--ut-palette-danger, #c0392b); }
.cr-Tooltip--neutral { --cr-tooltip-accent: var(--ut-body-text-color, #5f5e5a); }

.cr-Tooltip-label,
.cr-Tooltip-text,
.cr-Tooltip-cta { display: block; }
.cr-Tooltip [hidden] { display: none; }

.cr-Tooltip-label {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cr-tooltip-accent);
}
.cr-Tooltip-text {
    font-size: .875rem;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}
.cr-Tooltip-cta {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--ut-component-border-color, rgba(16, 24, 40, .08));
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cr-tooltip-accent);
}

/* quem tem texto de ajuda mostra o cursor de ajuda; :where deixa a regra sem peso para o app sobrescrever */
:where([data-tip-text]) { cursor: help; }
:where(span, abbr, dfn, em, strong)[data-tip-text] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cr-Tooltip,
    .cr-Tooltip.is-visible { transform: none; transition: none; }
}

/* em alto contraste o navegador tira as sombras: a faixa vira borda */
@media (forced-colors: active) {
    .cr-Tooltip { border-color: CanvasText; border-left: 5px solid Highlight; padding-left: 19px; }
}