@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%

		a, button
			/* When item names get long, don't let the buttons wrap to give the
			 * item names more space. The names should wrap more instead! */
			text-wrap: nowrap

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

	thead
		background: $module-bg-color

		th
			text-align: left

		.thumbnail-cell img
			outline: 1px solid $soft-border-color

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

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

	.subtitle
		font-size: 85%
		opacity: .85

		a[title]
			text-decoration-line: underline
			text-decoration-style: dotted

			&:hover, &:focus
				text-decoration-style: solid

	/* For wearable items that belong to a specific set that all come together,
	 * like a Paint Brush. */
	&[data-group-type="bundle"]
		tbody
			.thumbnail-cell
				opacity: 0.65

			tr:hover .thumbnail-cell
				opacity: 0.85