// Characters to encode.
$encodings: (
  ('<', '%3C'),
  ('>', '%3E'),
  ('#', '%23'),
  ('"', '%22')
);
// Replaces $search in $string with $replace.
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}
// Returns background-image property value for icon.
@function get-icon($content, $viewBox) {
  $svg: '<svg viewBox="' + $viewBox + '" xmlns="http://www.w3.org/2000/svg">' + $content + '</svg>';
  @each $char, $encoded in $encodings {
    $svg: str-replace($svg, $char, $encoded);
  }
  @return url('data:image/svg+xml;charset=utf-8,' + $svg);
}

  // Function to generate the circle icon.
  @function get-icon-at($fill) {
    $content: '<path fill="#{$fill}" d="M1100 775q0-108-53.5-169t-147.5-61q-63 0-124 30.5t-110 84.5-79.5 137-30.5 180q0 112 53.5 173t150.5 61q96 0 176-66.5t122.5-166 42.5-203.5zm564 121q0 111-37 197t-98.5 135-131.5 74.5-145 27.5q-6 0-15.5.5t-16.5.5q-95 0-142-53-28-33-33-83-52 66-131.5 110t-173.5 44q-161 0-249.5-95.5t-88.5-269.5q0-157 66-290t179-210.5 246-77.5q87 0 155 35.5t106 99.5l2-19 11-56q1-6 5.5-12t9.5-6h118q5 0 13 11 5 5 3 16l-120 614q-5 24-5 48 0 39 12.5 52t44.5 13q28-1 57-5.5t73-24 77-50 57-89.5 24-137q0-292-174-466t-466-174q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51q228 0 405-144 11-9 24-8t21 12l41 49q8 12 7 24-2 13-12 22-102 83-227.5 128t-258.5 45q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q344 0 556 212t212 556z"/>';
    @return get-icon($content, '0 0 1792 1792');
  }



  .icon-at {
  background-image: get-icon-at(rgb(187, 68, 68));
  height: 48px;
  width: 48px;
}

.ib{
  transition: 0.2s;
}

.ib-24{
  width: 24px;
  height: 24px;

  @extend .ib;
}

.ib-18{
  width: 18px;
  height: 18px;

  @extend .ib;
}


.ib-close-24{
  background-image: url(./icons/24px/close-24px.svg);
  @extend .ib-24;
}

.ib-close-18{
  background-image: url(./icons/18px/close-18px.svg);
  @extend .ib-18;
}


.ib-academic-book-24{
  background-image: url(./icons/24px/academic-book-24px.svg);
  @extend .ib-24;
}

.ib-academic-book-18{
  background-image: url(./icons/18px/academic-book-18px.svg);
  @extend .ib-18;
}


.ib-close-24{
  background-image: url(./icons/24px/close-24px.svg);
  @extend .ib-24;
}

.ib-close-18{
  background-image: url(./icons/18px/close-18px.svg);
  @extend .ib-18;
}


.ib-arrow-switch-24{
  background-image: url(./icons/24px/arrow-switch-24px.svg);
  @extend .ib-24;
}

.ib-arrow-switch-18{
  background-image: url(./icons/18px/arrow-switch-18px.svg);
  @extend .ib-18;
}


.ib-chevron-double-right-24{
  background-image: url(./icons/24px/chevron-double-right-24px.svg);
  @extend .ib-24;
}

.ib-chevron-double-right-18{
  background-image: url(./icons/18px/chevron-double-right-18px.svg);
  @extend .ib-18;
}
