@import "../_colors";

body .ui-spinner .ui-spinner-button {
    z-index: auto;
    background-color: $default-color;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: $default-primary-color;
    color: $primary-dark-text-color;
    min-width: unset;
    width: 34px;
    height: 17px;
    padding: 0;

    + .ui-spinner-button {
        border-top: none;
    }
}

body .ui-spinner:not(.ui-state-disabled) .ui-spinner-button:hover {
    background-color: $default-secondary-color;
    color: $primary-dark-text-color;
}

body .ui-spinner:not(.ui-state-disabled) .ui-spinner-button:active {
    background-color: $default-primary-color;
    color: $primary-dark-text-color;
}

.ui-spinner-up {
    border-radius: 0 4px 0 0;
    border-width: 1px 1px 0 1px;
    border-color: $default-primary-color;
}

.ui-spinner-down {
    border-radius: 0 0 4px 0;
    border-width: 0 1px 1px 1px;
    border-color: $default-primary-color;
}

body .ui-spinner:focus {
    border: 1px solid $primary-color;
}