Use of Sass @extend causing unexpected selector specificity when customizing CSS

[iBug]

This is the offending code I've tracked down:

minimal-mistakes/_sass/minimal-mistakes/_forms.scss

Lines 391 to 393 in c501842

	#goog-wm-sb {
	@extend .btn;
	}

I tried to override non-button <a> element styles like this:

.page__content a:not(.btn) {}

However, the use of Sass @extend in the theme code causes Sass to generate the following CSS:

.page__content a:not(.btn):not(#goog-wm-sb) {}
/* Oh yeah... */

The problem here is, the generated :not(#goog-wm-sb) makes the specificity of the selector higher than expected, as it has one ID selector. This makes overriding any styles difficult without !important because a "superceding" selector also needs an ID selector now.

Can we somehow rearrange this rule so it doesn't use .btn as aggressively? Using %btn is one (good) way I can think of, as we don't have too many bare .btns to deal with.

[mmistakes]

#goog-wm-sb styles should be removed. As they were part of Google's search field that was used on the 404 sample page... which was deprecated.

[mmistakes]

In fact all of these styles can probably go as G killed off the feature. No sense in shipping unused CSS.

minimal-mistakes/_sass/minimal-mistakes/_forms.scss

Lines 361 to 393 in c501842

	/*
	Google search form
	========================================================================== */
	#goog-fixurl {
	ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
	list-style-type: none;
	}
	}
	}
	#goog-wm-qt {
	width: auto;
	margin-right: 10px;
	margin-bottom: 20px;
	padding: 8px 20px;
	display: inline-block;
	font-size: $type-size-6;
	background-color: #fff;
	color: #000;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: $border-color;
	border-radius: $border-radius;
	}
	#goog-wm-sb {
	@extend .btn;
	}

[iBug]

@mmistakes Mind adding me as a collaborator so I can help sort out issues and PRs? I check GitHub multiple times every day and can respond quickly.