/* wc.common.accesskey.scss */
@import 'mixins-common';
// Provides the styling for the accesskey indicator for componentd which implement the @accessKey XML attribute.

// The accesskey character and callout will be in a label, legend, link or button.
// * The accesskey character will be the first text character which is a case insensitive match for the accessKey attribute.
// * The callout is placed as the first child of the element (where possible) or immediately preceding the element.
//   NOTE: Collision detection
//   The callout position is fixed and, by default, is above the item to which it points. Collision detection is very
//   low priority since most application use a banner of some kind and the access keys live below this banner.

/// The accesskey character in a labelling element (note: will be the element itself in the case of a link or button)
/// is underlined only when the ALT key is pressed.
/// Pressing the ALT key attaches the wc_alt class to the body element. This class is removed as part of the accesskey
/// cleanup method.

.wc_alt .wc_accesskey { //the character in a string corresponding to the control's access key is underlined
	text-decoration: underline;
}

///	Accesskey Tooltips
///	Styling for the callout (shows when ALT is held down).
[role='tooltip'] {
	@include border($color: $wc-ui-color-tooltip-bg);
	background-color: $wc-ui-color-tooltip-bg;
	color: $wc-ui-color-tooltip-fg;
	display: inline;
	// important to over-ride menu rules which may also apply.
	// scss-lint:disable ImportantRule
	font-weight: bold;
	margin-top: (-2 - $wc-gap-small);
	padding: $wc-gap-small !important;
	position: absolute;
	text-align: center;
	width: auto !important;
	// scss-lint:enable ImportantRule

	&:before,
	&:after {
		border-color: $wc-ui-color-tooltip-bg transparent transparent;
		border-style: solid;
		border-width: $wc-gap-normal $wc-gap-small 0;
		bottom: 0;
		content: '';
		display: inline-block;
		left: 30%;
		margin-bottom: -#{$wc-gap-normal};
		position: absolute;
	}

	// Callout display needs a particularly explicit selector to override menu [role] position but cannot use !important
	// because we cannot guarantee that the hidden selector is more specific.
	&,
	.wc-menu [role] & {
		display: inline-block;
	}
}
