@use "newspack-colors" as np-colors;
@use "../../shared/sass/variables";
@use "../../shared/sass/mixins";
@use "../../shared/sass/preview";

:root {
	--wpnbha-col-gap: 1em;
}

@include mixins.media( mobile ) {
	:root {
		--wpnbha-col-gap: 16px;
	}
}

@include mixins.media( tablet ) {
	:root {
		--wpnbha-col-gap: 32px;
	}
}

.colgap-2 {
	@include mixins.media( mobile ) {
		--wpnbha-col-gap: 16px;
	}
}

.colgap-1 {
	@include mixins.media( mobile ) {
		--wpnbha-col-gap: 8px;
	}
}

.wpnbha {
	margin-bottom: 1em;

	article {
		min-width: 0; // fixes column width on certain themes
		margin-bottom: 1.5em;
		word-break: break-word;
		overflow-wrap: break-word;
		position: relative;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	/* Section header */
	.article-section-title {
		font-size: variables.$font__size-sm;
		margin-bottom: 0.5em;
		width: 100%; // make sure this isn't caught up in the flex styles.

		mark {
			background-color: transparent;
		}
	}

	/* Column styles */
	&.is-grid {
		> div {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			gap: var(--wpnbha-col-gap);
			padding: 0;
			list-style: none;
		}

		article {
			flex-basis: 100%;
			margin-bottom: 0;
		}

		.article-section-title {
			margin-bottom: calc(1em - var(--wpnbha-col-gap));
		}
	}

	@include mixins.media( mobile ) {
		// width of column - ( column gap / number of columns * number of gaps )
		&.columns-3 article,
		&.columns-6 article {
			flex-basis: calc(33.33% - ( var(--wpnbha-col-gap) / 3 * 2 ) - 0.1px);
		}

		&.is-style-borders.columns-3 article,
		&.is-style-borders.columns-6 article {
			flex-basis: calc(33.33% - ( 2 * var(--wpnbha-col-gap) / 3 * 2 ) - 1.1px);
		}

		&.columns-2 article,
		&.columns-4 article,
		&.columns-5 article {
			flex-basis: calc(50% - ( var(--wpnbha-col-gap) / 2 ) - 0.1px);
		}

		&.is-style-borders.columns-2 article,
		&.is-style-borders.columns-4 article,
		&.is-style-borders.columns-5 article {
			flex-basis: calc(50% - ( 2 * var(--wpnbha-col-gap) / 2 ) - 1.1px);
		}

		&.columns-5 article:last-of-type,
		&.is-style-borders.columns-5 article:last-of-type {
			flex-basis: 100%;
		}
	}

	@include mixins.media( tablet ) {
		&.columns-4 article {
			flex-basis: calc(25% - ( var(--wpnbha-col-gap) / 4 * 3 ) - 0.1px);
		}

		&.is-style-borders.columns-4 article {
			flex-basis: calc(25% - ( 2 * var(--wpnbha-col-gap) / 4 * 3 ) - 1.1px);
		}

		&.columns-5 article,
		&.columns-5 article:last-of-type {
			flex-basis: calc(20% - ( var(--wpnbha-col-gap) / 5 * 4 ) - 0.1px);
		}

		&.is-style-borders.columns-5 article,
		&.is-style-borders.columns-5 article:last-of-type {
			flex-basis: calc(20% - ( 2 * var(--wpnbha-col-gap) / 5 * 4 ) - 1.1px);
		}

		&.columns-6 article {
			flex-basis: calc(16.6666% - ( var(--wpnbha-col-gap) / 6 * 5 ) - 0.1px);
		}

		&.is-style-borders.columns-6 article {
			flex-basis: calc(16.6666% - ( 2 * var(--wpnbha-col-gap) / 6 * 5 ) - 1.1px);
		}
	}

	/* Image styles */

	figcaption {
		font-size: variables.$font__size-xxs;
	}

	&.image-alignleft,
	&.image-alignright {
		.post-has-image {
			display: flex;

			.post-thumbnail {
				flex-basis: 33%;
			}
			.entry-wrapper {
				flex-basis: 67%;
			}
		}

		&.mobile-stack .post-has-image {
			display: block;
		}

		@include mixins.media( mobile ) {
			&.mobile-stack .post-has-image {
				display: flex;
			}
		}

		// Image scale
		@include mixins.media( mobile ) {
			&.is-4 {
				.post-thumbnail {
					flex-basis: 75%;
				}
				.entry-wrapper {
					flex-basis: 25%;
				}
			}

			&.is-3 {
				.post-thumbnail,
				.entry-wrapper {
					flex-basis: 50%;
				}
			}

			// is-2 matches the mobile default above
		}

		&.is-1 {
			.post-thumbnail {
				flex-basis: 25%;
			}
			.entry-wrapper {
				flex-basis: 75%;
			}
		}
	}

	&.image-alignleft .post-thumbnail {
		margin-right: 1em;
	}

	&.image-alignright {
		.post-thumbnail {
			margin-left: 1em;
		}

		.entry-wrapper {
			order: -1;
		}
	}

	&.mobile-stack {
		&.image-alignleft,
		&.image-alignright {
			.post-thumbnail {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}

	@include mixins.media( mobile ) {
		&.mobile-stack.image-alignleft .post-thumbnail {
			margin-right: 1em;
		}

		&.mobile-stack.image-alignright .post-thumbnail {
			margin-left: 1em;
		}
	}

	/* Headings */
	.entry-title {
		margin: 0 0 0.25em;
		a {
			color: inherit;
			text-decoration: none;
		}
	}

	.entry-meta {
		.byline:not(:last-child) {
			margin-right: 1.5em;
		}

		.updated {
			display: none;

			&.published {
				display: block;
			}
		}
	}

	.avatar {
		border-radius: 100%;
		display: block;
		margin-right: 0.5em;
	}

	&.has-text-color {
		.article-section-title,
		.entry-title,
		.entry-title a,
		.entry-title a:visited,
		.entry-meta,
		.entry-meta a,
		.entry-meta .byline a,
		.entry-meta .byline a:visited,
		.cat-links,
		.cat-links a,
		.cat-links a:visited,
		figcaption {
			color: inherit;
		}
		.entry-meta span:not(.avatar) {
			opacity: 0.8;
		}
	}

	&.image-alignbehind {
		.post-has-image {
			display: flex;
			align-items: flex-end;
			position: relative;

			.post-thumbnail {
				inset: 0;
				margin: 0;
				overflow: hidden;
				position: absolute;

				img {
					height: 100% !important;
					object-fit: cover !important;
					margin: 0 !important;
					max-width: 1000% !important;
					width: 100% !important;
				}

				&::after {
					background: rgba(np-colors.$neutral-1000, 0.5);
					content: "";
					inset: 0;
					position: absolute;
					z-index: 1;
				}
			}

			.entry-wrapper {
				padding: 2rem 1rem;
				position: relative;
				width: 100%;
				z-index: 2;

				@include mixins.media( desktop ) {
					padding: 2rem 1.5rem;
				}
			}

			.entry-wrapper,
			.entry-title a,
			.entry-meta,
			.entry-meta .byline a,
			.cat-links a {
				color: np-colors.$neutral-000;
			}
		}

		figcaption {
			bottom: 1em;
			/* autoprefixer: ignore next */
			-webkit-box-orient: vertical;
			color: rgba(np-colors.$neutral-000, 0.9);
			display: -webkit-box;
			font-style: italic;
			left: 0;
			-webkit-line-clamp: 1;
			margin: 0;
			max-height: 1.6em;
			overflow: hidden;
			padding: 0 1rem;
			position: absolute;
			right: 0;
			text-align: right;
			text-overflow: ellipsis;
			z-index: 3;

			a,
			a:visited {
				color: np-colors.$neutral-000;
			}

			@include mixins.media( desktop ) {
				padding: 0 1.5rem;
			}
		}
	}

	/* "More" button & related elements styles */
	button,
	.loading,
	.error {
		display: none;
	}

	> button {
		margin-top: 1em;
		position: relative;
	}

	&.has-more-button {
		button {
			display: block;
			height: auto;
			width: auto;
		}
	}

	&.has-more-button.is-loading {
		button {
			pointer-events: none;
		}
		.label {
			visibility: hidden;
		}
		.loading {
			display: block;
		}
	}

	.loading {
		animation: linear 900ms infinite wpnbha-loading-animation;
		border-color: currentcolor currentcolor transparent transparent;
		border-radius: 50%;
		border-style: solid;
		border-width: 1.5px;
		height: 18px;
		left: 50%;
		margin-left: -9px;
		margin-top: -9px;
		position: absolute;
		top: 50%;
		transform: rotate(0deg);
		width: 18px;
	}

	&.has-more-button.is-error {
		button,
		.error {
			display: block;
		}
	}

	// Make sure Jetpack Content Options don't affect the block.
	.posted-on,
	.cat-links,
	.tags-links,
	.byline,
	.author-avatar {
		clip: auto;
		height: auto;
		position: relative;
		width: auto;
	}

	// Ensure centre alignment when selected.
	&.has-text-align-center {
		.cat-links,
		.entry-meta,
		.entry-sponsors {
			justify-content: center;
		}

		&.image-alignbehind figcaption,
		figcaption {
			text-align: inherit;
		}
	}

	// Ensure right alignment when selected.
	&.has-text-align-right {
		.cat-links,
		.entry-meta,
		.entry-sponsors,
		.sponsor-logos {
			justify-content: flex-end;
			text-align: right;
		}

		figcaption {
			text-align: inherit;
		}

		.entry-date:not(:first-child) {
			margin-left: 1.5em;
		}

		.entry-meta .byline:not(:last-child) {
			margin: 0;
		}
	}

	/* Article meta */
	.cat-links {
		display: flex;
		flex-wrap: wrap;
		font-size: variables.$font__size-xxs;
		font-weight: bold;
		margin: 0 0 0.5em;

		&.sponsor-label {
			align-items: center;
			display: flex;
			gap: 0.5em;
		}

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.entry-sponsors {
		align-items: center;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.25em;
		width: 100%;

		&.plus-author {
			font-size: 0.9em;

			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}
	}

	.sponsor-logos {
		align-items: center;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.5em;
		line-height: 1;
	}
}

[dir="rtl"] {
	.wpnbha {
		&.has-text-align-right {
			.cat-links,
			.entry-meta,
			.entry-sponsors,
			.sponsor-logos {
				justify-content: flex-start;
			}
		}

		&.has-text-align-left {
			.cat-links,
			.entry-meta,
			.entry-sponsors,
			.sponsor-logos {
				justify-content: flex-end;
			}
		}
	}
}

/*
	Some really rough font sizing.
 */
/* stylelint-disable no-duplicate-selectors  */
.wpnbha {
	article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 1.6em;
			}
			.avatar {
				height: 40px;
				width: 40px;
			}
		}
	}

	&.ts-10,
	&.ts-9,
	&.ts-8 {
		@include mixins.media( tablet ) {
			article .avatar {
				height: 2.4em;
				width: 2.4em;
			}
		}
	}

	&.ts-10 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 3.6em;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 4.8em;
			}
		}
	}

	&.ts-9 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 3.4em;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 4.2em;
			}
		}
	}

	&.ts-8 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 3em;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 3.6em;
			}
		}
	}

	&.ts-7 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 2.4em;
			}
			.avatar {
				height: 48px;
				width: 48px;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 3em;
			}
		}
	}

	&.ts-6 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 2em;
			}
			.avatar {
				height: 44px;
				width: 44px;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 2.4em;
			}
		}
	}

	&.ts-5 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 1.8em;
			}
			.avatar {
				height: 40px;
				width: 40px;
			}
		}
		@include mixins.media( desktop ) {
			.entry-title {
				font-size: 2em;
			}
		}
	}

	/* Type Scale 4: default */

	&.ts-3 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 1.2em;
			}

			.entry-meta {
				font-size: 0.7em;
			}

			.avatar {
				height: 32px;
				width: 32px;
			}
		}
	}

	&.ts-2 article,
	&.ts-1 article {
		@include mixins.media( tablet ) {
			.entry-wrapper p,
			.entry-wrapper .more-link,
			.entry-meta,
			.newspack-post-subtitle {
				font-size: 0.7em;
			}
		}
	}

	&.ts-2 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 0.9em;
			}

			.avatar {
				height: 28px;
				width: 28px;
			}
		}
	}

	&.ts-1 article {
		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 0.7em;
			}

			.avatar {
				height: 24px;
				width: 24px;
			}
		}
	}
}
/* stylelint-enable */

/* Block styles */

.wpnbha.is-style-borders {
	article {
		border: solid rgba(np-colors.$neutral-1000, 0.2);
		border-width: 0 0 1px;
		box-sizing: content-box;
		padding-bottom: 1em;

		&:last-of-type {
			&:not(:first-of-type) {
				border-bottom: 0;
				padding-right: 0;
			}
		}
	}

	@include mixins.media( mobile ) {
		&.is-grid article {
			border-width: 0;
			padding-right: 0;
		}

		&.columns-2,
		&.columns-4,
		&.columns-5 {
			article:nth-of-type(odd):not(:last-of-type) {
				border-width: 0 1px 0 0;
				padding-right: var(--wpnbha-col-gap);
			}
		}

		&.columns-3,
		&.columns-6 {
			article {
				&:nth-of-type(3n + 1):not(:last-of-type),
				&:nth-of-type(3n + 2):not(:last-of-type) {
					border-width: 0 1px 0 0;
					padding-right: var(--wpnbha-col-gap);
				}
			}
		}
	}

	@include mixins.media( tablet ) {
		&.is-grid {
			article {
				border-width: 0 1px 0 0;
				padding-right: var(--wpnbha-col-gap);
			}
		}

		&.is-grid article:last-of-type,
		&.columns-1 article,
		&.columns-2 article:nth-of-type(2n),
		&.columns-3 article:nth-of-type(3n),
		&.columns-4 article:nth-of-type(4n),
		&.columns-5 article:nth-of-type(5n),
		&.columns-6 article:nth-of-type(6n) {
			border: 0;
			padding-right: 0 !important; // to overide the :not(:last-of-type) for .columns-5.
		}
	}
}

@keyframes wpnbha-loading-animation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
