/*
 * The shape a field wants, drawn behind the field.
 *
 * A contact number is `+93 XX XXX XXXX` and a tazkira is `0000-0000-00000`,
 * and neither of those is obvious from an empty box. So the remainder of the
 * pattern is painted underneath the caret and eaten away as digits arrive:
 * `XX XXX XXXX` becomes `74 XXX XXXX` becomes `74 476 XXXX`.
 *
 * It is a sibling laid over the input rather than anything inside it, because
 * an <input> cannot hold two colours of text. The part the user has already
 * typed is repeated here in transparent ink purely to take up the right amount
 * of room, so the hint always begins exactly where the real text stops — the
 * geometry is copied from the input itself in input-masks.js, which is what
 * keeps this honest across the admin theme, the public site and RTL.
 */
/*
 * A telephone number and a tazkira read left to right in every language this
 * system speaks. Left to inherit an RTL page's `text-align: right`, the input
 * would flush `74 4` against one edge while the hint behind it flushed
 * `74 4XX XXXX` against the same edge, and the two would sit on top of each
 * other. So a masked field is an LTR island, the way `.ltr-num` already is.
 *
 * `input.hms-masked` rather than a bare class: assets/css/rtl.css already
 * right-aligns `input[type="tel"]`, and a class loses to an attribute selector.
 * Matching its specificity and loading after it is enough — no !important.
 */
input.hms-masked {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

.hms-mask-ghost {
    position: absolute;
    z-index: 3;
    margin: 0;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    white-space: pre;
    background: none;
    border-style: solid;
    border-color: transparent;

    /* Never take the click, the caret or the selection away from the input. */
    pointer-events: none;
    user-select: none;
}

.hms-mask-ghost > span {
    white-space: pre;
}

/* Occupies the width of what is typed without ever being seen. */
.hms-mask-ghost .hms-mask-typed {
    color: transparent;
}

/* The part still to come. `currentColor` so it follows the theme — the ghost
   is given the input's own colour, and only the opacity marks it as a hint. */
.hms-mask-ghost .hms-mask-rest {
    opacity: 0.38;
}