/* wc.common.accesskey.dt.scss */
// 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.
@import 'wc.common.accesskey_vars.scss';

.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 to fire an accesskey).
[role='tooltip'] {
	@include accesskey-border;
	background-color: $wc-ui-color-tooltip-bg;
	color: $wc-ui-color-tooltip-fg;
	// important to over-ride menu rules which may also apply.
	// scss-lint:disable ImportantRule
	font-weight: bold !important;
	margin-top: -2.25em;
	padding: 0.25em !important;
	position: absolute;
	text-align: center;
	width: auto !important;
	// scss-lint:enable ImportantRule

	&:before,
	&:after {
		border-style: solid;
		border-width: 0.5em 0.25em 0;
		bottom: 0;
		content: '';
		display: inline-block;
		left: 30%;
		margin-bottom: -0.5em;
		position: absolute;
	}

	&:before {
		border-color: $wc-ui-color-tooltip-border transparent transparent;
	}

	&:after {
		border-color: $wc-ui-color-tooltip-border transparent transparent;
	}

	// 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.
	&,
	.menu [role] & {
		display: inline-block;
	}
}
/* end wc.common.accesskey.dt.scss */
