@import 'proto-ui.vusion/src/u-pagination.vue/module.css';

$item_size: 30px;

.root {
    text-align: right;
}

.item {
    padding: 0;
    min-width: auto;
    width: $item_size;
    height: $item_size;
    line-height: 28px;
    background: white;
    color: #555;
    border: 1px solid #ccc;
    margin-left: -1px;
    cursor: $cursor-pointer;
}

.item:hover {
    background: #eee;
    color: $brand-primary;
}

.item[selected] {
    position: relative;
    background: $brand-primary;
    color: white;
    border-color: $brand-primary;
}

.item[disabled] {
    background: none;
    color: $field-disabled-color;
    border-color: #dedede;
}

.item[role="prev"] {
    border-radius: $border-radius-base 0 0 $border-radius-base;
    color: #999;
}

.item[role="next"] {
    border-radius: 0 $border-radius-base $border-radius-base 0;
    color: #999;
}

.item[role="blank"] {
    background: none;
    border: none;
    color: #555;
}

.root[disabled] .item {
    background: none;
    color: $field-disabled-color;
}

.root[disabled] .item[selected] {
    background: white;
}