@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: repeat(9, 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;
			}
			&--backpack {
				grid-area: backpack;
			}
			&--sync {
				grid-area: sync;
			}
			&--aspect {
				grid-area: aspect;
			}
			&--weapons {
				grid-area: weapons;
			}
			&--roles {
				grid-area: roles;
			}
			&--spells {
				grid-area: spells;
			}
			&--mounts {
				grid-area: mounts;
			}
			&--summons {
				grid-area: summons;
			}
			&--storage {
				grid-area: storage;
			}
		}
	}

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

		&__header {
			background: black;
			color: white;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 4px;

			h2 {
				all: initial;
				color: inherit;
				flex-grow: 1;
				padding-left: 8px;
				font-family: $title-font;
				font-size: 20px;
			}

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


@include bp-s {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(15, minmax(0, 1fr));
			grid-template-areas:
				"avatar sync"
				"avatar skills"
				"stats skills"
				"stats skills"
				"weapons aspect"
				"weapons 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;
				}
			}
		}
	}
}

@include bp-xs {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: 1fr;
			grid-template-areas:
				"stats"
				"skills";
		}
		.panel {
			background: blueviolet;
		}
	}
}