@import "inc/bootstrap";

.datatable-wrapper {
    .datatable-header {
        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));
        @include vendor-prefix(align-items, center, property, (-ms-, -webkit-, ''));
        @include vendor-prefix(justify-content, space-between, property, (-ms-, -webkit-, ''));
    }
    h2 {
        font-family: $headingFont;
        @include font-size(18);
        margin: 30px 0 10px;
    }
    .action-bar {
        margin: 10px 0;
        .btn-info{
            overflow: hidden;
            background: transparent;
            border : 1px  white(.3) solid;
        }
    }
    .filter {
        display: inline-block;
        position: relative;
        text-align: right;
        width: 100%;
        margin-bottom: 10px;
        input {
            padding-right: 30px;
            min-width: 250px;
        }
        button {
            position: absolute;
            right: 1px;
            top: -1px;
            cursor: default;
            opacity: .5;
            background: transparent;
            width: 25px;
            height : 25px;
            &:before {
                color: #666;
            }
        }
        &.column {
            float: none;
            width: auto;
            text-align: left;
            margin-bottom: 0;
            input {
                min-width: inherit;
            }
        }
    }
    .datatable-pagination-bottom,
    .datatable-pagination-top {
        overflow-x: hidden;
    }
}

.datatable-container {
    overflow-y: auto;
    .empty {
        text-align: center;
        margin: 2rem 0;
    }
}
table.datatable {
    &.matrix {
        th {
            vertical-align: top;
            padding: 2px 2px;
        }
        tr.selected {
            background: $darkBlueGrey;
        }
    }
    &.hoverable {
        tr:hover  {
            background: $lightBlueGrey;
            cursor: pointer;
        }
    }
    th{
        cursor: not-allowed;
        .sortable, .sorted {
            cursor: pointer;
            position: relative;
            padding-right: 20px;
            &:after{
                @include tao-icon-setup;
                position: absolute;
                right: 5px;
                color: $uiClickableActiveBg;
            }
            &:hover,&:active,&:focus {
               &:after {
                 color: $uiClickableHoverBg;
               }
            }
        }
        .sortable:after {
            @include icon-spinner;
            top: 3px;
        }
        .sorted.sorted_asc:after{
            @include icon-down;
        }
        .sorted.sorted_desc:after{
            @include icon-up;
        }
        .comment {
            color: $textSecondary;
        }
    }
    tr{
        &.selected {
            background: $darkBlueGrey;
        }
        &.highlight {
            background-color: $warningBgColor !important;
        }
    }
    th,
    td{
        &.checkboxes{
            width: 20px;
            text-align: center;
            box-sizing: content-box;
            padding: 4px;

            > input[type="checkbox"]{
                margin: 0;
            }
        }
        &.actions {
            text-align: center;
        }
        button{
            text-transform: capitalize;
        }
        [class^="icon-"],
        [class*=" icon-"] {
            width: 14px;
            display: inline-block;
            text-align: center;
        }
    }
}