// Use :is to give the sub-selectors 0 specificity, allowing the whole thing to be
// overridden by anything with element-selector specificity or higher
// https://css-tricks.com/using-the-specificity-of-where-as-a-css-reset/
:is(
	// skip React Button element
	button:where(:not(.btn, [type=checkbox], [type=radio])),
	input:where([type=button], [type=submit])
) {
	@include windows-form-element;

	padding: 4px 11px 6px 11px;

	&[default] {
		color: var(--accent-white);

		&:not([disabled]) {
			--color-form-element-background: var(--accent-blue);

			&:hover {
				--color-form-element-background: rgba(64, 114, 229, 0.9);
			}

			&:active {
				--color-form-element-background: rgba(64, 114, 229, 0.8);
			}

			@include focus-ring;
		}

		&[disabled] {
			@include light-dark(--color-form-element-background, var(--fill-tertiary), var(--fill-quaternary));
			--color-form-element-border: linear-gradient(transparent, transparent);
		}
	}
}
