.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
	box-shadow: none;

	.interface-complementary-area-header {
		display: none;
	}
}

.editor-collab-sidebar {
	height: 100%;
}

.editor-collab-sidebar-panel {
	padding: $grid-unit-20;
	height: 100%;

	&__thread {
		position: relative;
		padding: $grid-unit-20;
		border-radius: $radius-large;
		border: 1.5px solid $gray-300;
		background-color: $gray-100;
		margin-bottom: $grid-unit-20;
	}

	&__active-thread {
		border: 1.5px solid #3858e9;
	}

	&__focus-thread {
		border: 1.5px solid #3858e9;
		background-color: $white;
		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
	}

	&__comment-field {
		flex: 1;
	}

	&__child-thread {
		margin-top: 15px;
	}

	&__user-name {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color: $gray-700;
		text-transform: capitalize;
	}

	&__user-time {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color: $gray-700;
	}

	&__user-comment {
		font-size: 13px;
		font-weight: 400;
		line-height: 20px;
		text-align: left;
		color: $gray-900;

		p {
			margin-bottom: 0;
		}
	}

	&__user-avatar {
		border-radius: $radius-round;
		flex-shrink: 0;
	}

	&__thread-overlay {
		background-color: rgba(0, 0, 0, 0.7);
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		padding: 15px;
		border-radius: $radius-large;
		color: $white;

		p {
			margin-bottom: 15px;
		}

		button {
			padding: 4px 10px;
			color: $white;
		}
	}

	&__comment-status {
		margin-left: auto;

		button {
			&.has-icon:not(.has-text) {
				min-width: 24px;
				padding: 0;
				width: 24px;
				height: 24px;
				flex-shrink: 0;
			}
		}
	}

	&__comment-dropdown-menu {
		flex-shrink: 0;

		button {
			&.has-icon {
				min-width: 24px;
				padding: 0;
				width: 24px;
				height: 24px;
			}
		}
	}

	&__show-more-reply {
		font-weight: 500;
		font-style: italic;
		padding: 0;
	}
}