@import "/ui/styles/_theme.scss";

.tile {
	flex-direction: column;
	width: 140px;
	padding: 0;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.1s ease;

	.tile-swatch {
		width: 100%;
		height: 80px;
		position: relative;
		overflow: hidden;
		background-color: #1a1f2e;
		background-size: cover;
		background-position: center;
	}

	.tile-thumb {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.tile-placeholder {
		width: 100%;
		height: 100%;
	}

	.tile-vignette {
		position: absolute;
		left: 0; top: 0; right: 0; bottom: 0;
		background-color: rgba(0,0,0,0.25);
		pointer-events: none;
	}

	.tile-label {
		height: 42px;
		padding: 8px 10px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		font-size: $fs-1;
		font-weight: 700;
		color: $text-dim;
		text-align: center;
		font-family: $font-mono;
		letter-spacing: 1px;
		text-transform: uppercase;
		border-top: 1px solid $line;
	}

	&:hover {
		border-color: $accent;
		.tile-label { color: $text; }
	}
	&.active {
		border-color: $accent;
		.tile-label { color: $text; background-color: $accent-soft; font-weight: 800; }
	}
}