/**
 * Dismissible Notices.
 */
.notice.tsf-notice {
	position: relative;
	padding-inline-end: 38px;
	clear: both;
}

.tsf-notice.tsf-show-icon p:before {
	content: '';
	margin-inline-end: 12px;
	background: 0 0;
	display: inline-block;
	font: 400 14px/16px dashicons;
	speak: none;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	width: 16px;
	line-height: 14px;
	-webkit-font-smoothing: antialiased;
}

.error.tsf-notice.tsf-show-icon p:before {
	color: #d63638;
	content: "\f534";
}

.notice-warning.tsf-notice.tsf-show-icon p:before {
	color: #dba617;
	content: "\f227";
}

.notice-info.tsf-notice.tsf-show-icon p:before {
	color: #67a8e4;
	font-size: 16px;
	content: "\f223";
}

.updated.tsf-notice.tsf-show-icon p:before {
	color: #00a32a;
	font-size: 16px;
	content: "\f147";
}

/* Specific because common.css overrides via `.updated a` */
.tsf-notice .tsf-dismiss {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	border: none;
	margin: 0;
	padding: 10px;
	background: 0 0;
	color: #787c82;
	cursor: pointer;
	text-decoration: none;
}

.tsf-dismiss:hover {
	color: #d63638;
}

.tsf-dismiss:focus {
	outline: none;
	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba( 30, 140, 190, .8);
}

.tsf-dismiss:before {
	background: 0 0;
	color: currentColor;
	content: "\f153";
	display: block;
	font: normal 16px/20px dashicons;
	speak: never;
	height: 20px;
	text-align: center;
	width: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and ( max-width: 782px ) {
	.notice.tsf-notice,
	.wp-core-ui .notice.tsf-notice {
		padding-inline-end: 46px;
	}
}

@keyframes tsf-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes tsf-fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}