/* ========================================================== Mintlify private-space Login/Logout button — icon-only, floating button pinned to the bottom-right corner. Targets the auto-generated .login-link / .logout-link elements, which script.js moves into #auth-fab-dock. ========================================================== */ #auth-fab-dock { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .auth-fab { position: relative; /* anchors the tooltip below */ display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #ffffff; color: #373737; /* icon color */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-size: 0; /* hides the "Log In" / "Log Out" text */ gap: 0; transition: box-shadow 0.15s ease, background 0.15s ease; } /* Hover tooltip label */ .auth-fab::after { content: attr(data-tooltip); position: absolute; bottom: 52px; /* sits above the button */ right: 0; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 6px; background: #ff9b8a; color: #373737; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; pointer-events: none; } .auth-fab:hover::after { opacity: 1; visibility: visible; transform: translateY(0); } .login-link.auth-fab { /* fallback if data-tooltip isn't set via JS for some reason */ } .dark .auth-fab::after { background: #ff9b8a; color: #373737; } .auth-fab:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); background: #f3f4f6; color: #373737; } .dark .auth-fab { background: #1f2937; color: #373737; /* icon color */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .dark .auth-fab:hover { background: #374151; color: #373737; } .auth-fab::before { content: ""; display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Login icon: an arrow entering a doorway */ .login-link.auth-fab::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Logout icon: an arrow exiting a doorway (mirrored) */ .logout-link.auth-fab::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }