.prefixed-text-input {
    position: relative;
}

.form-row .prefixed-text-input {
    float: left;
}

[dir="rtl"] .form-row .prefixed-text-input {
    float: right;
}

.prefixed-text-input input {
    position: relative;
    z-index: 1;
    padding-left: calc(6px + var(--prefix-length) * 0.8em);
}

[dir="rtl"] .prefixed-text-input input {
    padding-left: 6px;
    padding-right: calc(6px + var(--prefix-length) * 0.8em);
}

.prefixed-text-input span {
    position: absolute;
    z-index: 2;
}

/* desktop */
.prefixed-text-input span {
    top: calc(5px + 1px);
    left: calc(6px + 2px);
    font-weight: bold;
}

[dir="rtl"] .prefixed-text-input span {
    left: auto;
    right: calc(6px + 2px);
}

/* tablet */
@media (max-width: 1024px) {
    .prefixed-text-input span {
        top: calc(8px + 2px);
        left: calc(6px + 2px);
    }

    [dir="rtl"] .prefixed-text-input span {
        left: auto;
        right: calc(6px + 2px);
    }
}

/* mobile */
@media (max-width: 767px) {
    .prefixed-text-input span {
        top: calc(8px + 2px);
        left: calc(6px + 2px);
    }

    [dir="rtl"] .prefixed-text-input span {
        left: auto;
        right: calc(6px + 2px);
    }
}
