/*!
 * DLE Notifier - browser notification button
 *
 * Положение: прижата к левому или правому краю экрана и стоит
 * над кнопкой «вверх» (div#gotop темы) с зазором около 25px.
 *
 * Оформление повторяет тему: тёмный корпус, зелёный люминофорный
 * акцент и свечение. Используются переменные темы --osd / --osd-dim
 * / --red с запасными значениями, поэтому на других темах кнопка
 * остаётся работоспособной.
 */

.nf-wrap {
	position: fixed;
	bottom: 85px;
	z-index: 99999;
	line-height: 0;
}

.nf-right { right: 14px; }
.nf-left  { left: 14px;  }

.nf-btn {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--osd-dim, #2c8a58);
	border-radius: 50%;
	background: #0d1214;
	color: var(--osd, #6dffa8);
	font-size: 20px;
	cursor: pointer;
	line-height: 44px;
	text-align: center;
	box-shadow: 0 0 16px rgba(109, 255, 168, .28);
	transition: background .15s ease, color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.nf-btn:hover {
	background: var(--osd, #6dffa8);
	color: #06120b;
}

.nf-btn:focus-visible {
	outline: 2px solid var(--osd, #6dffa8);
	outline-offset: 2px;
}

.nf-btn svg {
	vertical-align: middle;
	display: inline-block;
	width: 20px;
	height: 20px;

	/* Покачивание как у подвешенного колокольчика: точка подвеса сверху */
	transform-origin: 50% 8%;
	animation: nf-sway 7s ease-in-out infinite;
}

/* Мягкое покачивание в покое: почти всё время ровно, лёгкие колебания */
@keyframes nf-sway {

	0%   { transform: rotate(0deg); }
	55%  { transform: rotate(0deg); }
	60%  { transform: rotate(-7deg); }
	65%  { transform: rotate(6deg); }
	70%  { transform: rotate(-5deg); }
	75%  { transform: rotate(4deg); }
	80%  { transform: rotate(-2deg); }
	85%  { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }

}

/* Покачивание приходит к кнопке: заметнее и с подсветкой */
.nf-attn .nf-btn {
	animation: nf-glow 4.2s ease-in-out;
}

.nf-attn .nf-btn svg {
	animation: nf-sway-attn 1.4s ease-in-out 3;
}

@keyframes nf-sway-attn {

	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-15deg); }
	50%  { transform: rotate(13deg); }
	75%  { transform: rotate(-9deg); }
	100% { transform: rotate(0deg); }

}

@keyframes nf-glow {

	0%   { box-shadow: 0 0 16px rgba(109, 255, 168, .28); }
	20%  { box-shadow: 0 0 22px var(--osd, #6dffa8); }
	100% { box-shadow: 0 0 16px rgba(109, 255, 168, .28); }

}

/* Счётчик невычитанных новостей */
.nf-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--red, #ff4a35);
	color: #fff;
	font: 700 11px/20px Arial, Helvetica, sans-serif;
	text-align: center;
	box-shadow: 0 0 8px rgba(255, 74, 53, .5);
}

.nf-badge[hidden] { display: none; }

/* На телефонах чуть ближе к краю */
@media screen and (max-width: 600px) {

	.nf-right { right: 12px; }
	.nf-left  { left: 12px;  }

}

/* Уважаем системную настройку об уменьшении анимации */
@media (prefers-reduced-motion: reduce) {

	.nf-btn { transition: none; }

	.nf-btn svg,
	.nf-attn .nf-btn svg { animation: none; }

	.nf-attn .nf-btn { animation: none; }

}