.nav-header__bag-icon {
  position: absolute;
  top: -1px;
  right: -32px;
  width: 40px;
  height: 39px;
  background-image: url('#{$fear-core-ui-images-dir}/global/bookmark/bookmark-x1.png');
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 40px 39px;
  /* could potentially be put in a mixin */
  @media all and (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    background-image: url('#{$fear-core-ui-images-dir}/global/bookmark/bookmark-x2.png');
  }

  @media all and (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url('#{$fear-core-ui-images-dir}/global/bookmark/bookmark-x3.png');
  }

  .icon--bag {
    @include rem('font-size', 19px);
    @include rem('left', 12px);
    @include rem('top', 6px);
    position: absolute;
    color: $color__brand--black;
  }
}