@use "sass:color";
@use "../variables" as *;

div.plate_container {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;

	border: 2px solid $color-dark;
	grid-column: right / right;
	grid-row: upper / 3;

	h2 {
		margin-bottom: 1%;
		text-align: center;
	}

	&>div {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-rows: auto auto;

		&>h2:nth-of-type(1) {
			grid-column: 2;
			grid-row: 1;
		}

		&>h2:nth-of-type(2) {
			grid-column: 1;
			grid-row: 2;
			writing-mode: vertical-rl;
			transform: rotate(-180deg);
		}

		&>div {
			grid-column:2;
			grid-row: 2;
		}
	}

	div.plate_container--upper-left {
		position: absolute;
		top: 0.5em;
		left: 0.5em;

		display: flex;
		flex-direction: column;
	}

	div.plate_container--heatmap-notice {
		animation: 1s 1 attention_on_load;
	}
}

@keyframes attention_on_load {
	from{
		color: $color-light;
		transform: scale(1.05);
	}
	to {
		color: inherit;
	}
}