@use "../00-config/00-variables" as *;
@use "../01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Sprite classes
// *
// * !!! 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-classes.scss
// *
////////////////////////////////////////////////////////////////////////////////

@if ($custom-icons == true and $custom-icons-type == "sprite") {
  // * Icons as background-image (always with 'rs-icon' as prefix and '-b' as suffix)
  // =============================================================================

  // ** these classes invoke the named svg icon as a background-image
  .rs-icon--angle-left--b {
    @include sprite((icon: "rs-icon--angle-left", size: 25));
  }
  .rs-icon--angle-right--b {
    @include sprite((icon: "rs-icon--angle-right", size: 25));
  }
  .rs-icon--angles-left--b {
    @include sprite((icon: "rs-icon--angles-left", size: 25));
  }
  .rs-icon--angles-right--b {
    @include sprite((icon: "rs-icon--angles-right", size: 25));
  }
  .rs-icon--bars--b {
    @include sprite((icon: "rs-icon--bars", size: 25));
  }
  .rs-icon--check--b {
    @include sprite((icon: "rs-icon--check", size: 25));
  }
  .rs-icon--chevron-down--b {
    @include sprite((icon: "rs-icon--chevron-down", size: 25));
  }
  .rs-icon--chevron-left--b {
    @include sprite((icon: "rs-icon--chevron-left", size: 25));
  }
  .rs-icon--chevron-right--b {
    @include sprite((icon: "rs-icon--chevron-right", size: 25));
  }
  .rs-icon--circle-check--b {
    @include sprite((icon: "rs-icon--circle-check", size: 25));
  }
  .rs-icon--circle-exclamation--b {
    @include sprite((icon: "rs-icon--circle-exclamation", size: 25));
  }
  .rs-icon--circle-question--b {
    @include sprite((icon: "rs-icon--circle-question", size: 25));
  }
  .rs-icon--envelope--b {
    @include sprite((icon: "rs-icon--envelope", size: 25));
  }
  .rs-icon--facebook-f--b {
    @include sprite((icon: "rs-icon--facebook-f", size: 25));
  }
  .rs-icon--file--b {
    @include sprite((icon: "rs-icon--file", size: 25));
  }
  .rs-icon--file-image--b {
    @include sprite((icon: "rs-icon--file-image", size: 25));
  }
  .rs-icon--file-pdf--b {
    @include sprite((icon: "rs-icon--file-pdf", size: 25));
  }
  .rs-icon--info-circle--b {
    @include sprite((icon: "rs-icon--info-circle", size: 25));
  }
  .rs-icon--instagram--b {
    @include sprite((icon: "rs-icon--instagram", size: 25));
  }
  .rs-icon--linkedin--b {
    @include sprite((icon: "rs-icon--linkedin", size: 25));
  }
  .rs-icon--lock--b {
    @include sprite((icon: "rs-icon--lock", size: 25));
  }
  .rs-icon--long-arrow-right--b {
    @include sprite((icon: "rs-icon--long-arrow-right", size: 25));
  }
  .rs-icon--move--b {
    @include sprite((icon: "rs-icon--move", size: 25));
  }
  .rs-icon--pinterest--b {
    @include sprite((icon: "rs-icon--pinterest", size: 25));
  }
  .rs-icon--print--b {
    @include sprite((icon: "rs-icon--print", size: 25));
  }
  .rs-icon--quote-left--b {
    @include sprite((icon: "rs-icon--quote-left", size: 25));
  }
  .rs-icon--search--b {
    @include sprite((icon: "rs-icon--search", size: 25));
  }
  .rs-icon--share-square--b {
    @include sprite((icon: "rs-icon--share-square", size: 25));
  }
  .rs-icon--triangle-exclamation--b {
    @include sprite((icon: "rs-icon--triangle-exclamation", size: 25));
  }
  .rs-icon--twitter--b {
    @include sprite((icon: "rs-icon--twitter", size: 25));
  }
  .rs-icon--xmark--b {
    @include sprite((icon: "rs-icon--xmark", size: 25));
  }
  .rs-icon--youtube--b {
    @include sprite((icon: "rs-icon--youtube", size: 25));
  }

  // * Icons as inline SVG (always with 'rs-icon' as prefix)
  // =============================================================================

  /**
  Example of use:
    In Twig:
      <a href="#!" class="rs-icon-link">

        A sample link with icon
      </a>
    This will display the 'usp' svg icon in this spot
    - 1st param: the (file) name of the original SVG icon (so it picks the correct one to display using the generated SVG sprite)
    - 2nd param: a string uses as the title-attribute in the generated html (setting to false, will use the capitalized file name)
    - 3rd param: (optional) an array of strings, will be printed as classes in the html, to add extra styling
                e.g. ['i-icon--xl', 'whatever']
  */

  // ** Ensure clean positioning of icons in links

  .rs-icon-link {
    @include i-link;
  }

  // ** Default icon styles

  .rs-icon {
    @include i-icon;
  }

  // ** Modifiers

  // -- default sizing presets
  .rs-icon--xs {
    @include i-icon--size(12);
  }

  .rs-icon--sm {
    @include i-icon--size(14);
  }

  .rs-icon--lg {
    @include i-icon--size(21);
  }

  // -- incremental icon sizing: .i-icon--2x through to .i-icon--10x
  /*
  @for $i from 1 through 10 {
    .rs-icon--#{$i}x {
      width: #{$i}rem;
      height: #{$i}rem;
    }
  }
  **/
}
