.luggage {

	.tips {
		color: #777;
		margin: .5rem 0;
		font-size: 12px;
		text-align: center;
	}

	.items {
		gap: 8px;
		width: calc(100% - 64rpx);
		margin: 12rpx auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.item {
			--td-checkbox-vertical-padding: 12rpx 24rpx;

			flex: 1;
			margin: 0;
			border: 3rpx solid #CCC;
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			word-break: break-all;
			border-radius: 12rpx;

			&:first-child {
				margin-left: 0;
			}

			&.active {
				border-color: var(--td-brand-color, #0052d9);

				&::after {
					content: "";
					top: 0;
					left: 0;
					width: 0;
					height: 0;
					display: block;
					position: absolute;
					border-width: 24px 24px 24px 0;
					border-style: solid;
					border-color: var(--td-brand-color);
					border-bottom-color: transparent;
					border-right-color: transparent;
				}
			}

			.icon {
				top: 1px;
				left: 1px;
				color: var(--td-bg-color-container, #fff);
				z-index: 1;
				position: absolute;
				font-size: 12px;
			}

			.checkbox {
				height: calc(100% - 24rpx);
			}
		}
	}
}

.add-container {
	left: 0;
	right: 0;
	color: #333;
	bottom: 0;
	display: flex;
	padding: 20rpx;
	position: fixed;
	border-top: 1px solid rgba(0, 0, 0, .1);
	background: rgba(240, 240, 240, .8);
	box-sizing: border-box;
	align-items: center;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	backdrop-filter: blur(10px);

	.input {
		--td-input-vertical-padding: 8rpx;
		margin-right: .5rem;
		border-radius: 5px;
	}
}