@import "../partials/clean/constants"
@import "../partials/clean/mixins"

.item-list
	border-collapse: collapse
	border: 1px solid $soft-border-color
	width: 60%
	table-layout: auto
	margin-bottom: 2em

	td, th
		border-top: 1px solid $soft-border-color
		border-bottom: 1px solid $soft-border-color
		padding: .25em
		vertical-align: middle

		&:first-child
			padding-left: .5em

		&:last-child
			padding-right: .5em

	.thumbnail-cell
		width: 2.5em
		height: 2.5em

		img
			display: block
			width: 100%
			height: 100%

	.name-cell a
		text-decoration: none
		&:hover, &:focus
			text-decoration: underline

	.actions-cell
		text-align: right
		padding-left: 1em
		font-size: 85%

	tbody
		tr
			&:hover, &:focus-within
				background: rgba($module-bg-color, 0.5)

	thead
		background: $module-bg-color

		th
			text-align: left

		.actions-cell button
			/* Bootstrap's Purple 600 */
			+awesome-button-color(#59359a)

	.special-color-explanation
		text-wrap: balance
		font-style: italic