// DataTable
//==================================================
.dataTables_wrapper {
    width : 100%;

    .dataTables_filter {
        padding    : 5px;
        text-align : right;
        font-size  : @font-size-small;

        label {

            input {
                margin-left : 5px;
                width       : 250px;
            }
        }
    }

    .dataTable {
    }

    .sorting, .sorting_asc, .sorting_desc {
        cursor        : pointer;
        position      : relative;
        padding-right : 16px;
        border-left   : 1px solid @table-border-color;

        &::after {
            .flexkit-icon();
            content   : "\e0b6";
            font-size : 16px;
            height    : 16px;
            position  : absolute;
            top       : 0;
            bottom    : 0;
            right     : 0;
            margin    : auto;
        }
    }

    .sorting::after {
    }
    .sorting_asc::after {
        content : "\e0b5";
    }
    .sorting_desc::after {
        content : "\e0b2";
    }

    .dataTables_empty {
        text-align : center;
    }
}

.dataTables_paginate {
    margin-top : 1em;
    float      : right;
    font-size  : 12px;

    .paginate_button {
        background : @gray-lighter;
        margin     : 0 .25em;
        padding    : .25em .75em;
        min-width  : 2em;
        .inline-block();
        text-align : center;
        color      : @gray-darker;

        &:hover {
            background : darken(@gray-lighter, 3%);
        }

        &.disabled, &.current {
            cursor     : default;
            color      : darken(@gray-lighter, 5%);
            background : lighten(@gray-lighter, 3%);
        }

        &.current {
            font-weight : bold;
            background  : saturate(screen(@brand-primary, @gray), 10%);
            color       : #fff;
        }

        &.first, &.last, &.previous, &.next {
            &::before, &::after {
                .flexkit-icon()
            }
        }

        &.first, &.last {
            font-weight : bold;

            &::before, &::after {
                font-size   : 15px;
                font-weight : bold;
            }
        }

        &.previous, &.next {

            &::before, &::after {
            }
        }

        &.first, &.previous {
            &::before {
                content : "\e0b1";
            }
        }

        &.last, &.next {
            &::after {
                content : "\e0af";
            }
        }
    }
}