/**
 * Notifications
 */
@import '@wordpress/base-styles/breakpoints';

$notification-panel-width: 450px;

#wpnc-panel {
	position: fixed;
	top: var( --masterbar-height );
	right: 0;
	bottom: 0;
	min-width: $notification-panel-width;

	@media only screen and ( max-width: 600px ) {
		width: 100%;
		min-width: 0;
	}

	.has-text-align-center {
		text-align: center;
	}

	.has-text-align-right {
		text-align: right;
	}

	.has-text-align-left {
		text-align: left;
	}

	.has-text-align-justify {
		text-align: justify;
	}

	.wpnc__h1 {
		font-size: $font-headline-small;
	}

	.wpnc__h2 {
		font-size: $font-title-large;
	}

	.wpnc__h3 {
		font-size: $font-title-medium;
	}

	.uppercase {
		text-transform: uppercase;
	}

	.has-drop-cap:not( :focus )::first-letter {
		font-weight: bold;
		line-height: 0.66;
		text-transform: uppercase;
		font-style: normal;
		float: left;
		font-size: calc( 2 * 2.25rem );
		margin: 0.05em 0.1em 0 0;
	}

	.has-drop-cap:not( :focus )::after {
		content: '';
		display: table;
		clear: both;
		padding-top: 14px;
	}

	.wpnc__sub {
		font-size: smaller;
		vertical-align: sub;
	}

	.wpnc__sup {
		font-size: smaller;
		vertical-align: super;
	}

	.wpnc__em {
		font-style: italic;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: bold;
	}

	&.wpnt-open {
		right: 0;
		transition: all 0.15s cubic-bezier( 0.075, 0.82, 0.165, 1 );
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	&.wpnt-closed {
		visibility: hidden;
		right: -$notification-panel-width;
		opacity: 0;
		pointer-events: none;
		transition: all 0.15s cubic-bezier( 0.075, 0.82, 0.165, 1 );
	}

	&.wpnc__main .wpnc__time-group-title.fixed {
		top: 85px;
	}

	&.wpnc__main .wpnc__single-view {
		left: inherit;
		width: $notification-panel-width;

		@include breakpoint-deprecated( '<800px' ) {
			left: 0;
			width: auto;
		}
	}

	@include breakpoint-deprecated( '<800px' ) {
		&.wpnc__main header {
			top: 47px;
		}
	}

	&.wpnc__main .wpnc__note {
		blockquote {
			padding: 0 24px 0 32px;
			margin: 16px 0 32px;
			border-left: 3px solid var( --color-neutral-0 );
			color: var( --color-neutral-50 );
			font-weight: 400;
			background: transparent;
		}
		ul,
		ol {
			margin-left: 1.5em;
			list-style-position: inside;
		}
		ul {
			list-style-type: disc;
			ul {
				list-style-type: circle;
				ul {
					list-style-type: square;
				}
			}
		}
		ol {
			list-style-type: decimal;
		}
		li {
			margin: auto;
		}
	}
}

#wpnc-panel.wide {
	border-left: 0;
	box-shadow: none;
}

html.touch #wpnc-panel {
	-webkit-overflow-scrolling: touch;
}

div.reader-notifications__panel {
	position: relative;

	// This flyout breakpoint is based off the notifications panel having enough width for its
	// default 'flyout' functionality for the nested level. Using a more general breakpoint would
	// prevent us from applying this functionality for another ~166px of screen width (based off of
	// using the $break-wide which is the closest larger breakpoint).
	$breakpoint-flyout: 1114px;

	--3pc-notice-external-height: 50px;
	@media only screen and ( min-width: $breakpoint-flyout ) {
		--3pc-notice-external-height: 0px; /* stylelint-disable-line length-zero-no-unit */
	}

	#wpnc-panel.wpnc__main {
		top: var( --3pc-notice-external-height );
		height: calc(
			100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
					--content-padding-bottom
				) - var( --3pc-notice-external-height )
		);
		box-shadow: -3px 1px 10px -2px color-mix( in srgb, var( --color-neutral-70 ) 7.5%, transparent );
		border-top: 1px solid var( --color-neutral-0 );
		box-sizing: border-box;

		&.wpnt-open {
			position: absolute;
			@media only screen and ( min-width: $break-small ) {
				border-radius: 8px;
				width: 100%;
				.wpnc__single-view,
				.wpnc__note-list {
					width: 100%;
				}
			}
			@media only screen and ( min-width: $breakpoint-flyout ) {
				width: calc( 100vw - var( --sidebar-width-max ) - 16px ); // 16px for content frame padding.

				.wpnc__single-view {
					width: $notification-panel-width;
					z-index: z-index(
						'.reader-notifications',
						'.wpnc__single-view'
					); // This ensures the single view flies out above the 3PC notice.
				}
				.wpnc__note-list {
					width: $notification-panel-width;
					z-index: z-index(
						'.reader-notifications',
						'.wpnc__note-list'
					); // This ensures the single view does not rise above the note list while animating outwards.
				}
			}
		}
	}
	.reader-notifications__3pc-notice {
		position: absolute;
		top: 0;
		left: 0;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px;
		font-size: $font-body;

		&-internal {
			display: none;
			bottom: 0;
			padding: 0 30px;
			right: $notification-panel-width;

			@media only screen and ( min-width: $breakpoint-flyout ) {
				display: flex;
			}
		}
		&-external {
			display: flex;
			right: 0;
			height: var( --3pc-notice-external-height );
			p {
				margin-bottom: 5px;
			}
			@media only screen and ( min-width: $breakpoint-flyout ) {
				display: none;
			}
		}
	}
}
