.commentArray {
	h3 {
		margin: 20px 0;
	}
}

.comment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 10px;
}

.comment--meta {
	display: flex;
	align-items: center;
	img {
		width: 25px;
		border-radius: 100%;
	}
	.comment--username {
		padding-left: 10px;
		font-size: 0.9rem;
		font-family: $primary-font;
		font-weight: 600;
		background-clip: text;
		background: $gradient-color;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		cursor: pointer;
	}
}

.comment--body {
	font-size: 0.86rem;
	font-weight: 600;
	padding-left: 20px;
	color: $secondary-color;
}

.comment--delete {
	margin: 0 1rem;
	align-self: center;
	svg {
		color: $secondary-color;
		cursor: pointer;
	}
}

.commentsArray-list {
	max-height: 27vh;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
}

.createComment-form {
	display: flex;
	width: 100%;
	margin-top: 20px;
	padding-top: 10px;
	form {
		display: flex;
		width: 100%;
		input {
			border: none;
			border-bottom: 1px solid #ccc;
			flex: 1;
			transition: all 0.3s ease;
			font-family: $primary-font;
			font-weight: 600;
			&:focus {
				border: none;
				outline: none;
				border-bottom: 1px solid #a0a0a0;
			}
		}
		button {
			outline: none;
			border: none;
			background-color: transparent;
			svg {
				font-size: 1.3rem;
				margin: 0 1rem;
				color: $secondary-color;
			}
		}
	}
}
