/*doc
---
title: "Messages common styles"
name: messages-common-styles
category: Docs
subcategory: Placeholders
---

Common styles for messages, mostly resetting text styles and preventing layout quirks.

#### Source {messages-common-styles-source}

```scss
%a11y-before {
	border-radius: 0 !important;
	color: #fff !important;
	contain: content;
	display: block !important;
	font: 700 normal 14px/1.5 sans-serif !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	height: auto !important;
	max-width: 100vw !important;
	padding: 4px !important;
	pointer-events: none !important;
	position: absolute !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	transform: none !important;
	white-space: pre !important;
	width: auto !important;
}
```

##### Used by {messages-common-styles-usedby}

- [`a11y()` mixin](#Mixins-a11y)
*/
%a11y-before {
	border-radius: 0 !important;
	color: #fff !important;
	contain: content;
	display: block !important;
	font: 700 normal 14px/1.5 sans-serif !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	height: auto !important;
	max-width: 100vw !important;
	padding: 4px !important;
	pointer-events: none !important;
	position: absolute !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	transform: none !important;
	white-space: pre !important;
	width: auto !important;
}

/*doc
---
title: "Level-specific messages styles"
name: messages-level-styles
category: Docs
subcategory: Placeholders
---

Level-specific styles for messages, incrementing `counter` and enforcing `outline`.

#### Source {messages-level-styles-source}

```scss
@each $theme in map-keys($themes) {
	%a11y-#​{$theme} {
		counter-increment: unquote($theme) !important;
		outline: 4px solid theme-conf($theme, 'color') !important;
		outline-offset: -4px !important;
	}
}
```

##### Used by {messages-level-styles-usedby}

- [`a11y()` mixin](#Mixins-a11y)
*/
@each $theme in map-keys($themes) {
	%a11y-#{$theme} {
		counter-increment: unquote($theme) !important;
		outline: 4px solid theme-conf($theme, 'color') !important;
		outline-offset: -4px !important;
	}
}


/*doc
---
title: "Cancel a message"
name: message-cancellation
category: Docs
subcategory: Placeholders
---

Provides a way to cancel a message by resetting its core properties.

#### Source {message-cancellation-source}

```scss
%a11y-reset {
	counter-increment: none !important;
	outline: 0 !important;

	&::after,
	& + ::before {
		content: '' !important;
		display: none !important;
	}
}
```

##### Used by {message-cancellation-usedby}

- [Missing `[role="search"]` advice](/advices.html#missing-role)
- [`[placeholder]` can't replace a `label` advice](/advices.html#placeholder)
- [Most of DOM nodes shouldn't be `:empty` warning](/warnings.html#empty-nodes)
- [Form `button` error](/errors.html#not-form-button)
- [`[type="radio"]` outside a `fieldset` error](/errors.html#radio-group)
*/
%a11y-reset {
	counter-increment: none !important;
	outline: 0 !important;

	&::after,
	& + ::before {
		content: '' !important;
		display: none !important;
	}
}

/*doc
---
title: "Display <head> children"
name: head-children
category: Docs
subcategory: Placeholders
---

Displays elements in `<head>`, to allow their messages to appear.

#### Source {head-children-source}

```scss
%a11y-head {
	display: block !important;
}
```

##### Used by {head-children-usedby}

- [`a11y-head()` mixin](#Mixins-a11y-head)
*/
%a11y-head {
	display: block !important;
}
