@mixin firefox-only {
	@at-root {
		@-moz-document url-prefix("") {
			& {
				@content;
			}
		}
	}
}

.alert {
	position: relative;
	font-family: var(--text-font);
	font-weight: 800;
	letter-spacing: 0.02em;
	display: grid;
	gap: 0 2rem;
	grid-template-columns: 1fr auto;
	margin-bottom: 0.5rem;
	margin-block-end: 0.5rem;
	font-size: 0.875rem;
	border: 1px solid currentColor;
	border-radius: var(--border-radius);

	@include firefox-only {
		font-weight: 500;
	}

	&.alert--error {
		background-color: var(--color-rose-25);
		color: var(--color-rose-700);

		.alert__fix-options__item:hover {
			background-color: var(--color-rose-50);
			color: var(--color-rose-700);
		}
	}

	&.alert--warning {
		background-color: var(--color-warning-25);
		color: var(--color-warning-600);

		.alert__fix-options__item:hover {
			background-color: var(--color-warning-50);
			color: var(--color-warning-700);
		}
	}

	a {
		color: inherit;
	}
}

[data-theme="dark"] {
	.alert {
		&.alert--error {
			background-color: var(--color-rose-900);
			color: var(--color-rose-300);

			.alert__fix-options__item:hover {
				background-color: var(--color-rose-800);
				color: var(--color-rose-200);
			}
		}

		&.alert--warning {
			background-color: var(--color-warning-900);
			color: var(--color-warning-400);

			.alert__fix-options__item:hover {
				background-color: var(--color-warning-800);
				color: var(--color-warning-200);
			}
		}
	}
}

.alert__content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 1;
	padding: 0.5rem;

	a {
		color: var(--link-color);
	}
}

.alert__position {
	display: flex;
	align-items: center;
	margin-right: 1rem;
	margin-inline-end: 1rem;
}

.alert__icon {
	color: inherit;
	position: relative;
	margin-right: 0.75rem;
	margin-inline-end: 0.75rem;
	margin-top: -4px;
}

.alert__actions {
	display: flex;
}

.alert__line-number {
	font-weight: 500;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid currentColor;
	padding: 0;

	.alert--error & {
		color: var(--color-rose-700);

		[data-theme="dark"] & {
			color: var(--color-rose-200);
		}
	}

	.alert--warning & {
		color: var(--color-warning-700);

		[data-theme="dark"] & {
			color: var(--color-warning-200);
		}
	}
}

.alert__fix-btn {
	display: flex;
	align-items: center;
	font-family: var(--text-font);
	padding: 0.5rem 0.75rem;
	margin: 0;
	font-weight: 500;
	gap: 0.75rem;
	min-width: 6rem;

	&:last-child {
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	&:last-child[aria-expanded="true"] {
		border-radius: 0 var(--border-radius) 0 0;
	}

	.alert--error & {
		border-left: 1px solid var(--color-rose-300);
		border-inline-start: 1px solid var(--color-rose-300);
		color: var(--color-rose-700);
		background-color: var(--color-rose-100);

		[data-theme="dark"] & {
			color: var(--color-rose-200);
			border-left: 1px solid var(--color-rose-300);
			border-inline-start: 1px solid var(--color-rose-300);
			background-color: var(--color-rose-900);
		}
	}

	.alert--error &:hover {
		color: var(--color-rose-800);
		background-color: var(--color-rose-200);

		[data-theme="dark"] & {
			color: var(--color-rose-100);
			background-color: var(--color-rose-800);
		}
	}

	.alert--warning & {
		color: var(--color-warning-700);
		border-left: 1px solid var(--color-warning-300);
		border-inline-start: 1px solid var(--color-warning-300);
		background-color: var(--color-warning-100);

		[data-theme="dark"] & {
			color: var(--color-warning-200);
			border-left: 1px solid var(--color-warning-300);
			border-inline-start: 1px solid var(--color-warning-300);
			background-color: var(--color-warning-800);
		}
	}

	.alert--warning &:hover {
		color: var(--color-warning-800);
		background-color: var(--color-warning-200);

		[data-theme="dark"] & {
			color: var(--color-warning-100);
			background-color: var(--color-warning-800);
		}
	}
}

.alert__fix-options {
	grid-column: 1 / -1;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	border-top: inherit;
	border-block-start: inherit;

	@media all and (min-width: 800px) {
		display: flex;
	}
}

.alert__fix-options__item {
	padding: 0.75rem;
	margin: 0;
	flex: 1 0 min-content;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-bottom: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transition: background-color 0.1s linear;

	&:last-of-type {
		border: none;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}

	@media all and (min-width: 800px) {
		border: none;
		border-right: 1px solid currentColor;
		border-inline-end: 1px solid currentColor;

		&:first-of-type {
			border-radius: 0 0 0 var(--border-radius);
		}

		&:last-of-type {
			border: none;
			border-radius: 0 0 var(--border-radius) 0;
		}
	}
}
