@import '../../css/config/index.scss'; .bulk-action-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .bulk-action-modal { background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 500px; width: 90%; animation: slideIn 0.2s ease; .dark_theme & { background-color: #2a2a2a; color: #fff; } } @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .bulk-action-modal-content { padding: 24px; h3 { margin: 0 0 16px; font-size: 20px; font-weight: 600; color: #333; .dark_theme & { color: #fff; } } p { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: #555; .dark_theme & { color: #ccc; } } } .bulk-action-modal-buttons { display: flex; justify-content: flex-end; gap: 12px; } .bulk-action-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; &:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); } } .bulk-action-btn-cancel { background-color: #e0e0e0; color: #333; &:hover { background-color: #d0d0d0; } .dark_theme & { background-color: #444; color: #fff; &:hover { background-color: #555; } } } .bulk-action-btn-proceed { background-color: var(--default-theme-color, #009933); color: white; &:hover { background-color: var(--default-theme-color, #009933); opacity: 0.9; } .dark_theme & { background-color: var(--default-theme-color, #009933); &:hover { background-color: var(--default-theme-color, #009933); opacity: 0.9; } } }