payButton.scss 948 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // 결제 버튼 (노랑)
  2. // 다크 모드: 보라
  3. .pay-button {
  4. position: relative;
  5. display: inline-flex;
  6. align-items: center;
  7. justify-content: center;
  8. width: 100%;
  9. height: 52px;
  10. padding: 0 24px;
  11. border-radius: 6px;
  12. background-color: #FFD700;
  13. color: #333;
  14. font-weight: 700;
  15. font-size: 16px;
  16. letter-spacing: 0.02em;
  17. border: none;
  18. cursor: pointer;
  19. outline: none;
  20. &:hover:not(:disabled) {
  21. background-color: #FFC400;
  22. }
  23. &:focus-visible {
  24. outline: 2px solid #FFC400;
  25. outline-offset: 2px;
  26. }
  27. &:disabled {
  28. opacity: 0.55;
  29. cursor: not-allowed;
  30. }
  31. &__label {
  32. display: inline-flex;
  33. align-items: center;
  34. gap: 8px;
  35. }
  36. // 상태별로 라벨만 노출 (spinner/check 비활성)
  37. &__spinner,
  38. &__check {
  39. display: none;
  40. }
  41. }
  42. // 다크 모드
  43. html.dark .pay-button {
  44. background-color: #9333ea;
  45. color: #fff;
  46. &:hover:not(:disabled) {
  47. background-color: #7e22ce;
  48. }
  49. &:focus-visible {
  50. outline-color: #7e22ce;
  51. }
  52. }