//----------------------------------------------------------------------------------------------------------------------
// GHOST BUTTONS
//
// Requires _buttons.sass
// Ghost buttons have a transparent background and a border around them. They typically represent secondary actions.
//----------------------------------------------------------------------------------------------------------------------

/// Ghost buttons.
/// @group components
.button.ghost {
	@include border-padding($button-border-width, rhythm(1 2));
	color: $color-base;
	border: $button-border-width $button-border-style $color-base;
	background: none;

	// Compact ("small") button
	&.compact {
		@include border-padding($button-border-width, rhythm(0.5 1));
	}

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

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

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

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