.focus-comments-container {
	display        : flex;
	flex-direction : column;
	max-height     : 500px;
}

.focus-comments-container .comment-list {
	overflow-y       : auto;
	scrollbar-gutter : stable;
	flex             : 1;
}

.focus-comments-container .comment {
	display               : grid;
	grid-template-columns : 1fr auto;
	gap                   : .2rem 1rem;
	padding               : .5rem;
	align-items           : start;
}

.focus-comments-container .comment .comment-buttons {
	grid-column     : 2;
	grid-row        : 1 / -1;
	display         : flex;
	flex-direction  : column;
	gap             : .5rem;
}

.focus-comments-container .name {
	font-weight: bold;
}

.focus-comments-container .comment-form {
	padding    : 1rem .5rem;
	margin-top : .5rem;
	border-top : 1px solid gray;
}

.focus-comments-container .comment-form .input-container {
	grid-column : 1;
	min-width   : 0;
}

.focus-comments-container .comment-form .input-container textarea {
	width         : 100%;
	box-sizing    : border-box;
	resize        : none;
	overflow-y    : auto;
	max-height    : 150px;
	border-radius : 3px;
}

.focus-comments-container .comment-form .submit-container {
	grid-column  : 2;
	display      : flex;
	align-items  : flex-start;
}

.focus-comments-container .comment-buttons .edit-button,
.focus-comments-container .comment-buttons .update-button,
.focus-comments-container .submit-button {
	border-radius : .2rem;
	font-size     : 1rem;
	padding       : .5rem;
	min-width     : 4rem;
	text-align    : center;
}

.focus-comments-container .edited {
	font-style : italic;
}

.update-modal {
	display    : grid;
	text-align : center;
	margin     : .5rem;
	row-gap    : 1rem;
	padding    : 0.5rem;
	min-width  : 40rem;
	max-width  : 100%;
	min-height : 10rem;
	overflow-y : auto;
}

.update-header {
	font-size   : larger;
	font-weight : bold;
}

.update-modal .edit-comment {
	width     : 100%;
	max-width : 100%;
}