@import "../../variables";
@import "../../mixin/set-input-look";
@import "../../mixin/set-native-states";

.input-native-container {
    display: flex;
    padding: $padding;
    align-items: center;

    @include setBorder(
            $border-color,
            $border-width,
            $border-style,
            $border-radius
    );

    &.sz-focus {
        border-color: $border-color-focus;
    }

    // hide arrows in Chrome, Safari, Edge, Opera
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    // hide arrows in Firefox
    input[type=number] {
        -moz-appearance: textfield;
    }
}