// Post Comments.
.elementor-widget-post-comments {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		.respond-box {
			position: relative;

			.no-comments {
				margin-top: 0;
				padding-top: var(--vamtam-content-space-l);
				border-top: solid 1px var(--vamtam-default-line-color);
			}
		}

		.comment-reply-title,
		.comments-wrapper .sep-text .content,
		.comments-wrapper .sep-text .content a {
			color: var(--e-global-color-vamtam_accent_6);
			font-family: var(--e-global-typography-vamtam_h5-font-family), Sans-serif;
			font-size: var(--e-global-typography-vamtam_h5-font-size);
			font-weight: var(--e-global-typography-vamtam_h5-font-weight);
			text-transform: var(--e-global-typography-vamtam_h5-text-transform);
			font-style: var(--e-global-typography-vamtam_h5-font-style);
			text-decoration: var(--e-global-typography-vamtam_h5-text-decoration);
			line-height: var(--e-global-typography-vamtam_h5-line-height);
			letter-spacing: var(--e-global-typography-vamtam_h5-letter-spacing);
			word-spacing: var(--e-global-typography-vamtam_h5-word-spacing);

			display: block;
			height: auto;
			text-align: start;
			margin: 0;
			padding: var(--vamtam-content-space-l) 0;
			padding-top: 0;
  			border: none;
		}

		.comment-reply-title {
			padding-bottom: 8px;
		}

		.comments-wrapper {
			clear: both;
			margin-bottom: 0px;

			body:not(.vamtam-is-elementor) & {
				border: 0;
			}

			.sep-text {
				z-index: 2;
				margin-top: 0px;
				margin-bottom: 0px;
				position: relative;

				.content {
					padding-bottom: 35px;
				}
			}

			label {
				display: inline-block;
				padding-bottom: 5px;
			}
			.logged-in-as {
				margin: 0 0 20px 0 !important;
				a {
					border: var( --vamtam-no-border-link );
				}
			}
		}

		.comments,
		.woocommerce #reviews #comments {
			@comment-avatar: 70px;
			position: relative;

			#respond {
				padding: 10px 0px;
			}


			.comment {
				position: relative;

				&.depth-1 {
					border-left: 0;
				}

				// nested
				.comment {
					padding: var(--vamtam-content-space-l) 0 0 20px;
					box-sizing: border-box;
					margin-left: 35px;
				}

				.single-comment-wrapper {
					display: flex;
				}

				.comment-content {
					flex: 1;
					max-width: 100%;
					padding-bottom: 0;

					p {
						font-size: inherit;
						line-height: 1.3em;

						&:last-child {
							margin-bottom: 0;
						}

						+ .comment-reply-link {
							display: flex;
							margin-top: 1.3em;
						}
					}

					img {
						padding: 10px 0px;
					}
				}
			}

			.avatar {
				max-width: 85px !important;
				max-height: 85px;
				width: 85px;
				border: 0;
			}

			.comment-author {
				display: inline-block;
				vertical-align: top;
				width: auto;
				padding-bottom: 0;

				img {
					margin-right: var(--vamtam-content-space-m);
					background: var( --vamtam-accent-color-7 );
					border-radius: 100em;
					display: block;
				}
			}

			.bypostauthor {
				position: relative;
				z-index: 1;
			}
			.comment-author-link {
				a {
					color: var(--e-global-color-vamtam_accent_6);
					font-size: var(--e-global-typography-b8fb866-font-size);
					font-weight: var(--e-global-typography-b8fb866-font-weight);
					text-decoration: var(--e-global-typography-b8fb866-text-decoration);
					line-height: var(--e-global-typography-b8fb866-line-height);
					letter-spacing: var(--e-global-typography-b8fb866-letter-spacing);
					word-spacing: var(--e-global-typography-b8fb866-word-spacing);
				}
			}
			.comment-time {
				padding: .2em 0 10px 0;
				font-size: .8em;
				color: var(--vamtam-accent-color-6);
				opacity: 0.6;
			}

			.comment-meta {
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;

				.comment-meta-left {
					max-width: 80%;
				}

				> .comment-meta-inner {
					display: flex;
					flex-flow: column;
					flex-wrap: wrap;

					> div,
					> a {
						margin-right: 10px;
						margin-bottom: 0;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.comment-author-link {
					color: var(--e-global-color-vamtam_accent_6);
					font-family: var(--e-global-typography-5d88b43-font-family), Sans-serif;
					font-size: var(--e-global-typography-5d88b43-font-size);
					font-weight: var(--e-global-typography-5d88b43-font-weight);
					text-transform: var(--e-global-typography-5d88b43-text-transform);
					font-style: var(--e-global-typography-5d88b43-font-style);
					text-decoration: var(--e-global-typography-5d88b43-text-decoration);
					line-height: var(--e-global-typography-5d88b43-line-height);
					letter-spacing: var(--e-global-typography-5d88b43-letter-spacing);
					word-spacing: var(--e-global-typography-5d88b43-word-spacing);
				}
			}

			#reply-title {
				margin-bottom: 0px !important;
			}

			#cancel-comment-reply-link {
				&:extend( .vamtam-font-primary-font );
				color: var( --vamtam-body-link-regular );
				position: relative;
				margin-left: 5px;
				text-transform: capitalize;
			}

			.comment-notes {
				margin-bottom: 14px;
				font-size: 10px;
				opacity: 0.6;
			}

			.comment-note {
				position: absolute;
				top: -10px;
				font-size: 12px;
				transition: all .35s;
				opacity: 0;
				color: #4F9304;
			}

			a.comment-reply-link {
				font-size: 12px;
				font-weight: 500;
				padding: 8px 16px 10px 16px;
				margin-top: 0;
			}
		}

		.comments .comment,
		.woocommerce #reviews #comments .comment,
		.woocommerce #reviews #comments ol.commentlist li {
			border: none;
			padding: 0 0 var(--vamtam-content-space-l);
		}

		#commentform {
			clear: both;
			position: relative;
			border: none;
			padding: 0;
			&:extend( .vamtam-font-primary-font );

			&:after {
				display: block;
				clear: both;
				content: "";
			}

			.input {
				background: var( --vamtam-accent-color-5 );
			}

			.form-input {
				float: left;
				width: 100%;
				background: none;
			}

			.comment-form-email:hover .comment-note {
				opacity: 1;
				top: -20px;
			}

			.comment-form-comment textarea {
				padding: var(--forms-fields-padding, 8px);
				min-height: 45px;
				height: 130px;
			}

			input[type=text],
			input[type=email],
			input[type=url],
			.comment-form-comment textarea {
				padding: var(--forms-fields-padding, 8px);
				min-height: 45px;
				width: 100%;
				margin-top: 10px;
				margin-bottom: 0 !important;
				outline: none;

				&::placeholder {
					color: var(--vamtam-accent-color-6);
				}
			}

			.form-submit {
				bottom: 0;
				height: auto;
				float: none;
				clear: both;
			}

			input[type="checkbox"] {
				vertical-align: middle;
				margin-right: 5px;
				padding: 10px;
				float: left;
			}

			label[for="wp-comment-cookies-consent"] {
				display: inline;
			}

			p {
				line-height: 1.5;
				font-size: 12px;
				font-style: normal;
				margin-bottom: var(--vamtam-content-space-m);

				&.comment-notes {
					line-height: 1.5;
					font-size: 12px;
					font-style: normal;
				}
			}

			.comment-form-cookies-consent {
				display: flex;
				align-items: center;
				> input {
					margin-right: 10px;
				}
				> label {
					padding-bottom: 0;
				}
			}
		}

		.comment-author {
			line-height: 1em !important;

			span {
				float: left;
				margin-top: 3px;
			}
		}

		.comment-edit-link {
			font-size: 12px !important;

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

		.comments {
			border-bottom: solid 1px var(--e-global-color-vamtam_accent_7);
			margin-bottom: var(--vamtam-content-space-l);
		}

		// Underline anim
		&[data-widget_type="post-comments.theme_comments"] {
			.form-submit {
				#submit {
					display: none;
				}
			}
			:is(.elementor-button[type="submit"], .comment-reply-link) {
				@tran-time: .5s; // If changed, please update the timeout timer value in the JS handler as well.
				@width: var(--vamtam-underline-width, var(--vamtam-global-underline-width, 1px));
				@spacing: var(--vamtam-underline-spacing, var(--vamtam-global-underline-spacing, 1px));
				@color: linear-gradient(var(--vamtam-underline-bg-color, var(--vamtam-global-underline-bg-color, currentColor)) 0 0);

				:is(.elementor-button-text, .btext) {
					position: relative;

					@keyframes vamtam-underline-anim-left {
						0% {
							transform: scaleX(0);
						}

						100% {
							transform: scale(1);
						}
					}

					@keyframes vamtam-underline-anim-right {
						0% {
							transform: scaleX(.8);
						}

						100% {
							transform: scaleX(0);
						}
					}

					&::after,
					&::before {
						content: "";
						display: block;
						position: absolute;
						width: 100%;
						top: 100%;
						margin-top: @spacing;
						height: @width;
						background: @color;
						will-change: transform;
					}
					&::before {
						transform-origin: left;
					}
					&::after {
						transform: scaleX(0);
						transform-origin: right;
					}
				}

				@media (any-pointer: fine) {
					// This class is added from the JS hadler of the widget (handleBtnUnderlineAnimation() function).
					&.hovered {
						:is(.elementor-button-text, .btext) {
							&::before {
								animation: vamtam-underline-anim-left calc(@tran-time + 0.15s) ease forwards;
							}

							&::after {
								animation: vamtam-underline-anim-right @tran-time ease forwards;
							}
						}
					}
				}
			}
		}
	}
}
