@use "./themes/dark.scss";
@use "../../../../mixins/material" as material;
@use "../../../../mixins/partials" as partials;

@use "./pages/stats.scss";
@use "./pages/inventory.scss";

.dotdungeon .actor--pc-v2 {
	background-color: var(--sheet-bg);

	.e-0dp { @include material.elevate(0); }
	.e-1dp { @include material.elevate(1); }
	.e-2dp { @include material.elevate(2); }
	.e-3dp { @include material.elevate(3); }
	.e-4dp { @include material.elevate(4); }
	.e-6dp { @include material.elevate(6); }
	.e-8dp { @include material.elevate(8); }
	.e-12dp { @include material.elevate(12); }
	.e-16dp { @include material.elevate(16); }
	.e-24dp { @include material.elevate(24); }

	.scrollable {
		container-type: size;
		overflow: auto;
	}

	.nav-bar {
		@include material.elevate(8);
		background: color-mix(in lab, var(--nav-bg), white 5%);
		position: absolute;
		bottom: 0;
		width: calc(100% - 6px);

		nav {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 8px;
			padding: 8px;
		}

		@include partials.sub-nav("page", "inventory", flex);

		button {
			@include material.elevate(2);
			height: 36px;
			box-sizing: border-box;
			color: var(--nav-button-text);

			&:focus-visible {
				border-style: solid;
				border-width: 2px;
				border-color: currentColor;
				background: var(--elevation-8dp-bg);
			}

			&:hover {
				@include material.elevate(6);
				background: hsl( from currentColor / 50% ); // probably gonna need color-mix
			}
		}
	}

	.page-content {
		padding: 16px;
		padding-bottom: 69px;
		height: 100%;
	}
}