.litm.litm--character .litm--character-backpack,
.litm.litm--backpack {
	isolation: isolate;
	background: none;
	padding: 0px;
	overflow: visible;

	& .window-header {
		position: absolute;
		padding-inline: 70px;
		width: 100%;
		flex-wrap: nowrap;
		text-shadow: 1px 2px 2px var(--litm-color);
		color: var(--color-text-light-highlight);
	}

	& .window-content {
		overflow: visible;
	}

	& .litm--backpack-wrapper {
		display: grid;
		grid-template-areas: "center";
		place-items: center;

		& > * {
			grid-area: center;
		}
	}

	& .litm--backpack-img {
		border: none;
		rotate: -2deg;
		z-index: -1;
		pointer-events: none;
	}

	& .litm--backpack-bg-frame {
		pointer-events: none;
		z-index: 1;
	}

	& .litm--backpack-bg {
		background: url("../../assets/media/background.webp") 0% 0% / cover;
		overflow: hidden;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		height: 398px;
		width: 260px;

		& .meta {
			background: url(../../assets/media/backpack-top-bg.webp) no-repeat bottom
				/ cover;
			color: var(--litm-color-accent);
			font-family: var(--litm-font-primary);
			text-transform: uppercase;
			font-size: var(--font-size-12);
			text-align: center;
			padding: var(--litm-space-2) var(--litm-space-3);
		}

		& .title {
			color: var(--litm-color);
			font-size: var(--font-size-32);
			font-family: var(--litm-font-accent);
			text-align: center;
			background: none;
			border: none;

			&:focus,
			&:active {
				box-shadow: none;
				background-color: rgb(0, 0, 0, 0.2);
			}
		}

		& .taglist {
			display: flex;
			flex-direction: column;
			list-style: none;
			margin: var(--litm-space-1) 0px 0px;
			padding: var(--litm-space-2) var(--litm-space-3);
			height: 100%;
			overflow: auto;

			& li {
				display: flex;
				align-items: center;
				gap: var(--litm-space-3);
				color: var(--litm-color);

				&:nth-child(odd) {
					background-image: linear-gradient(
						to right,
						transparent,
						rgba(69, 59, 29, 0.15),
						transparent
					);
				}

				& .tag--name {
					text-align: center;
					border: none;
					border-radius: 0px;
					padding-block: var(--litm-space-2);
					min-height: var(--font-size-14);
					height: auto;
					background-color: transparent;
					font-family: var(--litm-font-text);
					color: var(--litm-color-primary);
					width: 100%;
					border-top: 1.5px solid rgb(0, 0, 0, 0.2);
					border-image: url("../../assets/media/item-divider.webp") 14 / 2;

					&:focus,
					&:active {
						box-shadow: none;
					}

					&:read-only {
						cursor: auto;
					}
				}

				& label {
					display: flex;
					cursor: pointer;
				}
			}
		}

		& button[data-click="add-tag"] {
			margin-block: auto 0px;
			margin-inline: 2rem;
			padding-bottom: var(--litm-space-2);
			width: auto;
			border: none;
			border-radius: 0px;
			border-top: 2px solid rgb(0, 0, 0, 0.4);
			border-image: url("../../assets/media/item-divider.webp") 14 / 3;
			border-image-outset: var(--litm-space-1);
			background-color: transparent;
			color: var(--litm-color);
			font-size: var(--font-size-20);
			font-family: var(--litm-font-accent);
			transition: all 0.15s;

			&:hover,
			&:focus,
			&:active {
				box-shadow: none;
				text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
			}
		}
	}
}
