@use 'variables';

$assetsPath: variables.$assetsPath !default;

$emoji-flag-unicode-range: U+1F1E6-1F1FF;

/* png based woff for most browsers */
@font-face {
  font-family: ReplaceFlagEmojiPNG;
  src: url('#{$assetsPath}/NotoColorEmoji-flags.woff2') format('woff2');
  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
  unicode-range: $emoji-flag-unicode-range;
}

/* svg based for firefox */
@font-face {
  font-family: ReplaceFlagEmojiSVG;
  src: url('#{$assetsPath}/EmojiOneColor.woff2') format('woff2');
  unicode-range: $emoji-flag-unicode-range;
}

.str-chat--windows-flags {
  // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
  .str-chat__textarea__textarea, // class name from theme v1
  .str-chat__message-textarea,
  .str-chat__message-text-inner *,
  .str-chat__emoji-item--entity,
  .emoji-mart-emoji-native * {
    font-family: ReplaceFlagEmojiPNG, var(--str-chat__font-family), sans-serif;
    font-display: swap;
  }
}

@-moz-document url-prefix('') {
  .str-chat--windows-flags {
    .str-chat__textarea__textarea, // class name from theme v1
    .str-chat__message-textarea,
    .str-chat__message-text-inner *,
    .str-chat__emoji-item--entity,
    .emoji-mart-emoji-native * {
      font-family: ReplaceFlagEmojiSVG, var(--str-chat__font-family), sans-serif;
      font-display: swap;
    }
  }
}