const item-color-pro-account = hsl(0, 100%, 71%)
const item-color-anime-support-ticket = hsl(217, 64%, 50%)

.shop-items
	vertical
	width 100%
	max-width 600px
	margin 0 auto

.shop-item
	horizontal
	align-items center
	padding 0.5rem 0
	border-bottom ui-border

	:last-child
		border-bottom none

.shop-item-info-column
	flex 0.7
	vertical

.shop-item-name
	font-size 1.4rem
	text-align left
	margin 0
	clip-long-text

.shop-item-popularity
	opacity 0.5

.shop-item-icon
	//

// Colors
.shop-item, .inventory-slot, .shop-history-item
	[data-item-id="pro-account-1"],
	[data-item-id="pro-account-3"],
	[data-item-id="pro-account-6"],
	[data-item-id="pro-account-12"],
	[data-item-id="pro-account-24"]
		.shop-item-icon
			color item-color-pro-account

	// [data-item-id="anime-support-ticket"]
	// 	.shop-item-icon
	// 		color item-color-anime-support-ticket

.shop-item-price
	// ...

.shop-item-price-currency
	margin-left 0.3rem
	margin-right 0

.shop-item-duration
	opacity 0.5
	text-align right
	float right

.shop-buttons
	flex 0.3
	white-space nowrap

.shop-button-buy
	width 100%
	justify-content center

	.icon-diamond
		margin-left 0.3rem
		margin-right 0