/* 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 OF THUMB: 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 'vars_all.scss';

button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

// CLASS wc_btn_nada has all style stripped. CLASS wc_btn_link is made to look like a link.
.wc_btn {
	&_link,
	&_nada {
		background-color: transparent;
		border: 0 none;
		cursor: pointer;
		padding: 0;
		text-align: inherit;

		&[disabled] {
			color: $wc-ui-color-disabled-fg;
		}
	}

	&_nada {
		color: inherit;
	}

	&_link {
		color: $wc-ui-color-link;
		text-decoration: underline;
	}
}

[role='button'] {
	cursor: pointer;

	&[disabled],
	&[aria-disabled='true'] {
		cursor: auto;
	}
}
/* end wc.common.buttons.scss */
