input-field.less

.ffe-input-field {
    display: block;
    height: 2.8125rem;
    padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm); /* Increased horizontal padding */
    font-family: var(--ffe-g-font);
    font-variant-numeric: tabular-nums;
    background-color: var(--ffe-color-surface-primary-default);
    color: var(--ffe-color-foreground-default);
    border-radius: var(--ffe-g-border-radius);
    border: 1px solid var(--ffe-color-border-primary-default);
    transition: all var(--ffe-transition-duration) var(--ffe-ease);
    width: 100%;
    font-size: var(--ffe-fontsize-form-input);

    &[type='date'] {
        display: flex;
        padding-left: var(--ffe-spacing-xs);
    }

    &::-webkit-date-and-time-value {
        text-align: left;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            border-color: var(--ffe-color-border-primary-hover);
            box-shadow: 0 0 0 1px var(--ffe-color-border-primary-hover);
        }
    }

    &:focus,
    &:focus-within {
        border: 1px solid var(--ffe-color-border-interactive-focus);
        box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-focus);
        outline: none;
    }

    &--inline {
        display: inline-block;
        width: auto;
    }

    &--text-right-align {
        text-align: right;
    }

    &--condensed {
        height: 2.25rem;
    }

    &--text-like.ffe-input-field {
        border: none;
        border-bottom: 2px solid var(--ffe-color-border-primary-default);
        border-radius: 0;
        box-shadow: none;
        text-align: center;
        padding: 0;
        display: inline-block;
        height: 2em;
        transition: all var(--ffe-transition-duration) var(--ffe-ease);
        background-color: transparent;

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                border-color: var(--ffe-color-border-primary-hover);
                background-color: var(
                    --ffe-color-component-form-input-fill-default-hover
                );
            }
        }

        &:focus {
            border-bottom: 2px solid var(--ffe-color-border-interactive-focus);
        }

        &[aria-invalid='true'] {
            background: var(--ffe-color-surface-feedback-critical);
            border-bottom: 2px solid var(--ffe-color-border-feedback-critical);
            border-left-style: none;
            border-right-style: none;
            border-top-style: none;
        }
    }

    &::-ms-clear {
        display: none;
    }

    &::placeholder {
        color: var(--ffe-color-foreground-subtle);
        opacity: 1;
    }
}

.ffe-input-field--invalid,
:where(input).ffe-input-field[aria-invalid='true'] {
    border: 2px solid var(--ffe-color-border-feedback-critical);
    background-color: var(--ffe-color-component-form-input-fill-critical);

    &:focus {
        border: 2px solid var(--ffe-color-border-feedback-critical);
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            border-color: var(--ffe-color-border-feedback-critical);
        }
    }
}