/* MagicKit - Notice Box */
.mk-notice {
	--mk-notice: #2563eb;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: color-mix(in srgb, var(--mk-notice) 9%, transparent);
	color: var(--mk-dark);
}

.mk-notice--success { --mk-notice: #16a34a; }
.mk-notice--warning { --mk-notice: #d97706; }
.mk-notice--danger { --mk-notice: #dc2626; }
.mk-notice--tip { --mk-notice: #7b2ff7; }
.mk-notice--note { --mk-notice: #475569; }

.mk-notice__icon {
	flex: 0 0 24px;
	color: var(--mk-notice);
	font-size: 22px;
	line-height: 1;
}

.mk-notice__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.mk-notice__body {
	flex: 1;
	min-width: 0;
}

.mk-notice__title {
	display: block;
	margin-bottom: 4px;
	color: var(--mk-notice);
	font-size: 16px;
}

.mk-notice__content > :last-child {
	margin-bottom: 0;
}

.mk-notice__close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--mk-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mk-notice.is-dismissed {
	display: none;
}

.mk-notice-skin-border .mk-notice {
	border-left: 4px solid var(--mk-notice);
	border-radius: 4px 14px 14px 4px;
}

.mk-notice-skin-solid .mk-notice {
	background: var(--mk-notice);
	color: #fff;
}

.mk-notice-skin-solid .mk-notice__icon,
.mk-notice-skin-solid .mk-notice__title,
.mk-notice-skin-solid .mk-notice__close {
	color: #fff;
}

.mk-notice-skin-outline .mk-notice {
	border-color: var(--mk-notice);
	background: transparent;
}