.table {

	// Always make the second column the widest, assuming
	// that to be the title.  This relies on table-layout fixed where
	// the first row sets the widths of all subsequent rows
	table-layout: fixed;
	td,th {
		word-wrap: normal;
		white-space: nowrap;
	}

	// Size the columns by the number of columns, always making the first column the biggest
	$weighting: 1.3;
	@for $i from 1 through 6 {
		&.columns-#{$i} {

			// Default width of columns
			th {  width: 100%/$i/$weighting; }

			// The title column
			th:first-child + th { width: 100% - 100%/$i/$weighting*($i - 1); }
		}
	}

	// Column defaults
	th {
		box-sizing: content-box; // This is required to push the "actions" off the right edge
	}
	th:first-child {
		width: 10px;
	}
	th:last-child {
		padding-right: 10px;
		text-align: right;

		// Many non-Chrome browsers need these to be a little wider than normal.  I gave it 4px extra
		&.actions-1,
		&.actions-2 { width: 46px; }
		&.actions-3 { width: 76px; }
		&.actions-4 { width: 96px; }
		&.actions-5 { width: 126px; }
	}
	td { // All cells are told to consume the full available width and ellipsis any leftover
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	td:last-child {
		text-align: right;
		overflow: visible; // Don't show ellipsis
	}
	td:first-child { // When there is only one row, this will supercede the above
		text-align: left;
		overflow: visible; // Don't show ellipsis
	}

	// If the first column is hidden, add some extra padding to the second column
	th.hide + th, td.hide + td {
		padding-left: $form-group-margin;
	}

	// Vertical align the actions contents relative to each other
	.actions > * {
		vertical-align: middle;
	}

	// Style the header
	thead {
		background: lighten($theme-secondary-color, 10%);

		// Dim the color on the header content and
		// make the text smaller
		th {
			color: rgba($theme-secondary-inverse, .5);
			font-size: 12px;

			// Bulk action rollover
			&.select-all:hover {
				color: $theme-secondary-inverse;
			}
		}

		// Make more readable on hover
		&:hover th {
			color: rgba($theme-secondary-inverse, .7);
		}
	}

	// Add border lines to the bottom rather than top of row.  The
	// th selector is so explicit because that is what bootstrap had.
	td, & > thead > tr > th {
		border-top: 1px solid $grey-border;
		border-bottom: none;
	}

	// Add a slight rollover so it's easier to track with the eyes.  Not using
	// Bootstrap's .table-hover because it is too dark
	tbody tr:hover {
		background-color: $table-row-hover;
	}

	// Make the even rows a little darker
	tr:nth-child(even) {
		background-color: $lightest-grey;
	}

	// Give images a border
	img {
		$border: 1px;
		$size: 40px + $border * 2;
		border: 1px solid $grey-border;

		// Pushes subsequent text off the edge of the image, usually a thumbnail
		margin-right: 5px;

		// Set a default max height for images. This helps images that were uploaded in wysiwyg and
		// are being displayed in listings
		max-height: 100px;
			max-width: 100%;
		width: auto;

		// Animated gifs won't be cropped by croppa, so give them a default width / height.  Same
		// with gravtars in admin.
		&[src*=".gif"], &.gravatar {
			max-width: $size;
			max-height: $size;
		}

		// Make images smaller on mobile
		@media (max-width: $screen-xs) {
			&, &[src*=".gif"], &.gravatar {
				max-width: none;
				max-height: 22px; // As table as a label
			}
		}
	}

	// Vertically center align all cells, for rows with image thumbnails in there.
	// Needed super specifity to override some BS stuff
	& > tbody > tr > td {
		vertical-align: middle;
		input[type="radio"], input[type="checkbox"] {
			margin: 0;
		}
	}

	// If there are multiple badges in a row, give them a little breathing roomt
	.label {
		margin: 0 2px;
	}

	// Remove margins on paragraphs, like if a WYSIWYG is directly rendered
	td > p, td > a > p { margin: 0; }

	// On small browsers, only show the second and last columns in tables
	@media (max-width: $screen-sm) {

		// Make title column wide again
		&[class*='columns-'] th:first-child + th {
			width: 100%;
		}

		// Toggle visiblilty
		th, td {
			display: none;
		}
		td:first-child + td, td:last-child, th:first-child + th, th:last-child {
			display: table-cell;
		}
	}

	// Remove some the actions padding on really small browsers
	@media (max-width: $screen-xs) {
		th:last-child, td:last-child {
			padding-left: 0;
		}
	}

}


// Give trashed (soft deleted) rows a striped gray background, like the
// progress bar look
tr.is-trashed {

	// This is from bootstrap's striped progress bar styles, with different
	// colors
	$opacity: .25;
	background-image: linear-gradient(45deg,rgba(211,211,211,$opacity) 25%,transparent 25%,transparent 50%,rgba(211,211,211,$opacity) 50%,rgba(211,211,211,$opacity) 75%,transparent 75%,transparent);
	background-size: 40px 40px;

	// Lighten the text colors
	color: lighten(#333, 30%);

    // Make trash icons look very disabled
    .glyphicon-trash {
        opacity: 0.3;
    }
}
