
////////////////////////////////////////////////////////////////////////////////
// *
// * Sprite mixins
// *
// * !!! This will be overwritten if you run gulp:sprite !!!
// *     So remember to copy any changes over to the gulp template in:
// *     YOUR_THEME/gulp/templates/_sprite.scss
// *
////////////////////////////////////////////////////////////////////////////////

@use "sass:map";
@use "sass:math";

$iconsGroup: (
  sprite: (width: 464px, height: 510px, svgpath: "../images/generated/sprite-css.svg"),
  rs-icon--angle-left: (width: 10px, height: 16px, backgroundx: 0px, backgroundy: 0px),
  rs-icon--angle-right: (width: 10px, height: 16px, backgroundx: -10px, backgroundy: -16px),
  rs-icon--angles-left: (width: 16px, height: 16px, backgroundx: -20px, backgroundy: -32px),
  rs-icon--angles-right: (width: 16px, height: 16px, backgroundx: -36px, backgroundy: -48px),
  rs-icon--bars: (width: 14px, height: 16px, backgroundx: -52px, backgroundy: -64px),
  rs-icon--check: (width: 14px, height: 16px, backgroundx: -66px, backgroundy: -80px),
  rs-icon--chevron-down: (width: 16px, height: 16px, backgroundx: -80px, backgroundy: -96px),
  rs-icon--chevron-left: (width: 10px, height: 16px, backgroundx: -96px, backgroundy: -112px),
  rs-icon--chevron-right: (width: 10px, height: 16px, backgroundx: -106px, backgroundy: -128px),
  rs-icon--circle-check: (width: 16px, height: 16px, backgroundx: -116px, backgroundy: -144px),
  rs-icon--circle-exclamation: (width: 16px, height: 16px, backgroundx: -132px, backgroundy: -160px),
  rs-icon--circle-question: (width: 16px, height: 16px, backgroundx: -148px, backgroundy: -176px),
  rs-icon--envelope: (width: 16px, height: 16px, backgroundx: -164px, backgroundy: -192px),
  rs-icon--facebook-f: (width: 15.5px, height: 16px, backgroundx: -180px, backgroundy: -208px),
  rs-icon--file: (width: 12px, height: 16px, backgroundx: -196px, backgroundy: -224px),
  rs-icon--file-image: (width: 12px, height: 16px, backgroundx: -208px, backgroundy: -240px),
  rs-icon--file-pdf: (width: 16px, height: 16px, backgroundx: -220px, backgroundy: -256px),
  rs-icon--info-circle: (width: 16px, height: 16px, backgroundx: -236px, backgroundy: -272px),
  rs-icon--instagram: (width: 14px, height: 16px, backgroundx: -252px, backgroundy: -288px),
  rs-icon--linkedin: (width: 14px, height: 16px, backgroundx: -266px, backgroundy: -304px),
  rs-icon--lock: (width: 14px, height: 16px, backgroundx: -280px, backgroundy: -320px),
  rs-icon--long-arrow-right: (width: 16px, height: 16px, backgroundx: -294px, backgroundy: -336px),
  rs-icon--move: (width: 16px, height: 16px, backgroundx: -310px, backgroundy: -352px),
  rs-icon--pinterest: (width: 15.5px, height: 16px, backgroundx: -326px, backgroundy: -368px),
  rs-icon--print: (width: 16px, height: 16px, backgroundx: -342px, backgroundy: -384px),
  rs-icon--quote-left: (width: 14px, height: 16px, backgroundx: -358px, backgroundy: -400px),
  rs-icon--search: (width: 16px, height: 16px, backgroundx: -372px, backgroundy: -416px),
  rs-icon--share-square: (width: 16px, height: 14.22px, backgroundx: -388px, backgroundy: -432px),
  rs-icon--triangle-exclamation: (width: 16px, height: 16px, backgroundx: -404px, backgroundy: -447px),
  rs-icon--twitter: (width: 16px, height: 16px, backgroundx: -420px, backgroundy: -463px),
  rs-icon--xmark: (width: 12px, height: 16px, backgroundx: -436px, backgroundy: -479px),
  rs-icon--youtube: (width: 16px, height: 14.22px, backgroundx: -448px, backgroundy: -495px),
);

$sprite: map.get($iconsGroup, sprite) !default;

// * Icons as background-image
// =============================================================================

// ** Use a sprite image on a pseudo-element
// -- src: https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/
//
// -- Examples
//
// You can either use an icon class or
//  use the sprite directly on an element, using the 'sprite' mixin
//
// .icon--test {
//   // automagically displays icon in a pseudo-element
// }
//
// .nav-sitemap {
//   @include sprite((icon: test)); // when you can't simply add the class, use the mixin
// }

// *
// * Sprite mixin: put sprite as bg-image in a pseudo-element
//
// * Settings via an object, containing:
// *   $position: 'before' - name of pseudo-element (string),
// *   $icon: '' - name of the svg icon (string, case-sensitive),
// *   $size: the pixel value for your icon width - defaults to the size in the sprite, translates this into font-size to scale the sprite, based on the body font size (16px by default)
@mixin sprite($settings) {
  $position: map.get($settings, position);
  $icon: map.get($settings, icon);
  $size: map.get($settings, size);
  $width: map.get($settings, width);

  // ** Initial font-size set to base (to set sprite to full size)
  $font-size: $rem-base;
  $ratio: 1;

  // ** get the sprite and filter out the specific icon we need (string name)
  $iconMap: icon-attr($icon);

  // ** what icon gets picked,
  //    this is the name (string) of the svg icon that gets compiled into the sprite
  @if ($icon == null) {
    $icon: "";
  }
  // ** What pseudo-element to use
  @if ($position == null) {
    $position: "before";
  }

  // ** Override width of the icon using font-size
  //    this accepts px values and converts it to flexible units

  $spriteWidth: map.get($sprite, width);
  $spriteHeight: map.get($sprite, height);
  $iconWidth: map.get($iconMap, width);
  $iconHeight: map.get($iconMap, height);

  // -- using font-size only (16px is the base and translates to 100% the svg icon size)
  @if ($size != null) {
    // E.g. $size * math.div(16, $iconWidthGet).
    $font-size: (strip-unit($size) * math.div(strip-unit($rem-base), strip-unit($iconWidth)));
    $ratio: math.div(strip-unit($iconWidth), strip-unit($size));
  }

  &:#{$position} {
    display: inline-flex;
    height: em($iconHeight + (1 * $ratio));
    width: em($iconWidth + (1 * $ratio));
    font-size: rem($font-size);
    background-image: url(#{map.get($sprite, svgpath)});
    background-position: em(map.get($iconMap, x)) em(map.get($iconMap, y));
    background-size: em($spriteWidth) em($spriteHeight);
    content: "";
  }
}

// * Icons as inline SVG
// =============================================================================

// ** Ensure clean positioning of icons in links

@mixin i-link {
  display: inline-flex;
  align-items: center;
}

// ** Default icon styles

@mixin i-icon {
  position: relative;
  bottom: .15ex; // prevent bottom cut-off
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  stroke-width: 0;
  stroke: transparent; // only use fill, no strokes
  fill: currentcolor; // inherit the parent color
}
