.wl-pageInfoWidget {
	position: relative;
	background-color: white;
	color: #000;

	&.wl-dark {
		background-color: #000;
		color: #fff;

		.wl-pageInfoWidget-view-fader {
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
			background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		}

		&.wl-pageInfoWidget-wikipedia .wl-pageInfoWidget-box-text .wl-pageInfoWidget-view-logo {
			.wl-wikipedia-logo( auto 20px, 0, 0, fff );
		}

	}

	&-view-title {
		font-size: 1.5em;
		font-weight: bold;
	}

	&-content-pending,
	&-content-error {
		padding: 1em;
	}

	&-content-ready {
		display: flex;

		a {
			// Override all other definitions
			text-decoration: none !important;
		}

		.wl-pageInfoWidget-box {
			&-text {
				position: relative;
				padding: 1em 1em 0.5em 1em;

				.wl-pageInfoWidget-noimage & {
					padding: 1em;
				}

				.wl-pageInfoWidget-view-logo {
					margin-bottom: 0.5em;

					.wl-pageInfoWidget-wikipedia & {
						.wl-wikipedia-logo( auto 20px, 0, 0 );
					}

					// Non-wikipedia logo
					.wl-pageInfoWidget-externalwiki.wl-pageInfoWidget-customlogo & {
						img {
							max-height: 50px;
						}
					}
				}

			}
		}
	}

	.wl-pageInfoWidget-view {
		&-content {
			position: relative;
			overflow-y: hidden;
			max-height: 200px;
			min-height: 100px;

			p {
				margin-top: 0.4em;
				margin-bottom: 0;
			}
		}

		&-link {
			direction: ltr;
			display: block;
			margin-bottom: 0.5em;
			color: #3c68cc;
			font-weight: bold;
			.wl-icon-arrow-left( '3c68cc' );
		}

		&-articleHistory {
			direction: ltr;
			display: block;
			margin-bottom: 0.5em;
			color: #3c68cc;
			font-weight: bold;
			.wl-icon-history( '3c68cc' );
		}

		&-copyrightLink {
			direction: ltr;
			display: block;
			font-size: 0.8em;

			&,
			&:hover,
			&:visited {
				color: #666;
			}
		}

		&-fader {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 5em;
			width: 100%;
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
			background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		}

		&-thumb {
			position: relative;

			&-fader {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 50px;
				width: 100%;
				background: rgb(0,0,0);
				background: -moz-linear-gradient(0deg, rgba(0,0,0,0.6965161064425771) 0%, rgba(0,0,0,0) 100%);
				background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6965161064425771) 0%, rgba(0,0,0,0) 100%);
				background: linear-gradient(0deg, rgba(0,0,0,0.6965161064425771) 0%, rgba(0,0,0,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
			}
		}
	}

	&-creditbar {
		position: absolute;
		bottom: 0;
		right: 0;
		color: #fff;
		min-width: 200px;

		[dir="rtl"] & {
			right: auto;
			left: 0;
		}

		.wl-pageInfoWidget-noimage & {
			color: #3c68cc;
		}

		&-actions {
			display: flex;
			justify-content: flex-end;
			padding: 0.5em;

			& div:not(:first-child) {
				margin-left: 1em;

				[dir="rtl"] & {
					margin-left: 0;
					margin-right: 1em;
				}
			}

			a,
			a:hover,
			a:visited {
				color: white;
				text-decoration: none;
				font-weight: bolder;
				border-bottom: 1px solid #fff;


				.wl-pageInfoWidget-noimage & {
					color: #3c68cc;
				}
			}

		}
	}

	&-state {
		&-pending {
			.wl-pageInfoWidget-creditbar,
			.wl-pageInfoWidget-content-error,
			.wl-pageInfoWidget-content-ready {
				display: none;
			}
		}

		&-error {
			.wl-pageInfoWidget-creditbar,
			.wl-pageInfoWidget-content-pending,
			.wl-pageInfoWidget-content-ready {
				display: none;
			}
		}

		&-ready {
			.wl-pageInfoWidget-content-pending,
			.wl-pageInfoWidget-content-error {
				display: none;
			}
		}
	}
}
