.profile-actions { position: relative; display: inline-flex; align-items: center; } .profile-actions--sm { } .profile-actions__btn-group { display: flex; align-items: stretch; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .profile-actions__btn-group .follow-btn { border: none; border-radius: 999px 0 0 999px; min-width: 80px; } .profile-actions--sm .profile-actions__btn-group .follow-btn { min-width: 62px; } .profile-actions__menu-trigger { display: flex; align-items: center; justify-content: center; width: 34px; border: none; border-left: 1px solid var(--border); background: none; color: var(--text-h); cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s; border-radius: 0 999px 999px 0; } .profile-actions--sm .profile-actions__menu-trigger { width: 28px; font-size: 11px; } .profile-actions__menu-trigger:hover { background: var(--accent); color: #fff; } .profile-actions__menu-trigger.active { background: var(--accent); color: #fff; } .profile-actions__blocked-btn { padding: 6px 18px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-muted, #888); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; } .profile-actions--sm .profile-actions__blocked-btn { padding: 4px 14px; font-size: 12px; } .profile-actions__blocked-btn:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.08); } .profile-actions__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 150px; background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 100; overflow: hidden; animation: profile-actions-menu-in 0.12s ease-out; } @keyframes profile-actions-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .profile-actions__menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: none; background: none; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; transition: background 0.12s; text-align: left; } .profile-actions__menu-item:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.04)); } .profile-actions__menu-item--danger { color: #ef4444; } .profile-actions__menu-item--danger:hover { background: rgba(239, 68, 68, 0.08); } @media (prefers-color-scheme: dark) { .profile-actions__menu { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } }