.avatar {
  &.online {
    &:before {
      content: "";
      @apply absolute z-10 block rounded-full bg-success;
      width: 15%;
      height: 15%;
      top: 7%;
      right: 7%;
      box-shadow: 0 0 0 2px hsl(var(--b1));
    }
  }
  &.offline {
    &:before {
      content: "";
      @apply absolute z-10 block rounded-full bg-base-300;
      width: 15%;
      height: 15%;
      top: 7%;
      right: 7%;
      box-shadow: 0 0 0 2px hsl(var(--b1));
    }
  }
}
