/* ============================================================
   Icons — Qiscus DS 2026 (subset used by the LDAP reset portal)
   CSS-mask icons that adopt currentColor. 24x24 grid, 1.5px stroke.
   Usage: <i class="ic ic--20 ic-key" aria-hidden="true"></i>
   ============================================================ */

.ic {
  display: inline-block;
  width: var(--ic-size, 16px);
  height: var(--ic-size, 16px);
  background-color: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
}

.ic--12 { width: 12px; height: 12px; }
.ic--14 { width: 14px; height: 14px; }
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--20 { width: 20px; height: 20px; }
.ic--24 { width: 24px; height: 24px; }
.ic--28 { width: 28px; height: 28px; }
.ic--32 { width: 32px; height: 32px; }

.ic-alert-circle      { -webkit-mask-image: url('icons/alert-circle.svg');      mask-image: url('icons/alert-circle.svg'); }
.ic-check             { -webkit-mask-image: url('icons/check.svg');             mask-image: url('icons/check.svg'); }
.ic-chevron-left      { -webkit-mask-image: url('icons/chevron-left.svg');      mask-image: url('icons/chevron-left.svg'); }
.ic-clock             { -webkit-mask-image: url('icons/clock.svg');             mask-image: url('icons/clock.svg'); }
.ic-email-notification{ -webkit-mask-image: url('icons/email-notification.svg');mask-image: url('icons/email-notification.svg'); }
.ic-help              { -webkit-mask-image: url('icons/help.svg');              mask-image: url('icons/help.svg'); }
.ic-key               { -webkit-mask-image: url('icons/key.svg');               mask-image: url('icons/key.svg'); }
.ic-message           { -webkit-mask-image: url('icons/message.svg');           mask-image: url('icons/message.svg'); }
.ic-refresh           { -webkit-mask-image: url('icons/refresh.svg');           mask-image: url('icons/refresh.svg'); }
.ic-user              { -webkit-mask-image: url('icons/user.svg');              mask-image: url('icons/user.svg'); }
.ic-view-off          { -webkit-mask-image: url('icons/view-off.svg');          mask-image: url('icons/view-off.svg'); }
.ic-view-on           { -webkit-mask-image: url('icons/view-on.svg');           mask-image: url('icons/view-on.svg'); }
.ic-warning           { -webkit-mask-image: url('icons/warning.svg');           mask-image: url('icons/warning.svg'); }