/* 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';

/// 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 {
	@if ($wc-button-rationalise-text-styles == 1) {
		@include button-like-text;
	}

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

	margin: 0;

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

// common styles for a button which inherits fonts.
@mixin expose-plain-button {
	@if ($wc-button-rationalise-text-styles != 1) {
		@include button-like-text;
	}
	cursor: pointer;
}

// .wc-nobutton is a button stripped of its button nature.
// .wc-linkbutton is a button pretending to be a link.
.wc-linkbutton,
.wc-nobutton {
	@include expose-plain-button;
	@include button($border: 0, $padding: 0, $text-align: inherit);
}

.wc-nobutton {
	color: inherit;
}

.wc-linkbutton {
	color: $wc-ui-color-link;
	text-decoration: underline;

	// class wc_nti (no text image) is applied to buttons and links which hold an image but no visible text.
	&.wc_nti {
		text-decoration: none;
	}
}

// A common class for buttons which only contain icons.
// This is for framework use only so _may_ be changed without notice!
.wc_btn_icon {
	@include expose-plain-button;
	@include button; // To use regular platform buttons: ($background: -1, $border: false);
	@include content-box;
	@if($wc-button-use-invite != 1) {
		@include wc-invite;
	}
	color: inherit;
	overflow: hidden;
	width: $wc-icon-normal;

	&:before {
		@include wc-icon-fw;
	}
}

// ########## Unused (in framework) convenience classes ##########
@if ($wc-button-include-helper-classes == 1) {
	@if ($wc-button-rationalise-text-styles != 1) {
		// a button with inherited font metrics
		.wc-textbutton {
			@include button-like-text;
		}
	}

	// a button with a simple 1px border
	.wc-simplebutton {
		@include button($background: -1);
	}

	.wc-transparentbutton {
		@include expose-plain-button;
		@include button;
	}

	.wc-bgbutton {
		@include expose-plain-button;
		@include button($background: $wc-ui-color-global-bg);
		color: $wc-ui-color-global-bg;

		&[disabled] {
			background-color: $wc-ui-color-disabled-bg;
			color: $wc-ui-color-disabled-fg;
		}
	}
}
//########## End of unused (in framework) convenience classes ##########

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

// Positioning of an image in a WButton or WLink based on the component's imagePosition property. XS:TOKENs for this
// property are 'n','e','s','w'.
// Used by:
// WButton (incl WCancelButton, WConfirmButton, WPrintButton)
// WLink (incl WInternalLink, WContentLink)

// Images in buttons and links are placed in a container so they can be positioned

.wc_btn_imgn,
.wc_btn_imgs {
	// Links with north/south images must be inline-block and centered.
	display: inline-block;
	text-align: center;

	> img {
		display: block;
		margin: 0 auto;
	}
}

.wc_btn_imgn > img {
	@include margin(bottom);
}

.wc_btn_imgs > img {
	@include margin(top);
}

.wc_btn_imge > img {
	@include margin(left);
}

.wc_btn_imgw > img {
	@include margin(right);
}
