/* wc.common.buttons.scss */
// Buttons are not artifacts of any particular WComponent but are output by XSLT for any WComponent which requires
// client side action other than navigation.

// RULE: links are for navigation, buttons are for action.

// We use button of type submit rather than input of type submit to create form submission controls. This is to divorce
// value from the visible text but is also more convenient for styling.
// We have two styles for buttons which are not to appear like buttons:
//  * [wc-linkbutton] make the button look like a link
//  * [wc-nobutton] give the button no style at all

// Why would we use a button which looks like a link? Why not just use a link?
// Well, links are for linking (navigation) these link-like buttons are for undertaking non-navigation behaviour. Using
// links to provide non-link behaviour is a vestige of poor development practices in the past and an inability to
// adequately style buttons in older browsers. Neither reason is sufficient to maintain this practice.

// Having a button which is styled to emulate a link is to provide UI consistency in areas where buttons and links are
// mixed. It may be more appropriate to not have a button which disguises itself as a link but to use the noStyle
// variant.
@import 'mixins-common';
@import 'btn-common';
@import 'btn-nada';
@import 'btn-link';
@import 'btn-icon';

@if ($wc-button-rationalise-text-styles != 1) {
	.wc-linkbutton,
	.wc-nobutton {
		@extend %button-like-text;
	}
}

// A button stripped of its button nature.
.wc-nobutton {
	@extend %wc-nobutton;
}

// A button disguised as a link. These will normally also have the class wc-nobutton.
.wc-linkbutton {
	@extend %wc-linkbutton;
}

// A common class for buttons which only contain icons.
.wc_btn_icon {
	@extend %wc_btn_icon;
}


/// Components which are not button elements but act as buttons. This is _very_ rare and is currently limited to
/// summary elements in browsers which do not provide native details/summary behaviour.
[role='button'] {
	cursor: pointer;

	&[disabled],
	&[aria-disabled='true'] {
		cursor: auto;
	}
}

/// User agent button styles are the bane of our lives. The _main_ problem is hard coded font styles rather than
/// allowing them to inherit.
@import 'invite';

button {
	@include margin($size: 0);
	@if ($wc-button-rationalise-text-styles == 1) {
		@extend %button-like-text;
	}

	@if($wc-button-use-invite == 1) {
		@extend %wc-invite;
		@include button($background: -1, $text-align: ''); // this prevents the border flicker on hover/focus.
	}

	&[disabled] {
		@include aria-disabled;
	}
}
