@charset "UTF-8";

$pager-clr-main-bg:     #e64545;
$pager-clr-main-hover-bg: #d92121;

$pager-clr-n-bd:        #ced3d9;
$pager-clr-n-bg:        #f5f7fa;
$pager-clr-n-hover-bg:  #e6ecf2;

$pager-clr-disable-bd:  #dae0e6;
$pager-clr-disable-bg:  #edf0f2;
$pager-clr-disable-txt: #b2b2b2;

$pager-clr-txt-xx:      #222;
$pager-clr-txt-x:       #555;


%paper {
    a{
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        border: 1px solid $pager-clr-n-bd;
        background: $pager-clr-n-bg;
        margin: 0 2px;
        border-radius: 3px;
        text-decoration: none;
        color: $pager-clr-txt-xx;
        vertical-align: top;
        &:hover{
            background: $pager-clr-n-hover-bg;
        }
        .micon{
            cursor: pointer;
        }
    }
    .dot,.current{
        display: inline-block;
        vertical-align: top;
        height: 30px;
        line-height: 30px;
        padding: 0 6px;
    }
    .current{
        min-width: 18px;
        color: $pager-clr-main-bg;
        text-align: center;
    }
  .disClick {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    margin: 0 2px;
    border-radius: 3px;
    text-decoration: none;
    vertical-align: top;
    cursor: not-allowed;
    background: $pager-clr-disable-bg;
    border: 1px solid $pager-clr-disable-bd;
    color: $pager-clr-disable-txt;
    .micon {
      line-height: 28px;
    }
  }
    a[disabled],a[disabled]:hover{
        cursor: not-allowed;
        background: $pager-clr-disable-bg;
        border:1px solid $pager-clr-disable-bd;
        color: $pager-clr-disable-txt;
        .micon{
            cursor: not-allowed;
        }
    }
    .micon{
        margin-right: 0;
    	line-height: 28px;
    }
    .page-main{
        background: $pager-clr-main-bg;
        border: 1px solid $pager-clr-main-bg;
        color: #fff;
        &:hover{
            border-color: $pager-clr-main-hover-bg;
            background: $pager-clr-main-hover-bg;
        }
    }
}

.pager{
    @extend %paper;
}

.pager-simple{
    .pager-box{
        display: inline-block;
        width: 67px;
        height: 28px;
        border: 1px solid $pager-clr-n-bd;
        border-radius: 3px;
        vertical-align: top;
        overflow: hidden;
        font-size: 0;
        a,button{
            float: left;
            width: 33px;
            text-align: center;
            line-height: 28px;
            height:28px;
            background: $pager-clr-n-bg;
            color: $pager-clr-txt-x;
            border: 0;
            &:hover{
                background: $pager-clr-n-hover-bg;
            }
        }
        a:first-child,button:first-child{
            border-right: 1px solid $pager-clr-n-bd;
        }
        button:first-child{
            width: 34px;
        }
        .micon,.ob-icon{
            margin-right: 0;
        }
    }
    .page-num{
        display: inline-block;
        line-height: 30px;
        vertical-align: top;
        color: $pager-clr-txt-x;
        margin-right: 6px;
    }
}