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

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

	.panel {
		&--avatar {
			grid-area: avatar;
		}
		&--stats {
			grid-area: stats;
			.panel__content {
				display: flex;
				flex-direction: row;
				gap: 8px;
				justify-content: space-evenly;
				padding: 8px;
			}
		}
		&--skills {
			grid-area: skills;

			.panel__content {
				display: grid;
				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;
		}
		&--aspect {
			grid-area: aspect;
			.panel__content {
				display: grid;
				grid-template-rows: min-content min-content min-content 1fr;
				height: 100%;
				gap: 4px;
				padding: 8px;
			}
		}
		&--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:
				"avatar stats"
				"avatar 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:
				"avatar"
				"stats"
				"sync"
				"skills"
				"aspect"
				"roles"
				"backpack"
				"weapons"
				"spells"
				"mounts"
				"summons"
				"storage";

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