.o-hb-input-field-number {
    @extend %o-hb-input-base;

    flex: 0 1 calc(50% - calc(var(--hb-row-content-gap) * 0.5));
    font-family: $o-we-font-monospace;

    .popover & {
        --o-hb-field-input-bg: var(--o-hb-field-input-bg-popover, #{$o-we-fg-lighter});
        --o-hb-field-color: var(--o-hb-field-color-popover, #{$o-we-bg-lightest});
    }

    .o-hb-input-number {
        appearance: none;
        border: none;
        background: none;
        color: inherit;
        padding: 0;
        margin-right: $o-we-sidebar-content-field-clickable-spacing * 0.5;
    }

    .o-hb-input-field-unit {
        color: var(--o-hb-field-color, #{$o-we-sidebar-content-field-color});
        font-size: $o-we-font-size-xs;
    }
}