@import "minerva.variables";
@import "minerva.mixins";
@import "mediawiki.mixins";

@smallIconSize: 24px;
@largeIconSize: 50px;

.mw-mf-cleanup {
	display: inline-block;
	padding: 10px 15px 10px (@smallIconSize + 20px);
	margin-bottom: 4px;
}

.alpha,
.beta {
	.mw-mf-cleanup {
		margin: 0;
		padding: 0;
		font-size: 0.8em;
		color: @colorGray7;
	}
}

// FIXME: remove when mw-ui-icon in stable
.stable {
	.mw-mf-cleanup {
		.background-image-svg-quick( 'images/issues/blue-triangle' );
		background-position: 10px center left;
	}

	.overlay {
		.cleanup {
			li {
				.issue-notice {
					.background-image-svg-quick( 'images/issues/gray-triangle' );
					background-position: center @smallIconSize;
				}
			}
		}
	}
}

// overlay styles
.overlay {
	.cleanup {
		li {
			border-bottom: solid 1px @grayLight;
			.issue-notice {
				padding: (@smallIconSize * 2.5) @contentMargin @smallIconSize @contentMargin;

				// on mobile move the icon above the content
				&:before {
					top: @smallIconSize;
					left: 50%;
					position: absolute;
					height: auto;
				}
			}
		}
	}
}

@media all and (min-width: @wgMFDeviceWidthTablet) {
	.overlay {
		.cleanup {
			li {
				.issue-notice {
					padding: 2em 1em 2em (@largeIconSize + 10px);
					margin: 0 1em 0 @headerHeight;
					// FIXME: Remove when mw-ui-icon in stable
					&.icon {
						.background-size( @largeIconSize, @largeIconSize );
						 background-position: left center;
					}

					&:before {
						top: 0;
						left: 0;
						height: 100%;
						width: @largeIconSize;
					}
				}
			}
		}
	}
}