@import 'constants';

@mixin table-base {
	background-color: $table-background;
	margin-bottom: $table-margin-bottom;
	border-spacing: 0px;
    border-collapse: collapse;
    // Makes tables responsive
    max-width: 100%;
    display: block;
	overflow-x: auto;
}

@mixin table-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName} {
        	td, th {
        		border-color: lighten($color, 12%);
        	}

        	&.hoverable {
        		tbody {
        			tr {
						&:hover {
							background-color: lighten-3($color);
						}
					}
        		}
        	}
        	

            &.striped {
				tbody {
					tr {
						&:nth-child(odd) {
							background-color: lighten-3($color);
						}	
					}
				}

				&.hoverable {
	        		tbody {
	        			tr {
							&:hover {
								background-color: lighten-2($color);
							}
						}
	        		}
	        	}
			}
        }
    }
}