//----------------------------------------------------------------------------------------------------------------------
// FLAT BUTTONS
//
// Requires _buttons.sass
// Flat buttons typically do not have a background and border and represent tertiary actions.
//----------------------------------------------------------------------------------------------------------------------

/// Flat buttons.
/// @group components
.button.flat {
	color: $color-base;
	background: none;

	// Colors
	@include color-variants {
		color: $color;
	}

	&.muted, &[disabled] {
		color: $color-muted;
		background: none !important;
	}

	// States
	&:hover {
		color: pitch($color-base, 20);
		background: rgba($color-base, 0.1);

		@include color-variants {
			color: pitch($color, 20);
			background: rgba($color, 0.1);
		}
	}
}