// icons courtesy of https://material.io/icons/

$camera: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 -10 50 50"><circle cx="25" cy="23" r="3.2"/><path d="M22 13l-1.83 2H17c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V17c0-1.1-.9-2-2-2h-3.17L28 13h-6zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path fill="none" d="M13 11h24v24H13z"/></svg>';

// status upload image
._50uu {
  @include background-svg($camera);
}

$video: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 50 50"><path fill="none" d="M13 26h24v24H13z"/><path d="M30 31.5V28c0-.55-.45-1-1-1H17c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>';

// status upload video
._50uw {
  @include background-svg($video);
}

$like: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
$like_selected: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$accent}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

// 2018/12/29
// Previously ._15km ._15ko::before and ._15km ._15ko._77la::before; however, reaction changes no longer affect this element
// The robust measure seems to be the parent of a[data-sigil~="like-reaction-flyout"] along with [data-sigil~="like"] for an unliked post
// and [data-sigil~="unlike"] for a liked post
a._15ko::before {
  @include background-svg($like);
  background-position: center !important;
}

a._15ko._77la::before {
  @include background-svg($like_selected);
  background-position: center !important;
}

$comment: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path fill="none" d="M0 0h24v24H0z"/></svg>';

._15km ._15kq::before {
  @include background-svg($comment);
  background-position: center !important;
}

$share: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path d="M14 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z"/><path fill="none" d="M24 0H0v24h24z"/></svg>';

._15km ._15kr::before {
  @include background-svg($share);
  background-position: center !important;
}

$more_horiz: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#{$text}" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>';

//$menus: ".sp_89zNula0Qh5",
//".sp_MP2OtCXORz9",
//".sp_NIWBacTn8LF",
//// 2018/12/31
//".sp_9ZFVhnFyWsw",
//// 2019/01/03
//".sp_SJIJjSlGEIO";
//
//$menu_collector: ();
//
//@each $menu in $menus {
//  $menu_collector: append($menu_collector, unquote('#{$menu}'), 'comma');
//  $menu_collector: append($menu_collector, unquote('#{$menu}_2x'), 'comma');
//  $menu_collector: append($menu_collector, unquote('#{$menu}_3x'), 'comma');
//}
//
//#{$menu_collector} {
//  @include background-svg($more_horiz);
//  background-position: center !important;
//}

.story_body_container i.img[data-sigil*="story-popup-context"] {
  @include background-svg($more_horiz);
  background-position: center !important;
}