.comment-form {
	background-color: var(--color-gray-light);
	border-radius: 20px;
	margin-bottom: 1.5rem;
	padding: 16px;
	position: relative;
}
.comment-form__label {
	display: block;
}
.comment-form__input {
	display: block;
	box-sizing: border-box;
	background-color: var(--color-gray-xlight);
	border: none;
	border-radius: 12px;
	font-weight: 500;
	font-size: .875rem;
	line-height: 1.25rem;
	resize: vertical;
	padding: 10px 42px 10px 16px;
	width: 100%;
	min-height: 40px;
}
.comment-form__input::placeholder {
	color: var(--color-gray);
}
.comment-form__submit {
	background-color: var(--color-gray-light);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: var(--transition);
	padding: 0;
	position: absolute;
	right: calc(16px + 6px);
	bottom: calc(16px + 6px);
	width: 28px;
	height: 28px;
}
.comment-form__submit > .ico {
	fill: var(--color-gray);
	transition: var(--transition);
}
.comment-form__submit:is(:active, :focus-visible, :hover) {
	background-color: var(--color-gray);
}
.comment-form__submit:is(:active, :focus-visible, :hover) > .ico {
	fill: var(--color-white);
}

.comment {
	display: flex;
	border-bottom: 1px solid var(--color-gray);
	margin-bottom: .75rem;
	padding-bottom: .75rem;
}
.comment_hidden {
	background-color: rgba(233, 91, 159, 0.4);
}
.comment__avatar {
	margin-right: 12px;
}
.comment__avatar-img {
	border: 1px solid var(--color-gray);
	border-radius: 50%;
	width: 40px;
	height: 40px;
}
.comment__content {
	width: calc(100% - 40px - 1px * 2 - 12px);
}
.comment__author {
	color: var(--color-brown);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: .25rem;
}
.comment__text {
	color: var(--color-brown);
	font-weight: 500;
	font-size: .875rem;
	margin-bottom: .5rem;
}
.comment__date {
	color: var(--color-gray-dark);
	font-weight: 500;
	font-size: .75rem;
}

.control {
	background-color: var(--color-white);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--color-blue);
	cursor: pointer;
	width: 20px;
	height: 20px;
}
.control > .ico {
	width: 80%;
	height: 80%;
}
.control_visibility > .ico {
	fill: var(--color-gray);
}
.control_visibility.active > .ico {
	fill: var(--color-blue);
}
.control_delete > .ico {
	fill: var(--color-red);
}