@import '~box-ui-elements/es/styles/variables';
@import '../styles';

.bp-PageControlsForm {
    // input[type='number'] is needed to raise specificity level to override Annotations styles
    input[type='number'].bp-PageControlsForm-input {
        width: $bp-controls-size-default;
        height: $bp-controls-size-small;
        padding: $bp-controls-spacing;
        color: $bdl-gray;
        font-size: 13px;
        text-align: center;
        border: 1px solid $bdl-gray;
        border-radius: 0;
        transition: border-color linear .15s;

        /* stylelint-disable property-no-vendor-prefix */
        // Removes the spinner for number type inputs in Firefox
        -moz-appearance: textfield;
        -webkit-font-smoothing: antialiased;

        // Removes the spinner for number type inputs in Webkit browsers
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        /* stylelint-enable property-no-vendor-prefix */

        &:focus {
            border: 1px solid $bdl-box-blue;
            outline: 0;
            box-shadow: none;
        }
    }
}

.bp-PageControlsForm-button {
    @include bp-Control($width: auto);
    @include bp-Control--expand;
}

.bp-PageControlsForm-button-label {
    @include bp-ControlLabel;
}

@include breakpoint($medium-screen) {
    .bp-PageControlsForm-input,
    .bp-PageControlsForm-button-label {
        min-width: $bp-controls-size-large;
    }
}
