@import 'color';
@import 'button';

// Flat button
@mixin button--flat($color: 'black', $dark: false) {
	@include button;

	color: color($color, '500');

	&:hover, &:active {
		background-color: if($dark, rgba(#ccc, 0.15), rgba(#999, 0.20));
	}

	&:active {
		background-color: if($dark, rgba(#ccc, 0.25), rgba(#999, 0.40));
	}

	&[disabled] {
		$accent: if($dark == true, 'dark', 'light');
		color: color('disabled', 'foreground--#{$accent}');
	}
}

@import 'color';
@import 'button';

// Flat button
@mixin button--flat($color: 'black', $dark: false) {
	@include button;

	color: color($color, '500');
	background-color: transparent;

	&:hover, &:focus {
		background-color: if($dark, rgba(#ccc, 0.15), rgba(#999, 0.20));
	}

	&:active {
		background-color: if($dark, rgba(#ccc, 0.25), rgba(#999, 0.40));
	}

	&[disabled] {
		cursor: default;
		$accent: if($dark == true, 'dark', 'light');
		color: color('disabled', 'foreground--#{$accent}');
		&:hover, &:focus, &:active {
			background-color: transparent;
		}
	}
}

Fix disabled styles on button-flat
Fix disabled styles on button-flat
