muddle/modules/amezing/sass/components/_article-list.scss

@use "../citrine/abstracts/functions" as *;
@use "../citrine/abstracts/variables" as *;
@use "../citrine/abstracts/mixins" as *;

.article-list {
	display: grid;
	grid-template-columns: repeat(
			auto-fill,
			minmax(calc(var(--content-width) / 2.5), 1fr)
		);
	gap: 1rem;
	margin-block-start: 2rem;

	&.categories article {
		position: relative;

		&:hover .icon:last-child {
			transform: translateY(-50%) rotate(-10deg) scale(1.5);
		}

		.icon:last-child {
			position: absolute;
			transform: translateY(-50%);
			z-index: -1;
			transition: transform var(--transition-bezier);
			inset-block-start: 50%;
			inset-inline-end: -3rem;
			color: var(--bg-muted-1);
			font-size: 12rem;
		}
	}

	article {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: var(--edge-highlight), var(--shadow);
		border-radius: 1.25rem;
		background-color: var(--bg-muted-1);
		padding: 0;
		overflow: hidden;

		&.draft {
			opacity: var(--disabled-opacity);
			filter: grayscale(1);
			transition-duration: var(--transition);
			transition-property: opacity, filter;

			&:hover {
				opacity: 1;
				filter: none;
			}
		}

		&.has-banner.has-accent-color {
			background-image: var(--bg-overlay), var(--blurnail);
			background-position: center;
			background-size: cover;
		}

		&.has-accent-color {
			@include variables-accent(("light", "common"));

			@media (prefers-color-scheme: dark) {
				& {
					@include variables-accent("dark");
				}
			}
		}

		& > div {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin: 1rem;

			& > a {
				text-decoration: none;
			}
		}

		h3 {
			margin: 0;
			border-inline-start: 0.25rem solid;
			border-start-start-radius: 0.25rem;
			border-end-start-radius: 0.25rem;
			padding-inline-start: 0.5rem;
			color: var(--accent-color);
			font-weight: var(--font-weight-semi-bold);
			text-decoration: none;

			&:hover::after {
				opacity: 1;
			}

			&::after {
				opacity: 0;
				transition: opacity var(--transition);
				content: " →";
			}
		}

		.description p {
			margin-block-end: 0.75rem;
		}

		.open-post {
			@include easing-mask(bottom);
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-block-end: -2rem;
			box-shadow: var(--edge-highlight);
			border-radius: 0;
			aspect-ratio: 2 / 1;
			overflow: hidden;
			text-decoration: none;

			&:hover {
				&::before {
					background-color: var(--shade-color);
				}

				img {
					transform: var(--hover);
					filter: blur(0.25rem);
				}

				.icon {
					transform: none;
					opacity: 1;
				}
			}

			&:active img {
				transform: none;
			}

			&::before {
				position: absolute;
				z-index: 1;
				transition: background-color var(--transition);
				inset: 0;
				border-radius: inherit;
				content: "";
			}

			img {
				position: absolute;
				transition-duration: var(--transition);
				transition-property: transform, filter;
				margin: 0;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.icon {
				transform: scale(1.5);
				opacity: 0;
				z-index: 1;
				transition:
					transform var(--transition-bezier),
					opacity var(--transition);
				color: white;
				font-size: 1.25rem;
			}
		}

		.article-details {
			flex: 1;
			justify-content: flex-end;
			margin-block-end: 0;

			.tags {
				margin-block-start: auto;
				margin-block-end: -0.25rem;
			}
		}
	}
}

.paginator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: 4rem;

	&:has(a.paginator-item.previous:active) .paginator-counter {
		border-start-start-radius: 1rem;
		border-end-start-radius: 1rem;
	}

	&:has(a.paginator-item.next:active) .paginator-counter {
		border-start-end-radius: 1rem;
		border-end-end-radius: 1rem;
	}

	&-item {
		display: inline-block;
		transition:
			border-radius var(--transition),
			border-start-end-radius var(--transition),
			border-end-end-radius var(--transition),
			border-start-start-radius var(--transition),
			border-end-start-radius var(--transition),
			background-color var(--transition),
			transform var(--transition-bezier);
		box-shadow: var(--edge-highlight);
		border-radius: 1rem;
		background-color: var(--bg-muted-1);
		padding: 0.5rem;
		color: var(--accent-color);
		line-height: 0;
		text-decoration: none;

		&:not([aria-disabled="true"]):hover {
			background-color: var(--bg-muted-2);
		}

		&:not([aria-disabled="true"]):active {
			transform: var(--active);
			border-radius: 1rem;
		}

		&-previous {
			border-start-end-radius: var(--rounded-corner-small);
			border-end-end-radius: var(--rounded-corner-small);
		}

		&-next {
			border-start-start-radius: var(--rounded-corner-small);
			border-end-start-radius: var(--rounded-corner-small);
		}
	}

	&-counter {
		@include gradient-fill;
		display: inline-block;
		transition: var(--transition-bezier);
		transition-property:
			border-start-start-radius,
			border-end-start-radius,
			border-start-end-radius,
			border-end-end-radius;
		border-radius: var(--rounded-corner-small);
		background-color: var(--bg-muted-1);
		padding: 0.25rem 0.5rem;
		font-weight: var(--font-weight-semi-bold);
		font-variant-numeric: tabular-nums;
	}
}