// ========================================================================== // Mixins // ========================================================================== @use 'sass:math'; // Nicer focus styles // --------------------------------------- @mixin focus-visible($color: $focus-default-color) { outline: 2px dashed $color; outline-offset: 2px; } // Use rems for font sizing // Leave at 100%/16px // --------------------------------------- @function calculate-rem($size) { $rem: math.div($size, 16); @return #{$rem}rem; } @mixin font-size($size: $font-size-base) { font-size: $size * 1px; // Fallback in px font-size: calculate-rem($size); } // Font smoothing // --------------------------------------- @mixin font-smoothing($enabled: true) { @if $enabled { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @else { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; } }