$numeric-input-height: 26px;
$numeric-input-buttons-border-radius: 4px;
$numeric-input-default-padding: 18px;
$numeric-input-digit-padding: 10px;

.numeric-input {
    @for $i from 1 through 20 {
        .mod-max-#{$i}-digit {
            width: $i * $numeric-input-digit-padding + $numeric-input-default-padding;
        }
    }

    input {
        height: $numeric-input-height;
        padding: $spacing;
        overflow: hidden;
        color: var(--title-text-color);
        font-size: $title-font-size;
        font-family: var(--main-font);
        text-overflow: ellipsis;
        border: $default-border;
        border-radius: $border-radius;
        box-shadow: inset 0 0 3px 0 rgb(var(--black-rgb) / $transparency-5);

        &:focus {
            @include focus-outline;
        }
    }

    button {
        width: $numeric-input-height;
        height: $numeric-input-height;
        padding: 0 5px;
        color: var(--white);
        line-height: $numeric-input-height;
        background-color: var(--digital-blue-80);
        border-radius: $numeric-input-buttons-border-radius;
        cursor: pointer;

        &:disabled {
            background-color: var(--grey-40);
            pointer-events: none;
        }

        &:hover {
            background-color: var(--digital-blue-100);
        }
    }

    input:focus,
    button:focus {
        @include focus-outline;
    }
}

// override the style of the focus for numeric inputs in Firefox
@supports (-moz-appearance: none) {
    .numeric-input {
        input:focus,
        button:focus {
            outline-style: solid;
            outline-offset: -2px;
        }
    }
}