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

.dotdungeon .panel {
	display: grid;
	grid-template-rows: min-content 1fr;

	border: 2px solid black;
	background: greenyellow;

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

		h2 {
			@include fvtt_reset;
			color: inherit;
			flex-grow: 1;
			font-family: $title-font;
			font-size: 20px;
		}

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

@include bp-s {
	.dotdungeon .panel__header .icon {
		display: none;
		visibility: hidden;
	}
}