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

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

.mw-mf-cleanup {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: .8em;
	color: @colorGray7;
}

// 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: Please remove this. It should not care about how icons are rendered.
					&:before {
						top: 0;
						left: 0;
						height: 100%;
						width: @largeIconSize;
					}
				}
			}
		}
	}
}