@use "../../../../mixins/material" as material;

.dotdungeon .actor--pc-v2 .active.inventory-page {
	padding-bottom: 50px;
	height: 100%;
}

.dotdungeon .actor--pc-v2 .inventory-page .active.tab[data-tab="player"] {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr repeat(3, min-content);
	height: 100%;
	color: white;

	.item-list {
		grid-row: 1 / -1;
		grid-column: 2;
		display: flex;
		flex-direction: column;
	}

	.panel {
		padding: 8px;
		border-radius: 4px;
	}

	.bytes-panel {
		display: grid;
		grid-template-columns: 1fr min-content 50px min-content;
		gap: 8px;
		align-items: center;

		label {
			justify-self: left;
		}

		input {
			@include material.elevate(3);
			border: none;
			border-radius: 4px;
			text-align: center;
			color: white;

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

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

		}
	}
}