@use "sass:math"; $base-font-size: 16px; // *--------------- // Convert pixels to ems // eg. for a relational value of 12px write em(12px) when the parent is 16px // if the parent is another value say 24px write em(12px, 24px) // ----------------*/ @function em($pixels, $context: 16) { @return math.div($pixels, $context) * 1em; } // *--------------- // Convert pixels to rems // eg. for a relational value of 12px write rem(12px) // Assumes $base-font-size is the font-size of // ----------------*/ @function rem($font-size) { @return math.div($font-size, $base-font-size) * 1rem; } // *--------------- // Hide element while making it readable for screen readers // Usage: // .sr-only { @include visuallyhidden; } // ----------------*/ @mixin visuallyhidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } // *--------------- // Add inset properties of IE11 support // Usage: // element { @include inset; } // ----------------*/ @mixin inset { inset: 0; } // *--------------- // Reset for list elements // Must be applied to