@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(4, min-content);
	height: 100%;
	color: white;

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

		&__group {
			@include material.elevate(1);
			padding: 8px;
			border-radius: 4px;
		}
	}

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

	.item-list {
		.material-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		.untyped-list {
			display: flex;
			gap: 8px;
			flex-direction: column;
		}
	}

	.material {
		@include material.elevate(1);
		padding: 8px;
		gap: 8px;
		display: grid;
		grid-template-columns: 1fr min-content 50px min-content;
		align-items: center;
		border-radius: 4px;

		&__label {
			font-family: var(--inventory-item-name-font);
			font-size: var(--inventory-item-name-font-size);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			justify-self: left;
			max-width: 100%;
		}

		&__button {
			--size: 28px;
			@include material.elevate(2);
			transition: all 400ms ease-in-out;
			color: var(--inventory-material-color);
			border-width: 0;
			width: var(--size);
			height: var(--size);

			&:hover {
				@include material.elevate(4);
				color: var(--inventory-material-hover-color);
			}
		}

		&__input {
			@include material.elevate(2);
			font-family: var(--input-font);
			text-align: center;
			border-radius: 4px;
			transition: all 400ms ease-in-out;
			color: var(--inventory-material-color);

			&:hover {
				@include material.elevate(4);
				color: var(--inventory-material-hover-color);
			}

			&:focus {
				@include material.elevate(8);
				color: var(--inventory-material-focus-color);
			}
		}
	}

	.untyped {
		@include material.elevate(1);
		padding: 8px;
		border-radius: 4px;
		color: var(--inventory-material-color);

		&__header {
			display: flex;
			gap: 8px;
			align-items: center;

			button {
				color: var(--inventory-material-color);
			}
		}
		&__name {
			flex-grow: 1;
			font-family: var(--inventory-item-name-font);
			font-size: var(--inventory-item-name-font-size);
		}

		&__content {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr)) min-content;
			grid-template-rows: repeat(3, min-content) auto;
			gap: 8px;
			padding: 4px;
		}

		&__usage, &__tier {
			@include material.elevate(1);
			padding: 8px;
			display: flex;
			align-items: center
		}

		button {
			@include material.elevate(2);
			&:hover {
				@include material.elevate(4);
			}
		}

		&__quantity--edit {
			@include material.elevate(1);
			display: grid;
			grid-template-columns: minmax(0, 1fr) 40px;
			max-width: 100%;
			align-items: center;
			padding: 8px;
			> :first-child {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		&__description {
			@include material.elevate(1);
			margin: 0;
			grid-row: span 3;
			grid-column: span 3;
		}
	}
}