/**
 * Notification Container Styles
 * 
 * Standalone, reusable notification container component.
 * Supports multiple platform + browser + state combinations.
 * 
 * Usage:
 *   <div className="notification-container macos-chrome expanded">
 *     <!-- notification content -->
 *   </div>
 * 
 * Modifiers:
 *   - Platform: macos, ios, ipados, windows, android-mobile, android-tablet
 *   - Browser: chrome, firefox, edge, safari, opera
 *   - State: expanded, collapsed
 * 
 * Browser/device combinations are handled via import statements from the styles/
 * directory. Custom styles for these combinations do not need to be defined here.
 */

// Import base styles (common notification container structure)
@import './styles/_base';

// Import implemented platform + browser combinations
@import './styles/_macos-chrome';
@import './styles/_windows-chrome';
@import './styles/_android-mobile-chrome';
@import './styles/_android-mobile-firefox';
@import './styles/_android-mobile-edge';
@import './styles/_android-mobile-opera';
@import './styles/_android-tablet-chrome';
@import './styles/_android-tablet-firefox';
@import './styles/_android-tablet-edge';
@import './styles/_android-tablet-opera';
@import './styles/_ios';
@import './styles/_ipados';

// ============================================================================
// Placeholder styles for other platform + browser combinations
// These can be implemented as needed
// ============================================================================

// macOS + Firefox
.notification-container.macos-firefox {
  @extend .notification-container.macos-chrome;
}

// macOS + Safari
.notification-container.macos-safari {
  @extend .notification-container.macos-chrome;
}

// macOS + Edge
.notification-container.macos-edge {
  @extend .notification-container.macos-chrome;
}

// macOS + Opera
.notification-container.macos-opera {
  @extend .notification-container.macos-chrome;
}

// iOS and iPadOS styles are imported from _ios.scss and _ipados.scss
// All browsers on iOS/iPadOS use the same simple notification style

// Windows + Firefox - Reuse Windows Chrome styles
.notification-container.windows-firefox {
  @extend .notification-container.windows-chrome;
}

// Windows + Edge - Reuse Windows Chrome styles
.notification-container.windows-edge {
  @extend .notification-container.windows-chrome;
}

// Windows + Opera - Reuse Windows Chrome styles
.notification-container.windows-opera {
  @extend .notification-container.windows-chrome;
}
