/* ===========================================
   Staff: what only a superadmin sees.
   Neutral buttons in a thin aurora ring, so it can't read as a status: blue, purple,
   green, red and amber all mean something already. The ring stands still, and turns
   on hover and through a "View as" preview. Amber stays for real warnings.
   =========================================== */

@property --staff-ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root { --staff-hover: color-mix(in srgb, var(--raised), var(--c-fg) 6%); }

.btn-staff { position: relative; background: var(--raised); color: var(--label-1); }
.btn-staff:hover { background: var(--staff-hover); }

.btn-staff::before,
.superadmin-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--staff-ring), var(--staff-1), var(--staff-2), var(--staff-3), var(--staff-1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* The sidebar's Superadmin group: the sidebar sets its color, so this has to name it. */
.sidebar-nav .sidebar-group-label.staff-label {
    width: fit-content;
    background: linear-gradient(90deg, var(--staff-1), var(--staff-2), var(--staff-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Across the top of the page while a role is previewed. */
.preview-line {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--staff-1), var(--staff-2), var(--staff-3), var(--staff-1)) 0 0 / 200% 100%;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .btn-staff:hover::before,
    .superadmin-btn:hover::before,
    .view-as-btn.current::before { animation: staff-ring-turn 6s linear infinite; }
    .preview-line { animation: staff-line-flow 6s linear infinite; }
}
@keyframes staff-ring-turn { to { --staff-ring: 360deg; } }
@keyframes staff-line-flow { to { background-position: -200% 0; } }