@use "./vars/_colours.scss" as *;

.dotdungeon {
	container-type: size;

	&.actor {
		&--pc {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(12, minmax(0, 1fr));

			.panel {
				&--avatar {
					grid-row: 1 / span 2;
				}
				&--stats {
					grid-column: 2 / span 2;
				}
				&--skills {
					grid-column: 2 / span 2;
				}
				&--backpack {
					grid-row: 3 / span 5;
				}
				&--sync {}
				&--aspect {
					grid-row: span 2;
				}
				&--weapons {
					grid-row: span 2;
				}
				&--roles {
					grid-row: span 3;
				}
				&--spells {
					grid-row: span 2;
				}
				&--mounts {}
				&--summons {}
				&--notes {}
				&--storage {}
			}
		}
	}

	.panel {
		background: white;
		border: 2px solid black;

		&__header {
			background: black;
			color: white;
			display: flex;
			flex-direction: row;

			h2 {
				flex-grow: 1;
			}

			.icon {
				$size: 32px;
				height: $size;
				width: $size;
				aspect-ratio: 1;
			}
		}
	}
}

@container (max-width: $breakpoint-medium) {
	.dotdungeon {
		&.actor {
			&--pc {
				grid-template-columns: repeat(3, minmax(0, 1fr));
				grid-template-rows: repeat(12, minmax(0, 1fr));
			}
		}
	}
}

@container (max-width: $breakpoint-small) {
	.dotdungeon {
		&.actor {
			&--pc {
				grid-template-columns: repeat(3, minmax(0, 1fr));
				grid-template-rows: repeat(12, minmax(0, 1fr));
			}
		}
	}
}

@container (max-width: $breakpoint-extra-small) {
	.dotdungeon {
		&.actor {
			&--pc {
				grid-template-columns: repeat(3, minmax(0, 1fr));
				grid-template-rows: repeat(12, minmax(0, 1fr));
			}
		}
	}
}