.span-details-drawer {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 44px); //44px -> trace details top bar
	border-left: 1px solid var(--bg-slate-400);
	overflow-y: auto !important;
	&:not(&-docked) {
		min-width: 450px;
	}

	&::-webkit-scrollbar {
		width: 0.1rem;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 12px;
		border-bottom: 1px solid var(--bg-slate-400);

		.heading {
			display: flex;
			align-items: center;
			gap: 8px;

			.dot {
				height: 8px;
				width: 8px;
				border-radius: 2px;
				background: var(--bg-cherry-500);
			}

			.text {
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}
	}

	.description {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 10px 12px;

		.item {
			display: flex;
			flex-direction: column;
			gap: 8px;

			.attribute-key {
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 11px;
				font-style: normal;
				font-weight: 500;
				line-height: 18px; /* 163.636% */
				letter-spacing: 0.44px;
				text-transform: uppercase;
			}

			.value-wrapper {
				display: flex;
				padding: 2px 8px;
				align-items: center;
				width: fit-content;
				max-width: 100%;
				border-radius: 50px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-slate-500);

				.attribute-value {
					color: var(--bg-vanilla-400);
					font-family: 'Inter';
					font-size: 14px;
					font-style: normal;
					width: 100%;
					font-weight: 400;
					line-height: 20px; /* 142.857% */
					letter-spacing: 0.28px;
				}
			}

			.service {
				display: flex;
				padding: 2px 8px;
				align-items: center;
				gap: 8px;
				border-radius: 50px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-slate-500);
				width: fit-content;

				.dot {
					height: 4px;
					width: 4px;
				}

				.value-wrapper {
					display: flex;
					padding: 0px;
					align-items: center;
					width: fit-content;
					max-width: 100%;
					border-radius: 0px;
					border: none;
					background: var(--bg-slate-500);

					.service-value {
						color: var(--bg-vanilla-400);
						font-family: 'Inter';
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: 20px; /* 142.857% */
						letter-spacing: 0.28px;
					}
				}
			}
		}
	}

	.attributes-events {
		.details-drawer-tabs {
			.ant-tabs-extra-content {
				display: flex;
				align-items: center;

				.search-icon {
					width: 33px;
					padding-right: 12px;
				}
			}

			.ant-tabs-nav::before {
				border-bottom: 1px solid var(--bg-slate-400) !important;
			}

			.ant-tabs-tab {
				margin: 0 !important;
				padding: 0 2px !important;
				min-width: 36px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.attributes-tab-btn,
			.events-tab-btn,
			.linked-spans-tab-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 4px 8px;
				margin-right: 8px;
				gap: 4px;

				.tab-label {
					display: flex;
					align-items: center;
				}

				.count-badge {
					display: flex;
					align-items: center;
					justify-content: center;
					min-width: 20px;
					height: 20px;
					padding: 0 6px;
					border-radius: 10px;
					background: rgba(171, 189, 255, 0.1);
					color: var(--bg-vanilla-400);
					font-variant-numeric: lining-nums tabular-nums slashed-zero;
					font-feature-settings: 'dlig' on, 'salt' on;
					font-family: Inter;
					font-size: 13px;
					font-style: normal;
					font-weight: 400;
					line-height: 20px;
					letter-spacing: -0.065px;
					text-transform: uppercase;
				}
			}

			.attributes-tab-btn:hover,
			.events-tab-btn:hover,
			.linked-spans-tab-btn:hover {
				background: unset;
			}
		}
	}
}

.span-details-drawer-docked {
	width: 48px;
	flex: 0 48px !important;

	.header {
		justify-content: center;
	}
}
.resizable-handle {
	box-sizing: border-box;
	border: 2px solid transparent;
	&:hover,
	&[data-resize-handle-state='drag'],
	&[data-resize-handle-state='hover'] {
		border-color: rgba(35, 196, 248, 0.2);
	}
}

.lightMode {
	.span-details-drawer {
		border-left: 1px solid var(--bg-vanilla-300);

		.header {
			border-bottom: 1px solid var(--bg-vanilla-300);

			.heading {
				.text {
					color: var(--bg-ink-400);
				}
			}
		}

		.description {
			.item {
				.attribute-key {
					color: var(--bg-ink-400);
				}

				.value-wrapper {
					border: 1px solid var(--bg-vanilla-300);
					background: var(--bg-vanilla-300);

					.attribute-value {
						color: var(--bg-ink-400);
					}
				}

				.service {
					border: 1px solid var(--bg-vanilla-300);
					background: var(--bg-vanilla-300);

					.value-wrapper {
						background: var(--bg-vanilla-300);
						border: none;

						.service-value {
							color: var(--bg-ink-400);
						}
					}
				}
			}
		}

		.attributes-events {
			.details-drawer-tabs {
				.ant-tabs-nav::before {
					border-bottom: 1px solid var(--bg-vanilla-300) !important;
				}

				.ant-tabs-nav-wrap {
					height: 32px;
				}

				.ant-tabs-tab {
					border: none;
					background-color: var(--bg-vanilla-200);

					.ant-btn {
						border-bottom: 1px solid var(--bg-vanilla-300);
					}
				}

				.ant-tabs-ink-bar {
					background: #4e74f8 !important;
				}
			}
		}
	}
}

.linked-spans-tab-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
