////////////////////// INSTRUCTIONS //////////////////////
/////   1. copy new icon into ./vectors/             /////
/////   2. cd src/global_stylesheets/fontcustom/     /////
/////   3. run `fontcustom compile`                  /////
/////   4. add icon selector to stylesheet below     /////
//////////////////////////////////////////////////////////

@import "./stylesheets/mo-display-font-icons";
@import "./stylesheets/mo-display-icon-font";

@mixin icon($position: before, $icon: false, $styles: true) {
  @if $position == both {
    $position: "before, &:after";
  }
  &:#{$position} {
    @if $icon {
      content: "#{map-get($font-icons, $icon)}";
    }
    @if $styles {
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-family: mo-display-icons;
    }
    @content;
  }
}

.mo-display-icon- {
  &phone {
    @include icon(before, icon-phone);
  }

  &envelope {
    @include icon(before, icon-envelope);
  }

  &instagram {
    @include icon(before, icon-instagram);
  }

  &facebook {
    @include icon(before, icon-facebook);
  }

  &amazon {
    @include icon(before, icon-amazon);
  }

  &twitter {
    @include icon(before, icon-twitter);
  }

  &pinterest {
    @include icon(before, icon-pinterest);
  }

  &arrow_md_right {
    @include icon(before, icon-arrow_md_right);
  }

  &plus {
    @include icon(before, icon-plus);
  }

  &checkmark {
    @include icon(before, icon-checkmark);
  }

  &exclamation-circle {
    @include icon(before, icon-exclamation-circle);
  }

  &arrow_lg_down {
    @include icon(before, icon-arrow_lg_down);
  }

  &arrow_lg_up {
    @include icon(before, icon-arrow_lg_up);
  }

  &arrow_md_down {
    @include icon(before, icon-arrow_md_down);
  }

  &arrow_md_up {
    @include icon(before, icon-arrow_md_up);
  }

  &arrow_sm_down {
    @include icon(before, icon-arrow_sm_down);
  }

  &arrow_sm_up {
    @include icon(before, icon-arrow_sm_up);
  }

  &search_app {
    @include icon(before, icon-search_app);
  }

  &search_web {
    @include icon(before, icon-search_web);
  }

  &arrow_sm_left {
    @include icon(before, icon-arrow_sm_left);
  }

  &arrow_sm_right {
    @include icon(before, icon-arrow_sm_right);
  }

  &heart {
    @include icon(before, icon-heart);
  }

  &heart_filled {
    @include icon(before, icon-heart_filled);
  }

  &timer {
    @include icon(before, icon-timer);
  }

  &shipping {
    @include icon(before, icon-shipping);
  }

  &deposit {
    @include icon(before, icon-deposit);
  }

  &close_lg {
    @include icon(before, icon-close_lg);
  }

  &preorder {
    @include icon(before, icon-preorder);
  }

  &returns {
    @include icon(before, icon-returns);
  }

  &returns_2 {
    @include icon(before, icon-returns_2);
  }

  &size {
    @include icon(before, icon-size);
  }

  &question {
    @include icon(before, icon-question);
  }
}