/* Copyright (C) 2016 NooBaa */

data-table {
    .column();
    position: relative;
    text-align: center;
    overflow-y: hidden;
    background-color: rgb(var(--color01));
    border-bottom: 1px solid rgb(var(--color07));
    color: rgb(var(--color17));
    width: 100%;
    min-height: 126px;

    &.content-box {
        border-bottom: unset;
    }

    table {
        display: block;
        border-collapse: collapse;
        overflow-y: auto;
        z-index: 1;

        &.table-disabled  {
            opacity: .1;
            pointer-events: none;
        }

        &::-webkit-scrollbar-track {
            margin-top: 40px;
        }
    }

    thead {
        line-height: 40px;
        text-transform: capitalize;
        font-size: @font-size1;

        > tr > th {
            position: sticky;
            z-index: 1;
            top: 0;

            &::after{
                .fill();
                content: '';
                top: auto;
                height: 1px;
                background-color: rgb(var(--color07));
            }

        }
    }

    table,
    thead,
    thead tr,
    th {
        background-color: inherit;
    }

    tbody > tr + tr {
        border-top: 1px solid rgb(var(--color07));
    }

    th, td {
        padding: 0 @gutter/2;
        box-sizing: content-box;

        &:first-child {
            padding-left: @gutter;
        }

        &:last-child {
            padding-right: @gutter;
        }
    }

    th {
        font-weight: @font-regular;

        .sortable {
            position: relative;
            padding-right: @gutter/2 + 6px;
            cursor: @cursor-pointer;

            &::before, &::after {
                content: '';
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                right: 0;
                border: solid transparent;
                border-width: 4px 4px;
            }

            &:before {
                top: -2px;
                border-bottom-color: rgb(var(--color10))
            }


            &::after {
                bottom: -2px;
                border-top-color: rgb(var(--color10));
            }

            &.des::before {
                border-bottom-color: rgb(var(--color17));
            }

            &.asc::after {
                border-top-color: rgb(var(--color17));
            }
        }
    }

    .main-row {
        line-height: 44px;
        height: 44px;
        font-size: @font-size2;

        &.row-disabled {
            opacity: .25;
            pointer-events: none;
        }
    }


    .sub-row {
        height: auto;
        vertical-align: top;
        font-size: @font-size2;
        border-top: none;

        > div {
            margin-bottom: @gutter;
        }

        li {
            padding: @gutter/2 0;
        }
    }

    .empty-message {
        margin: @gutter;
        position: relative;
        text-align: left;
        font-size: @font-size4;
        color: rgb(var(--color11));
    }

    .expand-col {
        min-width: 28px;
    }

    /* Default cell templates css */

    .text-cell, .link-cell {
        width: 100%;
        text-overflow: ellipsis;
        overflow-x: hidden;
        line-height: 1.5;
    }

    .link-cell {
        a {
            margin-left: 2px;

            &:focus {
                outline-offset: 1px;
            }
        }
    }
}
