.dungeon/styles/sheets/actor/mvp.scss

@use "../../vars.scss" as *;
@use "../../mixins/breakpoints" as *;

.dotdungeon .actor--pc {
	display: grid;
	grid-template-areas:
		"profile stats stats"
		"profile skills skills"
		"sync skills skills"
		"spells weapons aspect"
		"spells weapons aspect"
		"backpack roles mounts"
		"backpack roles mounts"
		"summons storage storage"
		"summons storage storage";
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows:
		min-content
		1fr
		repeat(7, min-content);
	padding: 4px;
	gap: 4px;

	.panel {
		&--profile {
			grid-area: profile;
			.avatar {
				width: 100%;
				aspect-ratio: 1/1;
			}

			label, input {
				width: 100%;
			}
		}
		&--stats {
			grid-area: stats;
			.panel__content {
				display: flex;
				flex-direction: row;
				gap: 8px;
				justify-content: space-evenly;
				padding: 8px;
				flex-wrap: wrap;
			}
		}
		&--skills {
			grid-area: skills;

			.panel__content {
				display: grid;
				row-gap: 8px;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-template-rows: repeat(2, minmax(0, min-content));
			}
		}
		&--backpack {
			grid-area: backpack;
		}
		&--sync {
			grid-area: sync;

			.panel__content {
				display: flex;
				flex-direction: column;
				gap: 4px;
			}

			.respawns,
			.sync {
				display: flex;
				flex-direction: row;
				align-items: center;

				&__header {
					flex-grow: 1;
				}
			}
		}
		&--aspect {
			grid-area: aspect;
			.panel__content {
				display: grid;
				grid-template-rows: min-content min-content min-content 1fr;
				height: 100%;
				gap: 4px;
			}
		}
		&--weapons {
			grid-area: weapons;
		}
		&--roles {
			grid-area: roles;
		}
		&--spells {
			grid-area: spells;
		}
		&--mounts {
			grid-area: mounts;
		}
		&--summons {
			grid-area: summons;
		}
		&--storage {
			grid-area: storage;
		}
	}
}


@include bp-m {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(15, min-content);
			grid-template-areas:
				"profile stats"
				"profile skills"
				"sync skills"
				"weapons skills"
				"weapons skills"
				"backpack aspect"
				"backpack aspect"
				"backpack roles"
				"backpack roles"
				"backpack roles"
				"backpack spells"
				"summons spells"
				"summons storage"
				"mounts storage"
				"mounts storage";

			.panel {
				background: yellowgreen;

				&--stats {
					.panel__content {
						flex-wrap: wrap;
					}
				}

				&--skills {
					.panel__content {
						display: flex;
						flex-direction: column;
					}
				}
			}
		}
	}
}

@include bp-s {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(12, min-content);
			grid-template-areas:
				"profile"
				"stats"
				"sync"
				"skills"
				"aspect"
				"roles"
				"backpack"
				"weapons"
				"spells"
				"mounts"
				"summons"
				"storage";

			.panel {
				&--skills {
					.skill {
						flex-direction: column;
					}
				}
			}
		}
	}
}