.calculation-input {
    --py: var(--ui-space-stack-md);
    --px: var(--ui-space-stack-xs2);
    --gap: var(--ui-space-stack-xs2);
    --border-w: 1px;
    --border-clr: var(--app-neutral-300);
    display: flex;
    align-items: center;
    line-height: 1;
    gap: var(--gap);
    padding: calc(var(--py) - var(--border-w)) calc(var(--px) - var(--border-w));
    border: var(--border-w) solid var(--border-clr);
    border-radius: var(--app-border-md);
    background-color: var(--ui-color-palette-white-base);
    transition: border-color .3s;
}

.calculation-input__field {
    flex-grow: 1;
    width: 100%;
    border: 0;
    padding: 0;
    outline: none !important;
}
.calculation-input span {
    transform: translateY(1px);
}

.calculation-input.focus-visible {
    --border-clr: var(--clr-enable);
}

.calculation-input:hover {
    --border-clr: var(--clr-enable);
}