@charset "UTF-8";
// @description
// * A mixin that resets all basic HTML elements to their default
// * styles, which are defined by the W3C specification. This is
// * useful for ensuring that all browsers render the HTML elements
// * correctly, and for removing any default browser styles that
// * may interfere with other styles.
// *
// * You can also use the compiled files in `dist` directory as it is the
// * recommended way to use the package. The compiled files contain vendor
// * prefixes of all CSS properties which is very important in production.
// * You can read file `README.md` to know how to use the package.
// @access private
// @author Khaled Mohamed
// @license MIT
// @repository: https://github.com/Black-Axis/reset-zone
@mixin reset-zone() {
// * Box sizing rules.
// * Apply a universal box-sizing rule to all elements, including
// * pseudo-elements. This resets margin and padding to prevent
// * default browser styles from interfering, and ensures that the
// * box-sizing property is set to border-box.
// *
// * Using border-box makes it easier to manage size and layout as
// * the padding and border are included within the element's
// * specified width and height.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// * Set core root defaults.
// *
// * Smooth scrolling for all desktop devices
// * This is for accessibility purposes and only when the user
// * prefers reduced motion. It is not enabled by default.
html,
html:focus-within {
// * Enable smooth scrolling only when the user prefers reduced
// * motion. This is for accessibility purposes.
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
// * Disable smooth scrolling for users who prefer reduced motion
// * and are using a touch device.
@media (prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
// * Set core body defaults
// *
// * Set the minimum body height to viewport height, to prevent
// * the content from being rendered outside of the viewport.
// *
// * This is important for accessibility and to prevent that
// * users with small screens or users with assistive technologies
// * to zoom in and out to see the content.
body {
min-height: 100dvh;
line-height: 1.5;
// * Improve text rendering in the browsers
-webkit-font-smoothing: antialiased;
// * Allow to break long words to avoid overflowing the container
// * This is important for accessibility and to prevent that
// * users with small screens or users with assistive technologies
// * to zoom in and out to see the content.
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
:where(&) {
overflow-wrap: break-word;
hyphens: auto;
}
}
// * Avoid text overflows.
// * Allow text to break at arbitrary points to avoid overflowing the container
// *
// * This is important for accessibility and to prevent that
// * users with small screens or users with assistive technologies
// * to zoom in and out to see the content.
// *
// * The following elements are reset to have the `overflow-wrap` property
// * set to `break-word`:
// *
// * `p` to prevent paragraphs from overflowing the container.
// * `h1`, `h2`, `h3`, `h4`, `h5`, `h6` to prevent headings from overflowing
// * the container.
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
// * Remove list styles on ul, ol elements with a list role which suggests
// * default styling will be removed. This is important for accessibility and
// * to prevent that users with small screens or users with assistive
// * technologies to zoom in and out to see the content.
// *
// * The following elements are reset to have the `list-style` property
// * set to `none`:
// *
// * `ul[role="list"]` to remove default list styling.
// * `menu[role="list"]` to remove default list styling.
// * `ol[role="list"]` to remove default list styling.
ul[role="list"],
menu[role="list"],
ol[role="list"] {
list-style: none;
}
// * Set the display property to block for all main HTML5 elements.
// *
// * The following elements are reset to have the `display` property
// * set to `block`:
// *
// * `main, header, footer, section, article, aside, nav, menu, details,
// * summary, object, embed, figcaption, figure, hgroup, img, picture, video,
// * canvas, svg`, meter, progress`.
main,
header,
footer,
section,
article,
aside,
nav,
menu,
details,
summary,
object,
embed,
figcaption,
figure,
hgroup,
img,
picture,
video,
canvas,
svg,
meter,
progress {
display: block;
}
// * Set default styles for sub and sup HTML elements.
// * - `position: relative;` is used to position the element relative to its
// * normal position.
// * - `font-size: 75%;` sets the font size for the element to 75% of the
// * normal font size.
// * - `line-height: 0;` sets the line height to 0 so that the element does
// * not take up any vertical space.
// * - `vertical-align: baseline;` sets the vertical alignment of the element
// * to the baseline of the parent element.
sup,
sub {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
// * Superscript elements
// * - `top: -0.5em;` will move the element up by half the height of the
// * parent element's line height so that it is positioned above the
// * normal text flow.
sup {
top: -0.5em;
}
// * Subscript elements
// * - `bottom: -0.25em;` will move the element down by a quarter of the
// * height of the parent element's line height so that it is positioned
// * below the normal text flow.
sub {
bottom: -0.25em;
}
// * Set default styles for menu tag
// *
// * - `unicode-bidi: isolate;` ensures that the text inside the menu
// * element is isolated from text outside the element. This is important
// * for preventing text directionality issues, especially in mixed
// * language environments, ensuring that the text within behaves
// * independently of surrounding text direction.
menu {
unicode-bidi: isolate;
}
// * A elements that don't have a class get default styles
// * Default styles for anchor elements without a class attribute.
// *
// * This ensures that links without a class have a consistent visual
// * appearance across different browsers. The styles applied include:
// *
// * - `text-decoration-skip-ink: auto;` allows the underline to skip over
// * descenders, making the text more readable.
// * - `text-decoration-line: underline;` explicitly sets the text
// * decoration to an underline.
// * - `text-decoration-thickness: max(0.08em, 1px);` sets the thickness
// * of the underline to the maximum of 0.08em or 1px, ensuring
// * visibility.
// * - `text-underline-offset: 0.15em;` offsets the underline from the
// * text by 0.15em, improving readability.
a:not([class]) {
text-decoration-skip-ink: auto;
text-decoration-line: underline;
text-decoration-thickness: max(0.08em, 1px);
text-underline-offset: 0.15em;
}
// * Set default styles for images, videos, canvases, and SVGs
// *
// * - `height` are set to `auto` so that the element
// * will not exceed the height of its container.
// * - `font-style: italic;` is set to prevent any font styles from being
// * inherited from the parent element.
// * - `background-repeat: no-repeat;` is set to prevent the background
// * image from repeating.
// * - `background-size: cover;` is set to scale the background image to
// * cover the entire element.
// * - `shape-margin: 1rem;` is set to add a margin around the element
// * and improve text wrapping.
img,
picture,
video,
canvas,
svg {
height: auto;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 1rem;
}
// * Set default styles for:
// * `img`, `picture`, `video`, `canvas`, `svg`, `object` and `embed` elements.
// *
// * The following CSS properties are applied to ensure consistent styling
// * across different browsers for these elements:
// *
// * - `max-width` are set to `100%` so that the
// * element will not exceed the width of its container.
// *
// * Note: The `--rz-asset-max-width` variable is used to allow users to
// * override the default value of `100%`.
img,
picture,
video,
canvas,
svg,
object,
embed {
max-width: 100%;
}
// * Remove border from object and embed elements.
// *
// * The object and embed elements have a default border that is not
// * visually appealing. Therefore, we remove the border by setting
// * `border` to `none`.
// *
// * Note: This is a minimal reset and only applies to the object and
// * embed elements. Other elements may still have a default border.
// *
// * To customize the border, you can use the following CSS properties:
// * `border-width`, `border-style`, `border-color`, `border-radius`, etc.
object,
embed {
border: none;
}
// * Default styles for `meter` and `progress` elements.
// *
// * The following CSS properties are applied to ensure consistent styling
// * across different browsers for the meter and progress elements:
// *
// * - `--rz-measure-width: 100%;` sets the default width to full width.
// * - `--rz-measure-max-width: calc(100% - 1rem);` ensures there is padding
// * around the element, making it responsive and preventing overflow.
// * - `--rz-measure-height: 1.25rem;` sets a consistent height for both elements.
// *
// * These variables are used to define the element's width and height,
// * providing flexibility and ease of customization.
// *
// * Additional styles:
// * - `margin-block: 0.5rem;` adds vertical spacing around the elements.
// * - `padding-inline: 0.5rem;` ensures there is padding within the element.
// *
// * The styles for the pseudo-elements for webkit and moz browsers ensure
// * a consistent appearance for the progress bar.
// * - `background-color: transparent;` sets the progress bar track to be
// * transparent.
// * - `background-color: currentColor;` sets the progress fill color to match
// * the current font color.
meter,
progress {
width: 100%;
max-width: calc(100% - 1rem);
height: 1.25rem;
margin-block: 0.5rem;
padding-inline: 0.5rem;
&::-webkit-progress-bar {
background-color: transparent;
}
&::-webkit-progress-value {
// stylelint-disable-next-line value-keyword-case
background-color: currentColor;
}
&::-moz-progress-bar {
// stylelint-disable-next-line value-keyword-case
background-color: currentColor;
}
}
// * Set default styles for figcaption
// *
// * - `font-style: italic;` is set to make the text within the figcaption
// * element italic. This is a common visual cue for captions.
figcaption {
font-style: italic;
}
// * Set default styles for the fieldset element.
// *
// * - The `--rz-fieldset-min-width` variable are defined to allow easy
// * customization of the fieldset's minimum width.
// * - `min-width` are set to ensure that the fieldset
// * does not shrink below the specified minimum width.
// * - `border: none;` removes the default border around the fieldset,
// * providing a clean, unstyled appearance. This is important for creating
// * consistent styling across different browsers and user agents.
fieldset {
min-width: 0;
border: none;
}
// * Set default styles for the `legend` element.
// *
// * - `--rz-legend-width` and `--rz-legend-max-width` are defined to allow
// * easy customization of the legend's width and maximum width.
// * - `width` are set to ensure that the legend does not
// * shrink below the specified width.
// * - `max-width` are set to ensure that the legend
// * does not grow beyond the specified maximum width.
// * - `border: none;` removes the default border around the legend,
// * providing a clean, unstyled appearance. This is important for creating
// * consistent styling across different browsers and user agents.
// * - `display: block;` sets the legend to be a block element, which
// * is important for accessibility purposes, as it allows screen readers
// * to properly interpret the legend.
// * - `float: none;` is set to prevent the legend from being floated,
// * which can cause accessibility issues in some browsers.
// * - `font: inherit;` ensures that the legend inherits the font styles
// * from its parent element.
// * - `text-align: start;` sets the text alignment of the legend to be
// * start-aligned.
// * - `color: inherit;` ensures that the legend inherits the text color
// * from its parent element.
// * - `background: none;` removes the default background color of the
// * legend, providing a clean, unstyled appearance.
legend {
width: auto;
max-width: none;
border: none;
display: block;
float: none;
font: inherit;
text-align: start;
color: inherit;
background: none;
}
// * Inherit fonts for inputs and buttons
// *
// * This is a common accessibility problem in web development. If
// * the font styles are not inherited, the input fields and buttons
// * will not have the same font as the rest of the content.
input,
button,
textarea,
select,
option,
mark,
small,
dfn,
abbr,
cite,
time,
data {
font: inherit;
}
// * Reset styles of blockquote and q tag
// * Remove the default quotation marks on blockquote and q tags
// *
// * Quotation marks are often used to indicate quotations in writing.
// * However, in HTML, the blockquote and q tags are used to indicate
// * quotations as well. Therefore, it is not necessary to add
// * quotation marks inside these tags.
// *
// * The following code removes the default quotation marks on blockquote
// * and q tags.
// *
// * :before and :after pseudo elements are used to add quotation marks
// * before and after the content of the blockquote and q tags.
// *
// * The content property is used to remove the default quotation marks
// * on the blockquote and q tags.
// *
// * The quotes property is set to none to remove the default quotation
// * marks on the blockquote and q tags.
// * For more information, see the MDN documentation on the quotes property:
// * https://developer.mozilla.org/en-US/docs/Web/CSS/quotes
blockquote,
q {
quotes: none;
&::before,
&::after {
content: none;
}
}
// * Hide all children of the details element except for the summary
// * element if the open attribute is not set on the details element.
// *
// * The open attribute is used to control the visibility of the details
// * element. If the open attribute is set, the details element is visible,
// * and if it is not set, the details element is hidden.
// *
// * The `:not([open])` pseudo-class is used to select all details elements
// * that do not have the open attribute set.
// *
// * The `>*:not(summary)` selector is used to select all children of the
// * details element except for the summary element.
// *
// * The `display: none` property is used to hide the selected elements.
// *
details {
&:not([open])>*:not(summary) {
display: none;
}
}
// * Set the `unicode-bidi` property to `isolate` on bdi and bdo elements
// *
// * The `unicode-bidi` property is used to control the direction of text
// * in bi-directional text.
// *
// * The `isolate` value is used to isolate the element from the surrounding
// * text, so that the direction of the text inside the element is not
// * affected by the surrounding text.
// *
// * The bdi element is used to indicate that the text inside the element
// * is a bi-directional isolation, and that the direction of the text
// * inside the element is independent of the surrounding text.
// *
// * The bdo element is used to indicate that the text inside the element
// * is a bi-directional override, and that the direction of the text
// * inside the element should be overridden to be the same as the
// * direction of the element.
// *
// * For more information, see the MDN documentation on the unicode-bidi
// * property:
// * https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
bdi,
bdo {
unicode-bidi: isolate;
}
// * Reset styles for hr elements
// *
// * The hr element is a semantic element that represents a thematic break
// * between paragraphs of text. It is often displayed as a horizontal line.
// *
// * The default styles for the hr element are removed, and the following
// * styles are applied:
// *
// * - `height` is set to `1px` to create a thin line.
// * - `border` is set to `none` to remove any borders.
// * - `background` is set to `currentColor` to set the background color
// * of the horizontal line to the current color of the element.
// * - `opacity` is set to `0.1` to make the horizontal line slightly
// * transparent.
// *
// * These styles are applied to ensure that the hr element is displayed
// * consistently across different browsers.
hr {
height: 1px;
border: none;
// stylelint-disable-next-line value-keyword-case
background: currentColor;
opacity: 0.1;
}
// * Reset for preformatted text and code elements
// *
// * Remove default monospace fonts and ensure consistent
// * presentation of code blocks while maintaining readability
pre,
code,
kbd,
samp {
--rz-code-font: courier, monospace;
font-family: var(--rz-code-font, inherit);
font-size: inherit;
white-space: pre-wrap;
tab-size: 2;
}
// * Removes spacing between cells in tables
// *
// * The `border-collapse: collapse;` property is used to collapse
// * the borders of adjacent table cells into a single border,
// * eliminating space between cells. This helps create a cleaner
// * and more organized appearance for tables.
// *
// * The `border-spacing: 0;` property is used to set the spacing
// * between table cells to zero. This ensures that there is no gap
// * between the cells, further enhancing the compact look of the
// * table layout.
table {
border-collapse: collapse;
border-spacing: 0;
}
// * Hide the second consecutive line break
// *
// * When there are two or more consecutive line breaks, the first one
// * is rendered as a line break, and the second one is rendered as an
// * empty block element. This is a default behavior in HTML. By hiding
// * the second line break, we can prevent this empty block element from
// * being rendered.
// *
// * This is useful for rendering Markdown code blocks and other types of
// * content that use line breaks to separate sections.
// *
// * The selector `br + br` selects the second line break element that
// * follows the first line break element. The `display: none;` property
// * is used to hide the second line break element.
// *
// * This is useful for CMS users.
br + br {
display: none;
}
// * The following code enables container queries for the following
// * elements:
// *
// * - The header element
// * - The footer element
// * - The main element
// * - The section element
// * - The article element
// *
// * The :is pseudo-class is used to group the selectors
// * to ensure that the container-type property is applied to
// * all the elements listed above.
// *
// * The container-type property is set to inline-size to
// * create a container query that styles the element's content
// * based on its own inline size.
// *
// * For more information on container queries, see the following
// * resources:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
// * - https://css-tricks.com/css-container-queries/
@supports selector(:is) {
body> :is(header, footer),
main,
section,
article {
container-type: inline-size;
}
}
// * The following code enables container queries for the following
// * elements, but only when the browser does not support the
// * :is pseudo-class.
// *
// * - The header element
// * - The footer element
// * - The main element
// * - The section element
// * - The article element
// *
// * The container-type property is set to inline-size to
// * create a container query that styles the element's content
// * based on its own inline size.
// *
// * For more information on container queries, see the following
// * resources:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
// * - https://css-tricks.com/css-container-queries/
@supports not selector(:is) {
body>header,
body>footer,
main,
section,
article {
container-type: inline-size;
}
}
// * The following code enables the hiding of elements with the
// * hidden attribute, but only when the browser does not support
// * the :where pseudo-class.
// *
// * The :where pseudo-class is supported in modern browsers and
// * this code is only needed for older browsers.
// *
// * The :where pseudo-class is more efficient than the [hidden]
// * attribute selector as it does not create a style rule.
// *
// * The :where pseudo-class will be used by browsers that support
// * it, and the [hidden] attribute selector will be used by
// * browsers that do not support the :where pseudo-class.
// *
// * For more information on the :where pseudo-class, see the
// * following resources:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/:where
@supports selector(:where) {
:where([hidden]) {
display: none;
}
}
// * Hide elements with the hidden attribute for browsers not supporting
// * the :where pseudo-class. This ensures that elements with the hidden
// * attribute do not appear on the page in older browsers. The :where
// * pseudo-class is preferred in modern browsers for efficiency.
// *
// * For more information, see:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/:where
@supports not selector(:where) {
[hidden] {
display: none;
}
}
// * Hide audio elements that do not have a controls attribute.
// * This is useful for preventing audio elements from being rendered
// * when they do not have any visible controls.
// *
// * The :not pseudo-class is used to select all audio elements that
// * do not have a controls attribute. The [controls] attribute is
// * used to indicate that the audio element should have visible controls.
// *
// * The display property is set to none to hide the audio element.
// *
// * For more information on the :not pseudo-class, see the following
// * resources:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/:not
// *
// * For more information on the controls attribute, see the following
// * resources:
// * - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
audio {
:not([controls]) {
display: none;
}
}
// * Change the cursor to a progress indicator when the aria-busy state is
// * set to true.
// *
// * The aria-busy state is used to indicate that an element is currently
// * performing an action such as loading or processing data. When the
// * aria-busy state is set to true, the element should be inaccessible to
// * the user until the action is complete.
// *
// * This rule is used to provide a visual indication to the user that an
// * action is currently in progress and that the element should not be
// * interacted with until the action is complete.
// *
// * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy
[aria-busy="true"] {
cursor: progress;
}
// * Change the cursor to a pointing hand when the aria-controls attribute is
// * set on an element.
// *
// * The aria-controls attribute is used to indicate that an element controls
// * the content of another element. When this attribute is set, the element
// * should be clickable and should visually indicate to the user that
// * clicking on it will control the content of the other element.
// *
// * This rule is used to provide a visual indication to the user that the
// * element can be clicked to control the content of the other element.
// *
// * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls
[aria-controls] {
cursor: pointer;
}
// * Change the cursor to the default cursor when the aria-disabled attribute is
// * set on an element.
// *
// * The aria-disabled attribute is used to indicate that an element is currently
// * disabled. When this attribute is set, the element should be inaccessible to
// * the user until it is re-enabled.
// *
// * This rule is used to provide a visual indication to the user that the
// * element is currently disabled and that it cannot be interacted with.
// *
// * For more information on the aria-disabled attribute, see the following
// * resources:
// * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled
[aria-disabled] {
cursor: default;
}
// * The focus-visible pseudo-class is supported in modern browsers.
// * It is used to indicate if the browser is currently allowing the
// * user to focus on the element.
// *
// * When the focus-visible pseudo-class is supported, a focus ring
// * is only rendered if the browser is currently allowing the user
// * to focus on the element.
// *
// * For more information on the focus-visible pseudo-class, see the
// * following resources:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
@supports selector(:focus-visible) {
:focus-visible {
// * The outline property is used to render a focus ring around the
// * element when it is focused. The value of max(1px, 0.15em) is used
// * to ensure that the focus ring is at least 1px in width and
// * scales with the element's font size.
// stylelint-disable-next-line value-keyword-case
outline: max(1px, 0.15em) solid currentColor;
// * The outline-offset property is used to set the distance between
// * the outline and the element. The value of max(1px, 0.15em) is used
// * to ensure that the outline is at least 1px away from the element
// * and scales with the element's font size.
outline-offset: max(1px, 0.15em);
}
}
// * The following block provides fallback styles for browsers that do not
// * support the :focus-visible pseudo-class. The :focus-visible pseudo-class
// * is used to indicate if the browser is currently allowing the user to
// * focus on an element. When it is not supported, the :focus selector is
// * used as a fallback to ensure accessibility and usability for keyboard
// * users. This ensures a focus ring is displayed for all focusable elements.
// *
// * For more information, see:
// * - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
@supports not selector(:focus-visible) {
:focus {
// * The outline property renders a focus ring around the element when
// * it is focused. The value "max(1px, 0.15em)" ensures the focus ring
// * is at least 1px wide and scales with the element's font size.
// stylelint-disable-next-line value-keyword-case
outline: max(1px, 0.15em) solid currentColor;
// * The outline-offset property sets the distance between the outline
// * and the element. It also uses "max(1px, 0.15em)" to maintain
// * consistent spacing, ensuring the outline is visible without
// * intruding on the element's content.
outline-offset: max(1px, 0.15em);
}
}
// * Scroll margin allowance above anchor links
// * Anchor links (e.g., Link) and named anchors
// * (e.g., Link) get a scroll margin allowance above
// * to ensure they are clearly in view. The value of 2rem is used to
// * balance the importance of the content with the importance of the
// * anchor link. The scroll-padding-block-start property is used to
// * target the block-start of the element, which is the top of the
// * element in a horizontal writing mode.
// * This rule is essential for usability and accessibility, as it
// * ensures that the content is not obscured by the browser's location
// * bar or other elements.
// * The :target pseudo-class is used to target elements that have an
// * anchor link pointing to them. For example, the following HTML will
// * apply the styles when the link is clicked:
// * Link
// * Content
:target {
scroll-padding-block-start: 2rem;
}
// * Scroll margin allowance below focused elements to ensure they
// * are clearly in view
// *
// * When an element is focused, such as when a user clicks on a link or
// * uses their keyboard to navigate to an element, a scroll margin
// * allowance is applied below the element to ensure it is clearly
// * visible. The value of 8vh is used to balance the importance of the
// * content with the importance of the focused element. The
// * scroll-padding-block-end property is used to target the block-end
// * of the element, which is the bottom of the element in a horizontal
// * writing mode.
// *
// * This rule is essential for usability and accessibility, as it
// * ensures that the content is not obscured by the browser's location
// * bar or other elements.
// *
// * For example, the following HTML will apply the styles when the link is
// * clicked:
// * Link
// * Content
:focus {
// * The scroll-padding-block-end property is used to set the scroll margin
// * allowance below the element when it is focused. The value of 8vh is used
// * to balance the importance of the content with the importance of the
// * focused element.
scroll-padding-block-end: 8vh;
}
// * Set the color and opacity of placeholder text.
// *
// * This is important for accessibility and usability, as it ensures that
// * the placeholder text is visible and readable. The value of 0.5 is used
// * to balance the importance of the placeholder text with the importance
// * of the content.
// *
// * The `::placeholder` pseudo-element is used to target the placeholder
// * text of form elements. For example, the following HTML will apply the
// * styles:
// *
// *
// * The `color` property is used to set the color of the placeholder text.
// * The value of `inherit` is used to inherit the color of the parent
// * element, which is the most common case.
// *
// * The `opacity` property is used to set the opacity of the placeholder
// * text. The value of `0.5` is used to balance the importance of the
// * placeholder text with the importance of the content.
::placeholder {
color: inherit;
opacity: 0.5;
}
// * Hide all empty elements.
// *
// * This is important for accessibility and usability, as it ensures that
// * the content is visible and readable. Empty elements can be a problem
// * for screen readers and other assistive technologies, as they can
// * cause the user to jump to the next element unexpectedly.
// *
// * The `:empty` pseudo-element is used to target all empty elements.
// * The `display` property is set to `none` to hide the element.
// *
// * For example, the following HTML will apply the styles:
// *
// *
// * The element will be hidden, as it is empty.
// * This is useful for CMS users also.
:empty {
display: none;
}
// * Remove all animations, transitions and smooth scroll for
// * people that prefer not to see them. This is important for
// * accessibility and to prevent that users with small screens or
// * users with assistive technologies to zoom in and out to see the
// * content.
// *
// * The following properties are set to prevent that the browser
// * or the user agent to apply any animations, transitions or
// * smooth scroll:
// *
// * `animation-duration` is set to `0.01ms` to prevent that the
// * browser or the user agent to apply any animations.
// * `animation-iteration-count` is set to `1` to prevent that the
// * browser or the user agent to apply any animations.
// * `transition-duration` is set to `0.01ms` to prevent that the
// * browser or the user agent to apply any transitions.
// * `scroll-behavior` is set to `auto` to prevent that the browser or
// * the user agent to apply any smooth scroll.
// * `animation-delay` is set to `-1ms` to prevent that the browser or
// * the user agent to apply any animations.
// * `background-attachment` is set to `initial` to prevent that the
// * browser or the user agent to apply any background attachment.
// * `transition-delay` is set to `0s` to prevent that the browser or
// * the user agent to apply any transitions.
// * `perspective` is set to `none` to prevent that the browser or
// * the user agent to apply any 3D transforms.
// * `transform-style` is set to `flat` to prevent that the browser or
// * the user agent to apply any 3D transforms.
// *
// * The `prefers-reduced-motion` media query is used to detect if
// * the user prefers reduced motion. If the user prefers reduced
// * motion, the styles will be applied to all elements, including
// * pseudo-elements. If the user does not prefer reduced motion, the
// * styles will not be applied.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-delay: -1ms;
animation-iteration-count: 1;
transition-duration: 0s;
transition-delay: 0s;
scroll-behavior: auto;
background-attachment: initial;
perspective: none;
transform-style: flat;
}
}
// * The styles applied to the `