/* The floating web push invitation.

   It shipped with class="btn", which looks like a theme class but is not one on its own: the theme
   only ever declares .btn inside a context - .aside .btn, .wrap-search .btn - so a button in the
   footer matched nothing and rendered as a raw browser control.

   Styled as its own pill rather than by borrowing another component's class, because it is the one
   control on the site that sits over the content and has to read as dismissible rather than as a
   call to action. The script only ever touches style.display on the wrapper, so position and
   appearance are safe to own here.

   Colors come from the theme's custom properties, so light and dark keep working. */

[data-push-floating] {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 9999;
	max-width: calc(100vw - 24px);
}

[data-push-floating] .btn,
[data-push-floating] [data-push-subscribe] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--bg-border-input);
	border-radius: 24px;
	background: var(--bg-dropped-user);
	color: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-align: left;
	box-shadow: 0 4px 18px 0 rgba(23, 15, 41, 0.35);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

[data-push-floating] [data-push-subscribe]:hover {
	background: var(--bg-active);
	transform: translateY(-1px);
}

[data-push-floating] .svg-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

[data-push-floating] [data-push-label] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Blocked and unavailable are statements of fact, not offers - they lose the pointer and the lift
   so they stop looking like something worth clicking. The floating wrapper only shows the "off"
   state anyway; these matter for the same button rendered in the footer. */
[data-push-subscribe][data-push-state="denied"],
[data-push-subscribe][data-push-state="error"] {
	opacity: 0.6;
	cursor: default;
}

[data-push-subscribe][data-push-state="denied"]:hover,
[data-push-subscribe][data-push-state="error"]:hover {
	transform: none;
}

/* On a phone the pill spans the width instead of floating in a corner, where it would cover the
   player controls of a video opened in portrait. */
@media screen and (max-width: 480px) {
	[data-push-floating] {
		left: 8px;
		right: 8px;
		bottom: 8px;
		max-width: none;
	}

	[data-push-floating] [data-push-subscribe] {
		width: 100%;
		justify-content: center;
	}
}