@import (reference) "color";

.table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    border: 1px solid @SilveryGrey;
    box-shadow: 3px 3px 3px @Grey;
    border-spacing: 0;
    margin-bottom: 20px;
    border-collapse: collapse;
    background: white;

    thead>tr,
    tr {
        >th,
        >td {
            text-align: left;
            background: white;
        }
    }

    thead>tr>td,
    thead>tr>th{
        border-bottom: 0;
        background-color: @LightGrey;
    }

    thead>tr,
    tbody>tr,
    tfoot>tr,
    tr {
        >th,
        >td {
            line-height: 34px;
            padding: 8px 8px 8px 20px;
            vertical-align: middle;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            &:focus {
                outline: none;
            }
        }
    }

    tbody>tr,
    tfoot>tr,
    tr {
        > th,
        > td {
            border-top: 1px solid @SilveryGrey;
            border-bottom: 1px solid @SilveryGrey;
        }
    }
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
        > tr:first-child {
            > th,
            > td {
                border-top: 0;
            }
        }
    }
}

.basic-table {
    tbody>tr:hover >td {
        background-color: fade(@LightSkyBlue, 20);
    }
}