@use '../core/styles/common/input';
@use '../core/styles/common/tokens' as *;

@use './input-theme' as *;

.kbq-input {
    @include input.kbq-reset-input();

    display: inline-block;
    box-sizing: border-box;

    text-overflow: ellipsis;

    width: 100%;
    min-height: kbq-difference-series-css-variables([size-3xl, calc(var(--kbq-size-border-width) * 2)]);

    padding: var(--kbq-input-size-padding-vertical) var(--kbq-input-size-padding-horizontal);
}

input.kbq-input[type='number'] {
    -moz-appearance: textfield;
}

input.kbq-input[type='number']::-webkit-inner-spin-button,
input.kbq-input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* remove default red border for HTML5 validation invalid fields in Firefox */
input.kbq-input:invalid {
    box-shadow: unset;
}

/* overwrite default placeholder opacity in Firefox */
input.kbq-input::placeholder {
    opacity: 1;
}

@include kbq-input-typography();