/* YaChat icon pack selected from the supplied 37-cell sheet. PNG alpha is used as a currentColor mask,
   so the same source stays black in the light theme, light in the dark theme,
   and inherits every existing accent, success, warning, or danger colour. */
.ui-pack-icon {
  --ui-icon-size: 1.25em;
  display: inline-block;
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  min-width: 0;
  flex: 0 0 auto;
  vertical-align: -.18em;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-mask);
  mask-image: var(--ui-icon-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ui-pack-icon--users { --ui-icon-mask: url("./ui-icon-pack/01-users.png"); }
.ui-pack-icon--phone { --ui-icon-mask: url("./ui-icon-pack/02-phone.png"); }
.ui-pack-icon--message-square { --ui-icon-mask: url("./ui-icon-pack/03-message-square.png"); }
.ui-pack-icon--settings { --ui-icon-mask: url("./ui-icon-pack/04-settings.png"); }
.ui-pack-icon--link { --ui-icon-mask: url("./ui-icon-pack/05-link.png"); }
.ui-pack-icon--bell { --ui-icon-mask: url("./ui-icon-pack/06-bell.png"); }
.ui-pack-icon--lock { --ui-icon-mask: url("./ui-icon-pack/07-lock.png"); }
.ui-pack-icon--devices { --ui-icon-mask: url("./ui-icon-pack/08-devices.png"); }
.ui-pack-icon--bookmark { --ui-icon-mask: url("./ui-icon-pack/10-bookmark.png"); }
.ui-pack-icon--folder { --ui-icon-mask: url("./ui-icon-pack/11-folder.png"); }
.ui-pack-icon--broadcast { --ui-icon-mask: url("./ui-icon-pack/12-broadcast.png"); }
.ui-pack-icon--database { --ui-icon-mask: url("./ui-icon-pack/13-database.png"); }
.ui-pack-icon--magic-wand { --ui-icon-mask: url("./ui-icon-pack/14-magic-wand.png"); }
.ui-pack-icon--globe { --ui-icon-mask: url("./ui-icon-pack/15-globe.png"); }
.ui-pack-icon--briefcase { --ui-icon-mask: url("./ui-icon-pack/16-briefcase.png"); }
.ui-pack-icon--help { --ui-icon-mask: url("./ui-icon-pack/17-help.png"); }
.ui-pack-icon--info { --ui-icon-mask: url("./ui-icon-pack/18-info.png"); }
.ui-pack-icon--apps-rounded { --ui-icon-mask: url("./ui-icon-pack/19-apps-rounded.png"); }
.ui-pack-icon--edit { --ui-icon-mask: url("./ui-icon-pack/20-edit.png"); }
.ui-pack-icon--reply { --ui-icon-mask: url("./ui-icon-pack/21-reply.png"); }
.ui-pack-icon--share { --ui-icon-mask: url("./ui-icon-pack/22-share.png"); }
.ui-pack-icon--message-notification { --ui-icon-mask: url("./ui-icon-pack/23-message-notification.png"); }
.ui-pack-icon--megaphone { --ui-icon-mask: url("./ui-icon-pack/24-megaphone.png"); }
.ui-pack-icon--alert { --ui-icon-mask: url("./ui-icon-pack/25-alert.png"); }
.ui-pack-icon--trash { --ui-icon-mask: url("./ui-icon-pack/26-trash.png"); }
.ui-pack-icon--check { --ui-icon-mask: url("./ui-icon-pack/27-check.png"); }
.ui-pack-icon--paperclip { --ui-icon-mask: url("./ui-icon-pack/29-paperclip.png"); }
.ui-pack-icon--smile { --ui-icon-mask: url("./ui-icon-pack/30-smile.png"); }
.ui-pack-icon--microphone { --ui-icon-mask: url("./ui-icon-pack/31-microphone.png"); }
.ui-pack-icon--key { --ui-icon-mask: url("./ui-icon-pack/34-key.png"); }
.ui-pack-icon--send { --ui-icon-mask: url("./ui-icon-pack/send-arrow.png"); }

.ui-pack-icon.is-down { transform: rotate(90deg); }
.ui-pack-icon.is-download { transform: rotate(90deg); }

.css-icon > .ui-pack-icon,
.messenger-rail .rail-button .css-icon > .ui-pack-icon,
.composer-tool .css-icon > .ui-pack-icon,
.send-button .css-icon > .ui-pack-icon {
  width: 100%;
  height: 100%;
}

/* Hydrated legacy hooks remain useful selectors, but their old CSS drawings
   must not sit underneath the supplied raster mask. */
.css-icon[class*="gg-"] {
  background: none !important;
}

.css-icon[class*="gg-"]::before,
.css-icon[class*="gg-"]::after {
  content: none !important;
  display: none !important;
}

.messenger-rail .ui-pack-icon { --ui-icon-size: 26px; vertical-align: 0; }
.side-panel .ui-pack-icon { --ui-icon-size: 27px; vertical-align: 0; }
.settings-row-icon > .ui-pack-icon,
.settings-security-status > span > .ui-pack-icon,
.settings-device > span > .ui-pack-icon,
.settings-storage-meter > span > .ui-pack-icon,
.settings-primary > .ui-pack-icon,
.personal-data-row-icon > .ui-pack-icon,
.personal-data-privacy-icon > .ui-pack-icon { --ui-icon-size: 26px; }
.settings-row-chevron,
.side-panel .settings-row-chevron { --ui-icon-size: 18px; }
.button-icon,
.message-status-icon,
.side-panel .button-icon { --ui-icon-size: 18px; }
.action-feedback-icon { --ui-icon-size: 20px; }
.message-context-menu .ui-pack-icon { --ui-icon-size: 24px; vertical-align: 0; }
.chat-profile-actions .ui-pack-icon { --ui-icon-size: 31px; vertical-align: 0; }
.voice-start-button > .ui-pack-icon,
.voice-cancel-button > .ui-pack-icon,
.voice-finish-button > .ui-pack-icon,
.voice-send-button > .ui-pack-icon { --ui-icon-size: 25px; }
.voice-pause-button > .ui-pack-icon,
.voice-review-player [data-voice-play] > .ui-pack-icon,
.voice-message-player [data-voice-play] > .ui-pack-icon { --ui-icon-size: 20px; }

:root[data-theme="dark"] .ui-pack-icon {
  /* Explicit for forced-colour/embedded browser modes; normal colour still
     comes from the control and preserves painted states. */
  forced-color-adjust: none;
}

@media (forced-colors: active) {
  .ui-pack-icon { background-color: ButtonText; }
}