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

	.item-group {
		&__header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center
		}

		&__create-item {
			@include material.elevate(2);
			color: var(--inventory-create-item-font-color);
			&:hover {
				@include material.elevate(4);
			}
			&:focus-visible, &:active {
				@include material.elevate(8);
			}
		}

		&__list {
			&--material {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 8px;
			}

			&--untyped, &--aspect, &--foil, &--weapon, &--pet {
				display: flex;
				gap: 8px;
				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, &:active {
				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;
		}
	}

	.collapse {
		&__header {
			display: flex;
			gap: 8px;
			align-items: center;
			justify-content: space-between;

			&:hover {
				cursor: pointer;
			}

		}
		&__toggle {
			color: var(--inventory-material-color);
			transition: transform 200ms ease-in-out;
			&:focus-visible {
				box-shadow: 0 0 10px var(--color-shadow-highlight);
			}
		}

		&__content { display: none; visibility: hidden; }
		&[open] .collapse{
			&__toggle {
				transform: rotate(90deg);
			}
			&__content {
				display: unset;
				visibility: visible;
			}
		}
	}

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

			&:focus-visible {
				box-shadow: 0 0 10px var(--color-shadow-highlight);
			}
		}

		&__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, .aspect, .weapon, .pet {
		@include material.elevate(1);
		padding: 8px;
		border-radius: 4px;
		color: var(--inventory-material-color);

		&__name {
			flex-grow: 1;
			cursor: inherit;
			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)) 2.25rem;
			grid-template-rows: repeat(3, 2.25rem) auto;
			gap: 8px;
		}

		&__button {
			@include material.elevate(2);
			padding: 0px;

			&:hover {
				@include material.elevate(4);
			}
			&:focus-visible {
				box-shadow: 0 0 10px var(--color-shadow-highlight);
			}

			&--send-to-chat {
				@extend .untyped__button;
				color: var(--inventory-untyped-send-to-chat-color);
			}
			&--edit {
				@extend .untyped__button;
				color: var(--inventory-untyped-edit-color);
			}
			&--delete {
				@extend .untyped__button;
				color: var(--inventory-untyped-delete-color);
				background: var(--inventory-untyped-delete-bg);
				&:hover {
					background: var(--inventory-untyped-delete-bg-hover);
				}
			}
		}

		&__field {
			@include material.elevate(1);
			color: var(--inventory-untyped-card-color);
			padding: 8px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 4px;

			> :first-child {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			&.editable {
				input[type="text"], input[type="number"] {
					@include material.elevate(1);
					font-family: var(--input-font);
					font-size: var(--inventory-untyped-quantity-font-size);
					width: 50px;
					text-align: center;
					border-radius: 4px;
					padding: 5px 7px;
					color: inherit;
				}
			}
		}

		&__description {
			@include material.elevate(1);
			color: var(--inventory-untyped-description-color);
			margin: 0;
			grid-row: span 3;
			grid-column: span 3;
			padding: 8px;
			border-radius: 4px;
		}
	}

	.weapon {
		&__description {
			grid-row: span 2;
		}
	}
}