/*
 * Single icon style
 */
.icon {
	width: 100%;
	height: 100%;

	&-container {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 50%;
		width: 4rem;
		height: 4rem;
		padding: 0.375rem;
		border-radius: var(--border-radius-sm);
		transform: translateX(-50%);

		&.economic {
			background: var(--color-building-economic);
		}
		&.military {
			background: var(--color-building-military);
		}
		&.fortified {
			background: var(--color-building-fort);
		}
		&.research {
			background: var(--color-building-research);
		}
	}
}

.name {
	position: absolute;
	top: 5.5rem;
	left: 50%;
	color: rgba(255, 255, 255, 0.2);
	font-size: 1.25rem;
	font-weight: 400;
	transform: translateX(-50%);
	white-space: nowrap;
}

/*
 * Grid icon style
 */
.grid {
	display: flex;
}

.ages {
	display: grid;
	margin-right: 1rem;
	margin-bottom: calc(var(--vertical-gap) * 1.5);
	grid-gap: 2px;
}

.row {
	display: flex;
	grid-gap: 2px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.column {
	position: relative;
	display: block;
	width: 4rem;
	height: 4rem;
	background: #000;
	border-radius: 0.25rem;
	opacity: 0.2;
	transition: transform 0.2s, box-shadow 0.2s;

	&.visible {
		background: none;
		opacity: 1;

		&.economic {
			//TODO: merge w/ class above (redundancy)
			background: var(--color-building-economic);
		}
		&.military {
			background: var(--color-building-military);
		}
		&.fortified {
			background: var(--color-building-fort);
		}
		&.research {
			background: var(--color-building-research);
		}
	}

	&.scored {
		z-index: 100;
		box-shadow: 0 0 2rem var(--color-green) inset;
	}
}

/*
 * Name only style
 */
.nameOnly {
	position: absolute;
	top: 2.5rem;
	left: 50%;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.75rem;
	font-weight: 400;
	transform: translateX(-50%);
	white-space: nowrap;
}
