.m-pagination {
    font-size: 13px;
    color: #353c44;
    line-height: 28px;

    &&--blod {
        font-weight: bold;
    }

    .m-pager {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .m-pagination-total {
        margin-right: 5px;
        vertical-align: middle;
    }

    .m-pagination-prev,
    .m-pagination-next,
    .m-pager-number {
        display: inline-block;
        cursor: pointer;
        min-width: 30px;
        height: 28px;
        text-align: center;
        vertical-align: middle;

        &:hover,
        &.active {
            color: #409eff;
        }

        a {
            color: inherit;
            text-decoration: none;
            display: block;
            height: 100%;
            width: 100%;
        }

        &.disabled,
        &:disabled {
            cursor: not-allowed;
            color: #c0c4cc;
        }
    }

    .m-pagination-prev,
    .m-pagination-next {
        background: none;
        outline: none;
        border: none;
        padding: 0 10px;
    }

    .m-pagination-sizes {
        height: 29px;
        border-radius: 3px;
        border: solid 1px #DCDFE6;
        outline: none;
        margin: 0 4px;
        font-size: 12px;
        padding: 0 10px;
        vertical-align: middle;

        &:hover {
            border-color: #409EFF;
        }

        &:focus {
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.16);
        }
    }

    &.is-background {

        .m-pagination-prev,
        .m-pagination-next,
        .m-pager-number {
            background: #F4F4F5;
            margin: 0 5px;
            border-radius: 2px;
        }

        .m-pager-number {
            &.active {
                background: #409EFF;
                color: #fff;
            }

            &.disabled {
                filter: grayscale(1);
            }
        }
    }

    &.text-center {
        text-align: center;
    }

    &.text-right {
        text-align: right;
    }
}