.avatar {
  &.online {
    &:before {
      content: "";
      @apply bg-success outline-base-100 absolute z-10 block rounded-full outline outline-2;
      width: 15%;
      height: 15%;
      top: 7%;
      right: 7%;
    }
  }
  &.offline {
    &:before {
      content: "";
      @apply bg-base-300 outline-base-100 absolute z-10 block rounded-full outline outline-2;
      width: 15%;
      height: 15%;
      top: 7%;
      right: 7%;
    }
  }
}
