$fontSizes: ( "smaller": 0.75, "small": 0.875, "regular": 1, "large": 1.25, "larger": 2, ); // Maps a named font-size to its predefined size. Units default to em, but can // be changed using the multiplier parameter. @mixin font-size($sizeName, $multiplier: 1em) { font-size: map.get($fontSizes, $sizeName) * $multiplier; } @keyframes spinner__animation { 0% { animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297); transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading__animation { 100% { transform: translateX(100%); } } // Adds animation to placeholder section @mixin placeholder($include-border-radius: true) { outline: 0 !important; border: 0 !important; background-color: #ebebeb !important; color: transparent !important; width: 100%; @if $include-border-radius == true { border-radius: 0.25rem; } display: block; line-height: 1; position: relative !important; overflow: hidden !important; max-width: 100% !important; pointer-events: none; box-shadow: none; z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */ // Forces direct descendants to keep layout but lose visibility. > * { visibility: hidden; } &::after { content: " "; display: block; position: absolute; left: 0; right: 0; top: 0; height: 100%; background-repeat: no-repeat; background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb); transform: translateX(-100%); animation: loading__animation 1.5s ease-in-out infinite; } @media screen and (prefers-reduced-motion: reduce) { animation: none; } } @mixin force-content() { &::before { content: "\00a0"; } } // Hide an element from sighted users, but available to screen reader users. @mixin visually-hidden() { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ overflow-wrap: normal !important; word-wrap: normal !important; padding: 0; position: absolute !important; width: 1px; } @mixin visually-hidden-focus-reveal() { background-color: #fff; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: $input-text-active; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } @mixin reset-box() { border: 0; border-radius: 0; margin: 0; padding: 0; vertical-align: baseline; } @mixin reset-typography() { color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: inherit; text-transform: inherit; } // Reset

,

, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles. @mixin text-heading() { @include reset-box(); @include reset-typography(); box-shadow: none; display: inline; background: transparent; } // Reset