follow-button.scss 795 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. .follow-button {
  2. display: inline-flex;
  3. align-items: center;
  4. justify-content: center;
  5. padding: 8px 16px;
  6. border-radius: 20px;
  7. font-size: 0.875rem;
  8. font-weight: 600;
  9. white-space: nowrap;
  10. cursor: pointer;
  11. transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  12. border: 1px solid transparent;
  13. &--default {
  14. background: #3b82f6;
  15. color: #fff;
  16. &:hover:not(:disabled) {
  17. background: #2563eb;
  18. }
  19. }
  20. &--following {
  21. background: transparent;
  22. color: var(--fg-default, #0f0f0f);
  23. border-color: var(--border-default, #e5e7eb);
  24. &:hover:not(:disabled) {
  25. background: rgba(220, 38, 38, 0.08);
  26. color: #dc2626;
  27. border-color: rgba(220, 38, 38, 0.3);
  28. &::after {
  29. content: ' 해제';
  30. }
  31. }
  32. }
  33. &:disabled {
  34. opacity: 0.6;
  35. cursor: not-allowed;
  36. }
  37. }