.select-person {
	display: flex;
	flex-direction: column;
	background: #fff;

	:global(.dtm-nav-bar) {
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	:global(.dtm-list-item) {
		padding-left: 12px;

		.dtm-list-line {
			padding-right: 12px;
		}

		.dtm-list-thumb {
			margin-right: 12px;
		}
	}

	.select-person-search {
		background-color: #fff;

		:global(.dtm-search-bar) {
			height: 36px;
			border-radius: 18px;
			background-color: #f5f5f5;
		}

		:global(.dtm-search-bar-input) {
			height: 36px;

			.dtm-search-bar-synthetic-ph {
				height: 36px;
				line-height: 36px;

				.dtm-search-bar-synthetic-ph-placeholder {
					color: #999;
				}
			}
		}
	}

	.select-person-content {
		flex: 1;
		display: flex;
		overflow: hidden;

		.select-person-sidebar {
			width: 90px;
			background-color: #f8f8f8;
			overflow-y: auto;
			border-right: 1px solid #eee;

			.dept-item {
				padding: 12px 8px;
				color: #333;
				text-align: center;
				border-bottom: 1px solid #eee;

				&.active {
					color: #1a6fb8;
					background-color: #fff;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 3px;
						height: 16px;
						background-color: #1a6fb8;
					}
				}
			}
		}

		.select-person-list {
			flex: 1;
			overflow-y: auto;
			background-color: #fff;

			.person-info {
				display: flex;
				flex-direction: column;
			}

			.person-name {
				color: #333;
				font-weight: 500;
			}

			.person-dept {
				font-size: 12px;
				color: #999;
				margin-top: 4px;
			}

			.empty-data {
				padding: 40px 0;
				text-align: center;
				color: #999;
			}
		}
	}

	.select-person-footer {
		height: 52px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		border-top: 1px solid #eee;

		.selected-info {
			color: #666;

			.selected-count {
				color: #1a6fb8;
				font-weight: 500;
			}
		}

		.selectPerson-buttons {
			display: flex;
			gap: 12px;
			padding: 8px 0px;
			border-radius: 16px 16px 0 0;
			position: relative;

			button {
				height: 36px;
				border-radius: 18px;
				padding: 0 16px;
				border: none;
			}

			.cancel-btn {
				background-color: #f5f5f5;
				color: #666;
				font-size: 14px;
			}

			.confirm-btn {
				background-color: #1a6fb8;
				color: #fff;
			}
		}
	}

	.select-person-cascade {
		display: flex;
		height: 100%;
		background: #fff;

		.cascade-level {
			flex: 1;
			height: 100%;
			overflow-y: auto;
			border-right: 1px solid #f0f0f0;
			background: #fff;

			&:last-child {
				border-right: none;
			}

			.cascade-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12px 16px;
				color: #333;
				border-bottom: 1px solid #f0f0f0;
				cursor: pointer;

				&:active {
					background-color: #f5f5f5;
				}

				&.checkable {
					color: #666;
				}

				&.selected {
					color: #1a6fb8;
					font-weight: 500;
				}

				.item-name {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.arrow-right {
					margin-left: 8px;
					color: #999;
					font-size: 16px;
				}

				.check-icon {
					margin-left: 8px;
					color: #1a6fb8;
				}
			}
		}
	}
}