/* 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_btn_link] make the button look like a link
//  * [wc_btn_nada] 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';

/// User agent button styles are the bane of our lives. The _main_ problem is hard coded font styles rather than
/// allowing them to inherit.
button {
	@include margin($size: 0);
	// Uncomment the following to inherit text styles. This will improve consistency across platforms.
	// If you add this you can remove the specific rule for ec_btn_link & wc_btn_nada below.
	// @extend %button-like-text;
}

@import 'btn-nada';
@import 'btn-link';
@import 'btn-icon';

.wc_btn_link,
.wc_btn_nada {
	@extend %button-like-text;
}

// A button stripped of its button nature.
.wc_btn_nada {
	@extend %wc_btn_nada;
}

// A button disguised as a link. These will normally also have the class wc_btn_nada.
.wc_btn_link {
	@extend %wc_btn_link;
}

// 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;
	}
}
