.span-details-drawer {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 44px); //44px -> trace details top bar
	border-left: 1px solid var(--l1-border);
	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(--l1-border);

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

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

			.text {
				color: var(--l2-foreground);
				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;
		padding: 10px 0px;

		.item {
			padding: 8px 12px;
			&,
			.attribute-container {
				display: flex;
				flex-direction: column;
				gap: 8px;
				position: relative; // ensure absolutely-positioned children anchor to the row
			}

			// Show attribute actions on hover for hardcoded rows
			.attribute-actions-wrapper {
				display: none;
				gap: 8px;
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 4px;
				padding: 2px;

				// style the action button group
				.action-btn {
					display: flex;
					gap: 4px;
				}
				.filter-btn {
					display: flex;
					align-items: center;
					border: none;
					box-shadow: none;
					border-radius: 2px;
					background: var(--l1-border);
					padding: 4px;
					gap: 3px;
					height: 24px;
					width: 24px;

					&:hover {
						background: var(--l3-background);
					}
				}
			}
			&:hover {
				background-color: var(--l1-border);
				.attribute-actions-wrapper {
					display: flex;
				}
			}

			.span-name-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.loading-spinner-container {
					padding: 4px 8px;
					line-height: 18px; /* 128.571% */
					letter-spacing: -0.07px;

					display: inline-flex;
				}

				.span-percentile-value-container {
					.span-percentile-value {
						color: var(--bg-sakura-400);
						font-variant-numeric: lining-nums tabular-nums stacked-fractions
							slashed-zero;
						font-feature-settings:
							'dlig' on,
							'salt' on;

						border-radius: 0 50px 50px 0;

						font-family: Inter;
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						min-width: 48px;
						padding-left: 8px;
						padding-right: 8px;

						border-left: 1px solid var(--l1-border);

						cursor: pointer;

						display: inline-flex;
						align-items: center;
						word-break: normal;
						gap: 6px;
					}

					&.span-percentile-value-container-open {
						.span-percentile-value {
							border: 1px solid var(--l1-border);
							background: var(--l1-border);
						}
					}
				}
			}

			.span-percentiles-container {
				display: flex;
				flex-direction: column;
				position: relative;

				fill: linear-gradient(
					139deg,
					color-mix(in srgb, var(--card) 32%, transparent) 0%,
					color-mix(in srgb, var(--card) 36%, transparent) 98.68%
				);

				stroke-width: 1px;
				stroke: var(--l1-border);
				filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
				backdrop-filter: blur(20px);
				border: 1px solid var(--l1-border);
				border-radius: 4px;

				.span-percentiles-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 8px;
					padding: 8px 12px 8px 12px;
					border-bottom: 1px solid var(--l1-border);

					.span-percentiles-header-text {
						display: flex;
						align-items: center;
						gap: 8px;
						cursor: pointer;
					}
				}

				.span-percentile-content {
					display: flex;
					flex-direction: column;
					gap: 8px;
					padding: 8px;

					.span-percentile-content-title {
						.span-percentile-value {
							color: var(--bg-sakura-400);
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on;
						}

						.span-percentile-value-loader {
							display: inline-flex;
							align-items: flex-end;
							justify-content: flex-end;
							margin-right: 4px;
							margin-left: 4px;
							line-height: 18px;
						}
					}

					.span-percentile-timerange {
						width: 100%;

						.span-percentile-timerange-select {
							width: 100%;
							margin-top: 8px;
							margin-bottom: 16px;

							.ant-select-selector {
								border-radius: 50px;
								border: 1px solid var(--l1-border);
								background: var(--l1-background);
								color: var(--l2-foreground);
								font-family: Inter;
								font-size: 12px;
								font-style: normal;
								font-weight: 400;
								line-height: 20px; /* 142.857% */
								letter-spacing: 0.28px;

								height: 32px;
							}
						}
					}

					.span-percentile-values-table {
						.span-percentile-values-table-header-row {
							display: flex;
							align-items: center;
							justify-content: space-between;
							gap: 8px;

							.span-percentile-values-table-header {
								color: var(--l2-foreground);
								text-align: right;
								font-family: Inter;
								font-size: 11px;
								font-style: normal;
								font-weight: 500;
								line-height: 20px; /* 181.818% */
								text-transform: uppercase;
							}
						}

						.span-percentile-values-table-data-rows {
							margin-top: 8px;
							display: flex;
							flex-direction: column;
							gap: 4px;

							.span-percentile-values-table-data-rows-skeleton {
								display: flex;
								flex-direction: column;
								gap: 4px;

								.ant-skeleton-title {
									width: 100% !important;
									margin-top: 0px !important;
								}

								.ant-skeleton-paragraph {
									margin-top: 8px;

									& > li + li {
										margin-top: 10px;
										width: 100% !important;
									}
								}
							}
						}

						.span-percentile-values-table-data-row {
							display: flex;
							align-items: center;
							justify-content: space-between;
							gap: 12px;
							padding: 0px 4px;

							.span-percentile-values-table-data-row-key {
								flex: 0 0 auto;
								color: var(--l1-foreground);
								text-align: right;
								font-variant-numeric: lining-nums tabular-nums slashed-zero;
								font-feature-settings:
									'dlig' on,
									'salt' on;
								font-family: Inter;
								font-size: 12px;
								font-style: normal;
								font-weight: 500;
								line-height: 20px; /* 166.667% */
							}

							.span-percentile-values-table-data-row-value {
								color: var(--l2-foreground);
								font-variant-numeric: lining-nums tabular-nums stacked-fractions
									slashed-zero;
								font-feature-settings:
									'dlig' on,
									'salt' on,
									'ss02' on;
								font-family: Inter;
								font-size: 12px;
								font-style: normal;
								font-weight: 400;
								line-height: 20px; /* 166.667% */
							}

							.dashed-line {
								flex: 1;
								height: 0; /* line only */
								margin: 0 8px;
								border-top: 1px dashed var(--l1-border);

								/* Use border image to control dash length & spacing */
								border-top-width: 1px;
								border-top-style: solid; /* temporary solid for image */
								border-image: repeating-linear-gradient(
										to right,
										#1d212d 0,
										#1d212d 10px,
										transparent 10px,
										transparent 20px
									)
									1 stretch;
							}
						}

						.current-span-percentile-row {
							border-radius: 2px;
							background: color-mix(
								in srgb,
								var(--primary-background) 20%,
								transparent
							);

							.span-percentile-values-table-data-row-key {
								color: var(--text-robin-300);
							}

							.dashed-line {
								flex: 1;
								height: 0; /* line only */
								margin: 0 8px;
								border-top: 1px dashed #abbdff;

								/* Use border image to control dash length & spacing */
								border-top-width: 1px;
								border-top-style: solid; /* temporary solid for image */
								border-image: repeating-linear-gradient(
										to right,
										#abbdff 0,
										#abbdff 10px,
										transparent 10px,
										transparent 20px
									)
									1 stretch;
							}

							.span-percentile-values-table-data-row-value {
								color: var(--text-robin-400);
							}
						}
					}
				}

				.resource-attributes-select-container {
					overflow: hidden;
					width: calc(100% + 16px);

					position: absolute;
					top: 32px;
					left: -8px;
					z-index: 1000;

					.resource-attributes-select-container-header {
						.resource-attributes-select-container-input {
							border-radius: 0px;
							border: none !important;
							box-shadow: none !important;
							height: 36px;

							border-bottom: 1px solid var(--l1-border) !important;
						}
					}

					border-radius: 4px;
					border: 1px solid var(--l1-border);
					background: linear-gradient(139deg, var(--card) 0%, var(--card) 98.68%);
					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
					backdrop-filter: blur(20px);

					.ant-select {
						width: 100%;
					}

					.resource-attributes-items {
						height: 200px;
						overflow-y: auto;

						&::-webkit-scrollbar {
							width: 0.3rem;
							height: 0.3rem;
						}

						&::-webkit-scrollbar-track {
							background: transparent;
						}

						&::-webkit-scrollbar-thumb {
							background: var(--l3-background);
						}

						&::-webkit-scrollbar-thumb:hover {
							background: var(--l3-background);
						}
					}

					.resource-attributes-select-item {
						display: flex;
						align-items: center;
						gap: 8px;
						padding: 8px 12px 8px 12px;

						.resource-attributes-select-item-checkbox {
							.ant-checkbox-disabled {
								background-color: var(--primary-background);
								color: var(--l1-foreground);
							}

							.resource-attributes-select-item-value {
								color: var(--l1-foreground);

								font-family: Inter;
								font-size: 13px;
								font-style: normal;
								font-weight: 400;
								line-height: 20px; /* 142.857% */
								letter-spacing: -0.07px;
							}
						}
					}
				}
			}

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

			.attribute-container .wrapper,
			.value-wrapper {
				display: flex;
				align-items: center;
				width: fit-content;
				max-width: 100%;
				border-radius: 50px;
				border: 1px solid var(--l1-border);
				background: var(--l1-border);

				.attribute-value {
					padding: 2px 8px;
					color: var(--l2-foreground);
					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(--l1-border);
				background: var(--l1-border);
				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(--l1-border);

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

			.related-signals-section {
				.view-title {
					display: flex;
					gap: 8px;
					align-items: center;
					font-size: 12px;
					line-height: 30px;
				}
				.ant-btn.ant-btn-default {
					padding: 0 15px;
					&:not(:hover) {
						border: 1px solid var(--l1-border);
					}
				}
			}
		}
	}

	.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(--l1-border) !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: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
					color: var(--l2-foreground);
					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-percentile-tooltip {
	.ant-tooltip-content {
		width: 300px;
		max-width: 300px;
	}

	.span-percentile-tooltip-text {
		color: var(--l2-foreground);
		font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
			slashed-zero;
		font-feature-settings:
			'dlig' on,
			'salt' on;
		font-family: Inter;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px; /* 166.667% */
		letter-spacing: -0.06px;

		.span-percentile-tooltip-text-percentile {
			color: var(--text-sakura-500);
			font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
			font-feature-settings:
				'dlig' on,
				'salt' on;
			font-family: Inter;
			font-size: 12px;
		}

		.span-percentile-tooltip-text-link {
			color: var(--l2-foreground);
			text-align: right;
			font-family: Inter;
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: 20px; /* 166.667% */
		}
	}
}

.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: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
	}
}

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