@import '@wordpress/base-styles/colors';
@import '@wordpress/base-styles/variables';
@import '@wordpress/base-styles/mixins';
@import './reset.scss';

.wpnc__note .wpnc__body .wpnc__body-content {
	padding: 0;
	margin: 0;
	line-height: 20px;
	text-wrap: balance;

	.has-text-align-center {
		text-align: center;
	}

	.has-text-align-right {
		text-align: right;
	}

	.has-text-align-left {
		text-align: left;
	}

	.has-text-align-justify {
		text-align: justify;
	}

	.wpnc__h1 {
		font-size: $font-size-2x-large;
		font-weight: 850; /* stylelint-disable-line scales/font-weights */
		line-height: 1.4;
	}

	.wpnc__h2 {
		font-size: 26px;
		font-weight: 750; /* stylelint-disable-line scales/font-weights */
		line-height: 1.4;
	}

	.wpnc__h3 {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.4;
	}

	.uppercase {
		text-transform: uppercase;
	}

	.has-drop-cap:not(:focus)::first-letter {
		font-weight: bold;
		line-height: 0.66;
		text-transform: uppercase;
		font-style: normal;
		float: left;
		font-size: calc(2 * 2.25rem);
		margin: 0.05em 0.1em 0 0;
	}

	.has-drop-cap:not(:focus)::after {
		content: "";
		display: table;
		clear: both;
		padding-top: 14px;
	}

	.wpnc__sub {
		font-size: smaller;
		vertical-align: sub;
	}

	.wpnc__sup {
		font-size: smaller;
		vertical-align: super;
	}

	.wpnc__em {
		font-style: italic;
	}

	.wpnc__image {
		display: block;
		max-width: 100%;
		height: auto;
		margin: auto;
	}

	.wpnc__badge {
		display: block;
		margin: 0 auto;
		padding: $grid-unit-20;
	}

	.wpnc__paragraph {
		padding: $grid-unit-20 0;

		&:first-child {
			padding-top: 0;
		}

		&:has(.wpnc__button) {
			margin: 0 -#{$grid-unit-20};
			padding: 16px;
			border-top: 1px solid $gray-100;
		}
	}

	.wpnc__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 36px;
		padding: 6px 12px;
		margin: 0;
		border: 0;
		border-radius: 2px;
		box-sizing: border-box;
		font-family: inherit;
		font-size: 13px;
		color: var(--wp-components-color-accent-inverted, #fff);
		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9 ));
		white-space: nowrap;
		text-decoration: none;
		text-shadow: none;
		outline: 1px solid transparent;
		cursor: pointer;

		&:hover:not(:disabled) {
			color: var(--wp-components-color-accent-inverted, #fff);
			background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
		}
	}

	.wpnc__hr-separator {
		border: none;
		border-top: 1px solid $gray-100;
	}

	// Links
	a,
	a:visited {
		color: var(--wp-admin-theme-color);
	}

	a:hover,
	a:focus,
	a:active {
		color: var(--wp-admin-theme-color);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: bold;
	}

	img {
		height: auto;
		max-width: 128px;
	}

	blockquote {
		padding: 0 $grid-unit-20;
		margin: 0 0 $grid-unit-20 0;
		box-shadow: inset 3px 0 0 #f0f0f0;
		font-weight: 400;
		font-style: italic;
		color: #646970;
		background: transparent;
	}

	ul,
	ol {
		margin-left: 1.5em;
		list-style-position: inside;
	}

	ul {
		list-style-type: disc;
		ul {
			list-style-type: circle;
			ul {
				list-style-type: square;
			}
		}
	}

	ol {
		list-style-type: decimal;
	}

	li {
		margin: auto;
	}
}

.comment-reply-input__textarea {
	flex: 1;

	> .components-base-control__field {
		margin-bottom: 0;
	}
}

.wpnc__subject {
	.wpnc__user,
	.wpnc__post {
		font-weight: 500;
	}
}

.wpnc__text-summary {
	.components-external-link:not(:hover) {
		color: inherit;
	}

	.components-external-link__contents {
		text-decoration: none;
	}
}

.wpnc__gridicon .gridicons-reply {
	display: inline-block;
	transform: translateY(2px);
	fill: #8c8f94;
}

/**
 * User
 */
.wpnc__user {
	.wpnc__note & {
		padding: 0;
	}

	.wpnc__user-title {
		font-weight: 500;
	}

	.wpnc__user-description-separator {
		color: $gray-700;

		&:first-child,
		&:last-child {
			display: none;
		}
	}

	a {
		text-decoration: none;
	}
}

/**
 * Comment
 */
.wpnc__note.wpnc__comment .wpnc__body .wpnc__body-content {
	padding: 0 0 0 $grid-unit-20;
	box-shadow: inset 3px 0 0 #f0f0f0;

	.wpnc__user {
		padding: 0 0 $grid-unit-20 0;
	}
}

/**
 * Likes, Follows
 */
.wpnc__note.wpnc__like .wpnc__body .wpnc__body-content,
.wpnc__note.wpnc__comment_like .wpnc__body .wpnc__body-content,
.wpnc__note.wpnc__follow .wpnc__body .wpnc__body-content {
	.wpnc__user {
		padding: 12px 0;
		border-bottom: 1px solid $gray-100;

		&:first-child {
			padding-top: 0;
			margin-top: -4px;
		}
	}

	.wpnc__paragraph {
		padding: 16px 0 0;
	}
}

.wpnc__action-link.has-icon.has-text {
	flex: 1;
	justify-content: center;
}

/**
 * Reply
 */
.wpnc__reply {
	color: #646970;

	.wpnc__gridicon {
		fill: currentColor;
	}

	a {
		font-weight: 600;
		color: inherit;
	}
}
