Focus Status Avatar

<!-- data-state: "dnd" | "away" | "busy" -->
<div class="nuda-av2-focus" data-state="dnd">
  <span class="nuda-av2-focus__avatar" style="background:linear-gradient(135deg,#9d6dff,#62b6ff)">R</span>
  <span class="nuda-av2-focus__badge" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
    </svg>
  </span>
  <span class="nuda-av2-focus__label">Do Not Disturb</span>
</div>

.nuda-av2-focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 44px;
}

.nuda-av2-focus__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.nuda-av2-focus__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: _nuda-av2focuspop .4s cubic-bezier(.34,1.56,.64,1) both;
}

.nuda-av2-focus__badge svg {
  width: 9px;
  height: 9px;
}

.nuda-av2-focus[data-state="away"] .nuda-av2-focus__badge {
  background: #f59e0b;
}

.nuda-av2-focus[data-state="busy"] .nuda-av2-focus__badge {
  background: #ef4444;
}

.nuda-av2-focus__label {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  color: #cfcfcf;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s,transform .25s cubic-bezier(.16,1,.3,1);
}

.nuda-av2-focus:hover .nuda-av2-focus__label,.nuda-av2-focus:focus-within .nuda-av2-focus__label {
  opacity: 1;
  transform: translateX(0);
}

@keyframes _nuda-av2focuspop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-av2-focus__badge {
    animation: none;
  }
  .nuda-av2-focus__label {
    transition: none;
  }
}