// =================================================================
// Comments Settings
// =================================================================

@use "sass:math";

// Comment margin
//
// Controls the amount of spacing between comment threads on a post.
//
// Styleguide News.Comments.Comment Margin
//
// Access: Public
//
// Since: 1.0.0

$comment-margin:                           $margin !default;

// Comment margin mobile
//
// Controls the amount of spacing between comment threads on a post on mobile.
//
// Styleguide News.Comments.Comment Margin Mobile
//
// Access: Public
//
// Since: 2.0.0

$comment-margin-mobile:               		 $margin-small !default;

// Reply margin
//
// Controls the amount of spacing between comments within a thread on desktop.
// By default, there is no margin between comments on mobile.
//
// Styleguide News.Comments.Reply Margin
//
// Access: Public
//
// Since: 2.0.0

$comment-reply-margin:                     $margin-small !default;

// Reply depth
//
// Controls the amount of space a reply comment is indented from the parent.
//
// Styleguide News.Comments.Reply Depth
//
// Access: Public
//
// Since: 2.0.0

$comment-reply-depth:                      $margin-small !default;

// Reply depth mobile
//
// Controls the amount of space a reply comment is indented from the parent on mobile.
//
// Styleguide News.Comments.Reply Depth Mobile
//
// Access: Public
//
// Since: 2.0.0

$comment-reply-depth-mobile:               math.div( $comment-reply-depth, 3 ) !default;

// Comment Border
//
// Controls the border style between comments on a post.
//
// Styleguide News.Comments.Comment Border
//
// Access: Public
//
// Since: 1.0.0

$border-comment:                           $border !default;

// Comment Border Width
//
// Controls the border width between comments on a post.
//
// Styleguide News.Comments.Comment Border Width
//
// Access: Public
//
// Since: 1.0.0

$border-width-comment:                      1px 1px 1px 5px !default;

// Comment Padding
//
// Controls the amount of spacing within comments.
//
// Styleguide News.Comments.Comment Padding
//
// Access: Public
//
// Since: 1.0.0

$comment-padding:                           $padding-small !default;

// Comment Padding Mobile
//
// Controls the amount of spacing within comments on mobile.
//
// Styleguide News.Comments.Comment Padding Mobile
//
// Access: Public
//
// Since: 1.0.0

$comment-padding-mobile:                           $padding-small !default;

// Comment Font Family
//
// Controls the font family used for comments on a post.
//
// Styleguide News.Comments.Comment Font Family
//
// Access: Public
//
// Since: 1.0.0

$font-family-comment:                       $font-family-sans-serif !default;

// Comment Color
//
// Controls the color of comments on a post.
//
// Styleguide News.Comments.Comment Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-comments:                           $color-base !default;

// Reply Color
//
// Controls the color of replies to comments on a post.
//
// Styleguide News.Comments.Reply Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-comment-reply:                      $color-grayscale-6 !default;

// Author Color
//
// Controls the color of the author name in a comment.
//
// Styleguide News.Comments.Author Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-comment-author-name:                 $color-grayscale-0 !default;

// Says Color
//
// Controls the color of the "says" text after author name in a comment.
//
// Styleguide News.Comments.Says Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-comment-author-says:                     $color-grayscale-6 !default;

// Submission Background Color
//
// Controls the background color of the comment submission form.
//
// Styleguide News.Comments.Submission Background Color
//
// Access: Public
//
// Since: 1.0.0

$color-comment-form-bg:                     $color-grayscale-f5 !default;

// Submission Border
//
// Controls the border style on the comment submission form.
//
// Styleguide News.Comments.Submission Border
//
// Access: Public
//
// Since: 1.0.0

$border-comment-form:                       $border !default;

// Submission Border Width
//
// Controls the border width on the comment submission form.
//
// Styleguide News.Comments.Submission Border Width
//
// Access: Public
//
// Since: 1.0.0

$border-width-comment-form:                  3px !default;

// =================================================================
// Comments Styles
// =================================================================

// Controls styling for the comments section on posts.
//
// Styleguide Components.Comments.comments-area
//
// Access: Public
//
// Since: 1.0.0

.comments-area {
	color: var(--comment-color, var(--bu-text-color, #{$color-comments}));

	// Remove defaults for all OL on this page

	ol {
		list-style: none;
		padding: 0;
	}
}

// Controls styling for comment threads on posts.
//
// Styleguide Components.Comments.comments-list
//
// Access: Public
//
// Since: 1.0.0

.comments-list {
	margin-inline-start: calc(var(--margin-small, #{$margin-small}) * -1);
	margin-inline-end: calc(var(--margin-small, #{$margin-small}) * -1);

	@include breakpoint( $sm ) {
		margin: 0;
	}
}

// Controls styling for the comment container.
//
// Styleguide Components.Comments.comment
//
// Access: Public
//
// Since: 1.0.0

.comment {
	margin-inline-start: var(--comment-reply-depth-mobile, #{$comment-reply-depth-mobile});

	@include breakpoint( $sm ) {
		margin-inline-start: var(--comment-reply-depth, #{$comment-reply-depth});
	}

	&.depth-1 {
		margin-block: var(--comment-margin, #{$comment-margin-mobile});
		padding: 0;

		@include breakpoint( $sm ) {
			margin-block: var(--comment-margin, #{$comment-margin});
		}
	}
}

// Controls styling for individual comments on posts.
//
// Styleguide Components.Comments.comment-body
//
// Access: Public
//
// Since: 1.0.0

.comment-body {
	@extend %font-size-secondary;
	background: var(--comment-background);
	border: var(--comment-border, var(--bu-border, #{$border-comment}));
	border-width: var(--comment-border-width, var(--bu-border-width, #{$border-width-comment}));
	font-family: var(--comment-font, var(--bu-text-font, #{$font-family-comment}));
	padding: var(--comment-padding, #{$comment-padding-mobile});
	position: relative;

	@include breakpoint( $sm ) {
		margin-block: var(--comment-reply-margin, #{$comment-reply-margin});
		padding: var(--comment-padding, #{$comment-padding});
	}

	.children & {
		@media screen and ( max-width: ( $sm - 1 ) ) {
			border-top: 0; // Prevents borders from stacking on child comments
		}
	}
}

// Controls styling for the comment reply link.
//
// Styleguide Components.Comments.comment-reply-link
//
// Access: Public
//
// Since: 1.0.0

.comment-reply-link {
	@extend %font-size-minimum;
	color: var(--comment-link-color, var(--bu-link-color, #{$color-comment-reply}));
}

// Controls styling for the comment author.
//
// Styleguide Components.Comments.comment-author
//
// Access: Public
//
// Since: 1.0.0

.comment-author {
	@extend %font-size-5;
	color: var(--comment-author-color, #{$color-comment-author-name});

	a {
		color: var(--comment-author-color, #{$color-comment-author-name});
	}
}

// Controls styling for the "says" text after comment author.
//
// Styleguide Components.Comments.says
//
// Access: Public
//
// Since: 2.0.0

.says {
	color: var(--comment-author-says-color, #{$color-comment-author-says});
}

// Controls styling for the date and time of comments.
// This was hidden in the past, but in emergency situations, comments
// are often used as a means of communication, both officially and unofficially.
// Readers need to know how recent the last reliable update was should this happen.
// Disable or hide only with great caution, only using the `%visually-hidden` placeholder.
//
// Styleguide Components.Comments.comment-metadata
//
// Access: Public
//
// Since: 2.0.0

.comment-metadata {
	@extend %font-size-minimum;
	position: absolute;
	right: var(--comment-padding, #{$comment-padding});
	top: var(--comment-padding, #{$comment-padding});

	@include breakpoint( $sm ) {
		right: var(--comment-padding, #{$comment-padding});
		top: var(--comment-padding, #{$comment-padding});
	}

	a {
		color: var(--comment-link-color, var(--bu-link-color));
	}
}

// Styles the container which holds the comment content.
//
// Styleguide Components.Comments.comment-content
//
// Access: Public
//
// Since: 1.0.0

.comment-content {
	margin: 0.5em 0;

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

	a {
		color: var(--comment-link-color, var(--bu-link-color));
	}
}

// Styles the comment form container.
//
// Styleguide Components.Comments.comment-respond
//
// Access: Public
//
// Since: 1.0.0

.comment-respond {
	background: var(--comment-background, #{$color-comment-form-bg});
	border: var(--comment-border, var(--bu-border, #{$border-comment-form}));
	border-width: var(--comment-border-width, #{$border-width-comment-form});
	margin: $margin-small 0 $margin;
	padding: $padding;
	position: relative;

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	p {
		margin: 0 0 $padding;
	}

	label {
		display: block;
		margin: 0 0 2px;

		@include breakpoint( $sm ) {
			float: left;
			margin: $form-label-margin;
			padding-right: $padding-small;
			width: 25%;
		}
	}

	a {
		color: var(--comment-link-color, var(--bu-link-color));
	}
}

// Styles the comment form title.
//
// Styleguide Components.Comments.comment-respond-title
//
// Access: Public
//
// Since: 1.0.0

.comment-respond-title {
	@extend %font-size-4;
}

// Styles the container around the comment form submit button.
//
// Styleguide Components.Comments.comment-form-submit
//
// Access: Public
//
// Since: 1.0.0

.comment-form-submit {
	margin: $margin-small 0 0;
}

// Styles "view guidelines" and other helper text in the comment form.
//
// Styleguide Components.Comments.form-tip
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

.form-tip {
	@extend %font-size-minimum;
	color: $color-grayscale-6;

	@include breakpoint( $sm ) {
		display: block;
	}

	a {
		color: var(--comment-link-color, var(--bu-link-color));
	}
}

// Styles the comment text area in the comments form.
//
// Styleguide Components.Comments.comment
//
// Access: Public
//
// Since: 2.0.0

#comment {
	@include transition( height 50ms ease-in-out 0s );
	height: 6em;
	width: 100%;

	@include breakpoint( $sm ) {
		width: 75%;
	}

	&:focus,
	&:valid {
		@include transition( height 50ms ease-in-out 0s );
		height: 12em;
	}
}

// Styles the comment form submit button.
//
// Styleguide Components.Comments.comment-submit
//
// Access: Public
//
// Since: 2.0.0

.comment-submit {
	@include breakpoint( $sm ) {
		margin-inline-start: 25%;
	}
}

// Styles the cancel comment reply link.
// WordPress hides this on the comment form with an inline attribute when
// the comment is not a reply to another comment. To test this, hit the "Reply"
// link on any comment. You should be be able to see it.
//
// Styleguide Components.Comments.cancel-comment-reply
//
// Access: Public
//
// Since: 2.0.0

.cancel-comment-reply {
	@extend %font-size-minimum;
	display: inline-block;
	position: absolute;
	right: 20px;
	top: 20px;
}