// The main comment list wrapper
.comments__comment-list {
	border-top: 1px solid var(--color-neutral-10);
	clear: both;
	margin: 36px 0;
	padding-top: 11px;
	cursor: default;

	.comments__toggle-expand,
	.comments__open-post {
		margin-top: 9px;
		margin-bottom: -7px;

		&:hover {
			color: var(--color-link);
		}
	}

	.comments__toggle-expand {
		margin-left: 42px;
	}

	.comments__open-post {
		margin-left: 5px;
	}

	.segmented-control {
		margin: 20px;
	}

	.comments__conversation-follow-button,
	.button.comments__manage-comments-button {
		align-items: center;
		display: flex;
		gap: 6px;
		justify-content: center;
		padding: 0;
		background-color: inherit;

		.gridicons-chat {
			position: relative;
			top: 2px;
		}

		@include breakpoint-deprecated( "<660px" ) {
			span {
				display: none;
			}
		}
	}

	.comments__form .form-fieldset {
		margin: 0;
	}

	&.is-inline.is-collapsed {
		.comments__comment-content {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;

			* {
				display: inline;
				background: transparent;
			}

			script,
			br {
				display: none;
			}
		}
	}
}

.comments__info-bar {
	margin: 0 36px 0 0;
	position: relative;
	width: 100%;

	.comments__info-bar-title-links {
		align-items: flex-start;
		display: flex;
	}

	.comments__actions-wrapper {
		display: flex;
		gap: 24px;
	}

	.comments__comment-count {
		flex: 1;
		white-space: nowrap;
	}

	.comments__comment-list.has-double-actions & {
		margin: 0 8px -8px 0; // move to a separate line to prevent an overlap
	}

	&.is-no-comments {
		display: none;
	}
}

.comments__view-more {
	color: var(--color-text-subtle);
	cursor: pointer;
	display: block !important; // to overwrite inline-block rule
	font-size: $font-body-small;
	line-height: 1;
	margin-bottom: 15px !important; // to overwrite 10px value

	&.comments__view-more-last {
		margin-top: 16px;
	}

	&:hover {
		color: var(--color-primary-light);
	}
}
