// Add a New Comment Form
.comments__form {
	position: relative;
	padding: 0 0 0 42px;
	margin-top: 24px;

	.gravatar {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 48px; /* stylelint-disable-line scales/radii */
	}

	input {
		font-size: $font-body-small;
		padding: 5px 10px;
	}

	button:not(.components-button) {
		opacity: 0;
		position: absolute;
		margin: 16px 0 0;
		transition: all 0.2s ease-in-out;

		&.is-active {
			cursor: pointer;
		}

		&.is-visible {
			position: relative;
			z-index: z-index("root", ".comments__form .button:not(.components-button)");
			float: right;
			opacity: 1;
		}
	}

	button:focus {
		outline: dotted 1px var(--color-primary);
		color: var(--color-primary);
	}

	.comments__cancel-reply {
		font-size: $font-body-extra-small;
		cursor: pointer;
	}
}

// On /reader/conversations, balance the space below and
// above the "Send" button.  The default negative margin
// of -19px is intended for the pages like
// /reader/feeds/:feed_id/posts/:post_id.
.conversations__comment-list {
	.comments__form {
		button {
			margin-bottom: -9px;
		}
	}
}

.comments__form-closed {
	color: var(--color-text-subtle);
	margin-top: 20px;
	margin-bottom: -3px;
	font-family: $sans;
	text-align: center;
	border-top: 1px solid var(--color-neutral-0);
	padding-top: 22px;
	font-size: $font-body-small;
}
