@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;
		gap: 12px;
	}

	.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);
			}

		}
	}

	.capacity-panel {
		display: grid;
		grid-template-columns: 1fr 30px min-content 30px;

		.used, .total {
			text-align: center;
		}
	}

	.filter-panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(6, 1fr);
		gap: 8px;

		label {
			display: flex;
			align-items: center;
			gap: 4px;

			&:nth-of-type(2n) {
				flex-direction: row-reverse;
				justify-content: right;
			}
		}

		input[type="checkbox"] {
			margin: 0;
		}
	}
}