table,
table.dataTable {
    width: 100%;
    margin: 2em 0 1em;

    border-bottom: none !important; //datatables override

    caption {
        @include font(sans, bold);
        @include font-size(m);

        text-align: left;
    }

    thead {
        th {
            padding: .5em 1em;

            border-bottom: solid 2px color($gray, lighter)  !important;
            outline: none;

            font-size: font-size(s);
            font-weight: font-weight(500);
            text-align: left;
            text-transform: uppercase;
        }
    }

    tbody {
        tr {
            &.-added:nth-child(odd) {
                background: color($green, lightest) !important;
            }
            &.-added:nth-child(even) {
                background: lighten(color($green, lightest), 3%) !important;
            }
            &.-is-disabled {
                background: color($red, lightest) !important;
            }
        }

        tr:last-child td {
            border-bottom-color: color( $gray, lighter);
        }

        tr:nth-child(odd) {
            background-color: color($gray, lightest);
        }

        td {
            padding: .5em 1em;
            vertical-align: middle;

            border-bottom: 2px transparent solid;

            //variations
            &.-small {
                font-size: font-size(s);
            }
            &.-center {
                text-align: center;
            }
            &.-right {
                text-align: right;
            }
            &.-remark {
                color: color($gray, dark);

                font-size: font-size(xs);
                font-style: italic,;
            }
        }
    }


    //variations
    &.-compact {
        td,
        th {
            padding: .25em 1em;

            font-size: font-size(s);
        }
    }

    &.-sortable {
        th:first-child {
            padding-left: 2rem;
        }

        tbody tr {
            cursor: move;

            &[data-sortable='disabled'] {
                cursor: default;
                td:first-child:before {
                    display: none;
                }
            }

            &.ui-sortable-helper {
                box-shadow: 0 1px 20px rgba(0, 0, 0, .25);
                opacity: .85;
                td {
                    background-color: color($blue, lightest);
                    border-bottom-color: transparent !important;
                }
            }

            &.ui-sortable-placeholder td {
                height: 2rem !important;
            }
        }

        td:first-child {
            padding-left: 0;

            white-space: nowrap;

            &:first-child:before {
                content: '\f07d';

                display: inline-block;
                width: 2rem;

                color: color($gray, dark);

                font-family: font-family(icons);
                font-size: font-size(s);
                text-align: center;
            }
        }

        td.dataTables_empty:before {
            display: none !important;
            padding: 2em 0 !important;

            cursor: default;
        }
    }
}