@import "/UI/Styles/_Theme.scss";

ItemCard {
	flex-direction: column;
	background-color: $panel-glass-strong;
	border: 1px solid $border;
	border-left: 3px solid $primary;
	overflow: hidden;
}

ItemCard .item-card-image {
	width: 100%;
	min-height: 280px;
	flex-grow: 1;
	background-size: cover;
	background-position: center;
	background-color: rgba(#000000, 0.35);
	flex-shrink: 0;
}

ItemCard .item-card-body {
	flex-direction: column;
	gap: 10px;
	padding: 18px 22px 20px 22px;
	background-color: rgba(#000000, 0.35);
	border-top: 1px solid $border;
	flex-shrink: 0;
}

ItemCard .item-card-category {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

ItemCard .item-card-category .icon {
	color: $primary;
	font-size: 16px;
}

ItemCard .item-card-category-label {
	font-family: $font-mono;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: $primary;
}

ItemCard .item-card-title {
	font-family: $font-primary;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: $text;
}

ItemCard .item-card-footer {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding-top: 6px;
}

ItemCard .item-card-traits {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	flex-grow: 1;
	min-width: 0;
}

ItemCard .item-card-trait {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

ItemCard .item-card-trait .icon {
	color: $text-dim;
	font-size: 16px;
}

ItemCard .item-card-trait-label {
	font-family: $font-secondary;
	font-size: 14px;
	color: $text-dim;
}

ItemCard .item-card-trait.tone-primary .icon,
ItemCard .item-card-trait.tone-primary .item-card-trait-label { color: $primary; }

ItemCard .item-card-trait.tone-confirm .icon,
ItemCard .item-card-trait.tone-confirm .item-card-trait-label { color: $success; }

ItemCard .item-card-trait.tone-info .icon,
ItemCard .item-card-trait.tone-info .item-card-trait-label { color: $info; }

ItemCard .item-card-trait.tone-danger .icon,
ItemCard .item-card-trait.tone-danger .item-card-trait-label { color: $danger; }

ItemCard .item-card-trait.tone-ghost .icon,
ItemCard .item-card-trait.tone-ghost .item-card-trait-label { color: $text-faint; }

ItemCard .item-card-flavor {
	font-family: $font-secondary;
	font-size: 13px;
	font-style: italic;
	color: $text-faint;
	flex-shrink: 0;
	max-width: 50%;
	text-align: right;
}