@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: 2.5em
			height: 2.5em

	.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
			margin: .25em

	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, a.button
				/* Bootstrap's Purple 600 */
				+awesome-button-color(#59359a)

	tr[data-item-owned]
		color: #aaa

		a:not(.button)
			color: inherit

		.thumbnail-cell
			filter: grayscale(1)
			opacity: .75

		.item-name
			font-style: italic
			text-decoration: line-through
			text-decoration-color: rgba($text-color, 0.35)

		.owned-explanation
			font-style: italic
			font-size: 85%

		.actions-cell
			button, a.button
				+awesome-button-color(#999)

	.price-breakdown
		text-decoration-line: underline
		text-decoration-style: dotted
		cursor: help

	.dyeworks-timeframe
		font-style: italic
		text-decoration-line: underline
		text-decoration-style: dotted
		cursor: help

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

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

		a
			color: inherit

	.owls-info-link
		cursor: help

		.owls-info-label
			text-decoration-line: underline
			text-decoration-style: dotted

	&[data-complexity="high"]
		width: 70%

	/* 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

		&[data-group-owned]
			thead
				button, a.button
					+awesome-button-color(#999)