@property --angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

body::before {
	--ray: rgb(
		from var(--accent-color) r g b / calc(var(--color-opacity-1) / 2)
	);
	--mask: radial-gradient(circle at top right, black, transparent);
	-webkit-mask-image: var(--mask);
	display: block;
	position: fixed;
	z-index: -1;
	mask-image: var(--mask);
	animation: rays 35s linear infinite;
	inset: 0;
	background: repeating-conic-gradient(
		from var(--angle) at top right,
		var(--ray) 0deg 10deg,
		transparent 10deg 20deg
	);
	content: "";

	@media (prefers-color-scheme: dark) {
		& {
			--ray: rgb(
				from var(--accent-color) r g b /
					calc(var(--color-opacity-1) / 4)
			);
		}
	}

	@keyframes rays {
		to {
			--angle: 360deg;
		}
	}
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.5rem;

	&.big {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	}

	.card {
		display: flex;
		flex-direction: column;
		box-shadow: var(--edge-highlight), var(--shadow);
		border-radius: var(--rounded-corner);
		background-color: var(--bg-muted-1);
		padding: 1rem;
		aspect-ratio: 1 / 1;

		.card-content {
			display: block;
			flex: 1;
			flex-direction: column;
			margin: 0 -1rem -1rem;
			padding: 1rem;
			overflow: auto;
			scrollbar-width: thin;

			:first-child {
				margin-block-start: 0;
			}

			:last-child {
				margin-block-end: 0;
			}
		}

		&:has(li:nth-of-type(1) input[type="radio"]:checked)
			.card-content:nth-of-type(1),
		&:has(li:nth-of-type(2) input[type="radio"]:checked)
			.card-content:nth-of-type(2) {
			display: block;
		}

		&:has(li:nth-of-type(1) input[type="radio"]:checked)
			.card-content:nth-of-type(2),
		&:has(li:nth-of-type(2) input[type="radio"]:checked)
			.card-content:nth-of-type(1) {
			display: none;
		}

		&:has(li:nth-of-type(1) input[type="radio"]:checked)
			.card-content:nth-of-type(1) {
			animation: slide-in-right var(--transition-bezier);
		}

		&:has(li:nth-of-type(2) input[type="radio"]:checked)
			.card-content:nth-of-type(2) {
			animation: slide-in-left var(--transition-bezier);
		}
	}

	.tab-switcher {
		display: flex;
		gap: 0.25rem;
		margin: 0 auto;
		margin-block-start: 1rem;
		border-radius: var(--rounded-corner);
		background-color: var(--bg-muted-1);
		padding: 0.25rem;
		width: 100%;
		list-style: none;

		li {
			display: inline-flex;
			flex: 1;
			padding: 0;
			white-space: nowrap;

			label {
				flex: 1;
				transition: var(--transition);
				cursor: pointer;
				border-radius: var(--rounded-corner-small);
				padding: 0 0.375rem;
				font-size: var(--font-size-small);
				user-select: none;
				text-align: center;
				-webkit-user-select: none;
				line-height: 1.5rem;

				&:hover {
					box-shadow: var(--edge-highlight);
					background-color: var(--bg-muted-1);
				}
			}

			input[type="radio"] {
				&:focus-visible + label {
					animation: focus-in var(--transition);
					outline: 0.125rem solid var(--accent-color);
					outline-offset: 0.125rem;
				}

				@supports not selector(:focus-visible) {
					&:focus + label {
						animation: focus-in var(--transition);
						outline: 0.125rem solid var(--accent-color);
						outline-offset: 0.125rem;
					}
				}

				&:checked + label {
					box-shadow: var(--shadow);
					background-color: white;
					color: rgb(0 0 0 / 0.8);
					font-weight: var(--font-weight-semi-bold);
				}
			}
		}
	}

	.buttons {
		margin-block-start: 0;
	}
}

.fancy-list ul li {
	strong {
		display: inline-block;
		margin-block-end: 0.5rem;
	}
}
