:root {
	--mt-notice-error-bg: #7f1d1d;
	--mt-notice-error-border: #5f1515;
	--mt-notice-success-bg: #166534;
	--mt-notice-success-border: #14532d;
	--mt-notice-warning-bg: #854d0e;
	--mt-notice-warning-border: #713f12;
	--mt-notice-info-bg: #1e3a8a;
	--mt-notice-info-border: #172554;
}

.mt-notice-stack[hidden] {
	display: none !important;
}

.mt-notice-stack {
	position: fixed;
	inset-block-start: max(var(--mt-notice-top, 5rem), calc(env(safe-area-inset-top, 0px) + 12px));
	inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
	z-index: 10000000;
	display: grid;
	width: min(30rem, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
	max-height: min(
		60dvh,
		calc(
			100dvh - var(--mt-notice-top, calc(5rem + env(safe-area-inset-top, 0px))) -
				env(safe-area-inset-bottom, 0px) - 24px
		)
	);
	gap: 0.65rem;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 0 4px;
	pointer-events: none;
}

.mt-notice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	border: 1px solid transparent;
	border-radius: 0.65rem;
	padding: 0.45rem;
	box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	pointer-events: auto;
}

.mt-notice--error {
	border-color: var(--mt-notice-error-border);
	background: var(--mt-notice-error-bg);
	color: #fff;
}

.mt-notice--success {
	border-color: var(--mt-notice-success-border);
	background: var(--mt-notice-success-bg);
	color: #fff;
}

.mt-notice--warning {
	border-color: var(--mt-notice-warning-border);
	background: var(--mt-notice-warning-bg);
	color: #fff;
}

.mt-notice--info {
	border-color: var(--mt-notice-info-border);
	background: var(--mt-notice-info-bg);
	color: #fff;
}

.mt-notice--has-action {
	grid-template-columns: minmax(0, 1fr) auto 44px;
}

.mt-notice__message {
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.45rem 0.25rem 0.45rem 0.5rem;
}

.mt-notice__dismiss {
	display: grid;
	place-items: center;
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: 0.35rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 1.35rem;
	line-height: 1;
}

.mt-notice__dismiss:hover {
	border-color: rgb(255 255 255 / 48%);
	background: rgb(255 255 255 / 13%);
}

.mt-notice__dismiss:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.mt-notice__action {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgb(255 255 255 / 58%);
	border-radius: 0.35rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.mt-notice__action:hover {
	background: rgb(255 255 255 / 13%);
}

.mt-notice__action:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.mt-notice-stack {
		inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
		inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
		width: auto;
		max-height: min(
			60dvh,
			calc(
				100dvh - var(--mt-notice-top, calc(5rem + env(safe-area-inset-top, 0px))) -
					env(safe-area-inset-bottom, 0px) - 24px
			)
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-notice,
	.mt-notice__dismiss {
		transition: none;
	}
}