@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';
@import '../2-Tools/transitions';


table {
    width: 100%;

    th {
        text-align: left;
    }
    
    th, td {
        height: 40px;
        padding: 5px;
        transition: $transition-fast-out;
    }
    
    thead tr {
        border-bottom: 1px solid $primary-tint;
    }

    &.highlight {
        tbody tr:nth-child(odd) td {
            background-color: $grey-light-4;
        } 
    }

    &.inline {
        width: max-content;
    }

    &.hoverable {
        tbody tr:hover:not(.no-hover) {
            cursor: pointer;

            td {

                @include themify {
                    background: themed('tableHoverBackground')
                }
            }
        }
    }
}