Have a better CSS utility classes [.hidden-anonymous] to Hide for anonymous users and [.visible-logged-in, .visible-admin] to Show only for admin users

Used in empty logged in users - varbase media hero slider

Used in empty not logged in users - varbase media hero slider

For Example they could be used for

<p> Media Hero Slider </p>
<p> There are no slides right now! </p>
<a class="btn btn-primary hidden-anonymous visible-admin add-slider" href="[site:url]/node/add/varbase_heroslider_media/"> Add One Now </a>

in the Configure No results behavior: Global: Text area

// Hide for anonymous users.
.hidden-anonymous,
.visible-admin,
.visible-logged-in {
  display: none !important;
}

// Show only for logged in users.
body.user-logged-in {
  .visible-admin,
  .visible-logged-in,
  .hidden-anonymous {
    display: inline-block !important;
  }

  .btn {
    .visible-admin,
    .visible-logged-in, 
    .hidden-anonymous {
      display: inline-block !important;
    }
  }
}