@import '../settings/tw';

/*
 * The tooltip, once, for every admin screen.
 *
 * This design was already here and already right - it just lived in
 * settings-list.scss, so only the platform settings screens could reach it.
 * Everything else that wanted a tooltip used a `title` attribute, which the
 * browser renders as a grey slab, after a delay it chooses, in a font nobody
 * picked, and which no stylesheet can touch.
 *
 * Dark on light, because Jakob's law applies to small things as much as large
 * ones. What the convention does not require is react-tooltip's flat grey slab:
 * this is the plugin's own ink, rounded, and small enough to read as a remark
 * rather than a dialog.
 *
 * White on #0A1B33 measures 16.9:1.
 */

/*
 * The tooltip itself.
 *
 * Dark on light, which is the one convention every tooltip everywhere follows -
 * Jakob's law applies to the small things as much as the large ones. What that
 * convention does not require is the flat grey slab react-tooltip ships: this
 * one is the plugin's own ink rather than a generic near-black, it is rounded
 * and small enough to read as a remark rather than a dialog, and it carries an
 * arrow so there is never a question about which mark it belongs to.
 *
 * White on #0A1B33 is 16.9:1.
 */
.mhub-tip.mhub-tip,
.mhub-hint__tip.mhub-hint__tip {
    /* The library ships tooltips at 90% opacity, which greys the ink and
       softens the text with it. */
    --rt-opacity: 1;

    z-index: 60;

    /* A hint, not a paragraph - but wide enough that the common ones land on
       two lines instead of three, because a tall narrow bubble reads as a
       block of text where a wide short one reads as a remark. */
    max-width: 272px;
    padding: 7px 11px 8px;
    border-radius: $rounded-xl;
    background: $brand-ink;
    color: #fff;
    font-family: $font-sans;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.002em;
    text-align: left;
    box-shadow:
        0 6px 16px -5px rgba(10, 27, 51, 0.3),
        0 2px 5px -2px rgba(10, 27, 51, 0.22);

    /*
     * It rises to meet the mark rather than appearing on top of it, which is
     * what tells you the two are one thing. 150ms - well inside Doherty's
     * 260ms, so it still reads as instant.
     */
    transform: translateY(3px);
    transition: opacity 150ms $ease, transform 150ms $ease;

    &.react-tooltip__show {
        transform: translateY(0);
    }
}

/*
 * react-tooltip pads the bubble twice: once on the root, and again on the
 * wrapper it puts the text in. Left alone that second 8px/16px is what makes
 * every hint read as a small dialog rather than a remark - it added 16px of
 * height and 32px of width nothing had asked for. The padding on the rule
 * above is the only padding this bubble gets.
 *
 * Both selectors target the inner wrapper. The first was written as bare
 * `.mhub-tip.mhub-tip` - a comma with the `.react-tooltip-content-wrapper`
 * suffix left off - so it zeroed the whole bubble at the same specificity as
 * the rule above and, being later, won: every `.mhub-tip` hint (the
 * All Meetings row menu among them) rendered with no padding at all, text
 * flush to the rounded edge.
 */
.mhub-tip.mhub-tip .react-tooltip-content-wrapper,
.mhub-hint__tip.mhub-hint__tip .react-tooltip-content-wrapper {
    padding: 0;
}

/*
 * The arrow takes its colour from the bubble by inheritance, so it only needs
 * its corner softened to match the radius above.
 */
.mhub-tip__arrow.mhub-tip__arrow,
.mhub-hint__arrow.mhub-hint__arrow {
    width: 7px;
    height: 7px;
    border-radius: 1.5px;
}

/* A tooltip that slides is a preference; one that slides for somebody who has
   asked things to hold still is a bug. */
@media ( prefers-reduced-motion: reduce ) {

    .mhub-tip.mhub-tip,
    .mhub-hint__tip.mhub-hint__tip {
        transform: none;
        transition: opacity 1ms linear;
    }
}