`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n @include get-font-size(\"body-medium\"); // OUDS mod\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n text-decoration: underline dotted; // 1\n cursor: help; // 2\n text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n margin-bottom: $ouds-space-fixed-medium; // OUDS mod: instead of `1rem`\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\n// OUDS mod\n// Orange square list-style\nul {\n list-style-type: square;\n}\n\n// Future-proof markers' color\n// See https://developer.mozilla.org/fr/docs/Web/CSS/::marker\n// stylelint-disable selector-max-type\nli::marker {\n color: var(--#{$prefix}color-content-brand-primary);\n vertical-align: middle;\n\n ol & {\n color: inherit;\n }\n}\n\nli li::marker { color: var(--#{$prefix}color-content-muted); }\n\nli li li::marker { color: var(--#{$prefix}color-content-disabled); } // TODO: Check the colors once the design is done\n\n// Bullet-proof markers' color\n// @todo To remove when ::marker support is OK\n// See https://caniuse.com/#search=%3A%3Amarker\nli::before {\n color: var(--#{$prefix}color-content-brand-primary);\n vertical-align: text-top;\n\n ol & {\n color: inherit;\n }\n}\n\nli li::before { color: var(--#{$prefix}color-content-muted); }\n\nli li li::before { color: var(--#{$prefix}color-content-disabled); }\n// stylelint-enable selector-max-type\n// End mod\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`\n}\n\n// OUDS mod: No italic\ni,\nem,\ncite {\n font-style: normal; // OUDS mod: remove italic.\n}\n// End mod\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nem, // OUDS mod\nstrong {\n font-weight: $font-weight-bold; // OUDS mod: ensure 700\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include get-font-size(\"body-small\"); // OUDS mod: instead of `@include font-size($small-font-size)`\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n color: var(--#{$prefix}color-content-on-action-highlighted); // OUDS mod: instead of `var(--#{$prefix}highlight-color)`\n background-color: var(--#{$prefix}color-action-highlighted); // OUDS mod: instead of `var(--#{$prefix}highlight-bg)`\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\n// OUDS mod: define link properties in a placeholder to be reused in link component\n%link-properties {\n font-weight: $link-font-weight; // OUDS mod\n color: var(--#{$prefix}link-color); // OUDS mod: instead of rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n text-decoration: $link-decoration;\n\n &:hover {\n color: var(--#{$prefix}link-hover-color); // OUDS mod\n text-decoration: $link-hover-decoration;\n }\n\n\n .visited-links &:visited:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]),\n &:visited.visited-links:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]) {\n color: var(--#{$prefix}link-visited-color);\n }\n\n &:focus-visible,\n &:focus[data-focus-visible-added] {\n color: var(--#{$prefix}link-focus-color);\n text-decoration: $link-hover-decoration;\n }\n\n &:active {\n color: var(--#{$prefix}link-active-color);\n text-decoration: $link-hover-decoration;\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--#{$prefix}link-disabled-color);\n pointer-events: none;\n }\n\n .colored-bg &,\n &.colored-bg {\n --#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};\n --#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};\n --#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};\n --#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};\n --#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};\n --#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};\n }\n}\n// End mod\n\na {\n // OUDS mod: use link properties placeholder\n @extend %link-properties;\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]):not([aria-disabled=\"true\"]) { // OUDS mod: Added `:not([aria-disabled=\"true])`\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\nvar, // OUDS mod\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`\n overflow: auto; // 3\n @include get-font-size(\"code-medium\"); // OUDS mod: instead of `@include font-size($code-font-size)`\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\nvar, // OUDS mod\ncode {\n @include font-size($code-font-size);\n font-style: normal; // OUDS mod: is italic in all browsers\n color: var(--#{$prefix}color-content-muted);\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm, $border-radius-sm); // OUDS mod: instead of `@include border-radius($border-radius-sm)`\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// 1. Prevent double borders\n// 2. Ensure horizontal alignment in table when using numbers\n// See https://twitter.com/wesbos/status/932644812582522880\n// See https://caniuse.com/#feat=font-variant-numeric\n// See https://caniuse.com/#feat=font-feature\n// See https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum\n\ntable {\n font-feature-settings: \"tnum\"; // OUDS mod: 2\n font-variant-numeric: tabular-nums; // OUDS mod: 2\n caption-side: top; // OUDS mod\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-caption-padding-y;\n padding-bottom: $table-caption-padding-y;\n @include get-font-size(\"heading-xlarge\"); // OUDS mod\n font-weight: $font-weight-bold; // OUDS mod\n color: $table-caption-color;\n text-align: left;\n -webkit-font-smoothing: antialiased; // OUDS mod\n -moz-osx-font-smoothing: grayscale; // OUDS mod\n text-rendering: optimizelegibility; // OUDS mod\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n border-color: inherit;\n border-style: solid;\n border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n//\n// This rule is not applied with the focus ring utility which handles\n// itself outline and box shadow\n\nbutton:focus:not(:focus-visible):not(.focus-ring) {\n outline: 0;\n box-shadow: none; // Bosted mod\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // 1\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n\n /* rtl:remove */\n letter-spacing: inherit; // OUDS mod\n box-shadow: none; // OUDS mod: prevent native validation styles to apply\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n text-transform: none;\n}\n// Set the cursor for non-`