.input-group > .for-phone {
    position: relative;
}

.input-group > .for-phone > input.for-phone {
    position: relative;
    z-index: 2;
    /* background: transparent; */
    padding-left: 28px;
    font-kerning: none;
    font-variant-ligatures: none;
    letter-spacing: 0;
}

.input-group > .for-phone > .phone-placeholder {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding-left: var(--_spacing---spacing-utility-rem--0-75rem);
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--component-input--font-size);
    font-kerning: none;
    font-variant-ligatures: none;
    letter-spacing: 0;
}

.input-group > .for-phone > .phone-placeholder .prefix {
    display: inline-flex;
    align-items: center;
    column-gap: 1px;
    color: inherit;
}

.input-group > .for-phone > .phone-placeholder .phone-mask {
    display: inline;
}

.input-group > .for-phone > .phone-placeholder .phone-mask-char {
    display: inline;
    white-space: pre;
}

.input-group > .for-phone > .phone-placeholder .phone-mask-char.is-literal {
    color: inherit;
}

.input-group > .for-phone > .phone-placeholder .phone-mask-char.is-digit {
    color: inherit;
}

.input-group > .for-phone > .phone-placeholder .phone-mask-char.is-slot {
    color: rgba(0, 0, 0, 0.45);
}