@use './svelte-components/config' as components;
@use './svelte-components/utils' as *;

// Exported configuration, merged with the base configuration.
//
// prettier-ignore
$config: config-merge(components.$config, (
  // Valid CSS variables
  css-vars: (
    app: (
      // Scrollbar
      --t-scrollbar-thumb-color,
      --t-scrollbar-thumb-color--hover,

      // Global
      --t-text-e1-color,
      --t-text-e2-color,
      --t-text-e3-color,
      --t-text-anchor-color,
      --t-primary-text-anchor-color,
      --t-color-primary,
      --t-color-success,

      // Palette
      --t-color-primary-50,
      --t-color-primary-100,
      --t-color-primary-200,
      --t-color-primary-300,
      --t-color-primary-400,
      --t-color-primary-500,
      --t-color-primary-600,
      --t-color-primary-700,
      --t-color-primary-800,
      --t-color-primary-900,

      // Main panels
      --t-panel-gap-color,
      --t-nav-background-color,
      --t-main-background-color,
      --t-aside-background-color,
      --t-pairing-background-color,

      // Main Welcome
      --t-main-welcome-icon-color,
    ),

    individual-components: (
      // List Element
      --ic-list-element-background-color--hover,
      --ic-list-element-color,

      // Divider
      --ic-divider-background-color,

       // ContactNavigationContext Button
      --ic-contact-navigation-context-button-color,
      --ic-contact-navigation-context-button-border-color--hover,
      --ic-contact-navigation-context-button-background-color--hover,
      --ic-contact-navigation-context-button-border-color--focus,
      --ic-contact-navigation-context-button-background-color--focus,
      --ic-contact-navigation-context-button-color--active,
      --ic-contact-navigation-context-button-border-color--active,
      --ic-contact-navigation-context-button-background-color--active,
      --ic-contact-navigation-context-button-opacity--disabled,

      // Swipe area
      --ic-swipe-area-main-size,
      --ic-swipe-area-left-size,
      --ic-swipe-area-right-size,

      // Swipe area button
      --ic-swipe-area-button-background-color,
      --ic-swipe-area-button-background-color--hover,
      --ic-swipe-area-button-background-color--active,
      --ic-swipe-area-button-outline--focus,
      --ic-swipe-area-button-icon-color,
      --ic-swipe-area-button-name-color,

      // Tooltip
      --ic-tooltip-background-color,
      --ic-tooltip-color,
      --ic-tooltip-box-shadow,
      --ic-tooltip-chevron-drop-shadow-filter,
    ),

    message-components: (
      // Message footer
      --mc-message-indicator-label,
      --mc-message-indicator-column-gap,
      --mc-message-indicator-icon-size,

      // General message container
      --mc-message-hover-background-color,
      --mc-message-border-radius,
      --mc-message-background-color-incoming,
      --mc-message-background-color-incoming-nav,
      --mc-message-background-color-outgoing,
      --mc-message-background-color-outgoing-nav,
      --mc-message-highlight-overlay-color,
      --mc-message-badge-color,
      --mc-message-badge-background-color,
      --mc-message-overlay-background-color,
      --mc-message-overlay-button-color,
      --mc-message-overlay-button-background-color,
      --mc-message-overlay-button-background-color--hover,
      --mc-message-overlay-button-background-color--focus,
      --mc-message-overlay-button-background-color--active,
      --mc-message-mention-background-color,
      --mc-message-mention-color,
      --mc-message-mention-me-background-color,
      --mc-message-mention-me-color,
      --mc-message-quote-border-width,
      --mc-message-quote-text-color,
      --mc-message-quote-background-color--hover,

      // Poll message
      --mc-message-poll-choice-color--disabled,
      --mc-message-poll-track-color--disabled,

      // File Message
      --mc-message-file-icon-background-image,
      --mc-message-file-icon-width,
      --mc-message-file-icon-height,
      --mc-message-file-info-column-gap,
      --mc-message-file-info-row-gap,
      --mc-message-file-icon-font-size,
      --mc-message-file-icon-font-color,
      --mc-message-file-size-color,

      // Image message
      --mc-message-image-placeholder-background-color,

      // Message status
      --mc-message-status-acknowledged-color,
      --mc-message-status-declined-color,
      --mc-message-status-error-color,

      // Status Message
      --mc-status-message-background-color,
    ),

    compound-components: (
      // Profile picture upload
      --cc-profile-picture-upload-background-color,

      // Profile picture overlay
      --cc-profile-picture-overlay-background-color,
      --cc-profile-picture-overlay-unread-background-color,
      --cc-profile-picture-overlay-unread-text-color,
      --cc-profile-picture-overlay-badge-size,
      --cc-profile-picture-overlay-badge-icon-size,
      --cc-profile-picture-overlay-badge-icon-color,
      --cc-profile-picture-overlay-badge-icon-consumer-color,
      --cc-profile-picture-overlay-badge-icon-work-color,

      // ProfilePictureButton
      --cc-profile-picture-button-background-color,
      --cc-profile-picture-button-box-shadow-color,
      --cc-profile-picture-button-box-shadow-color--hover,
      --cc-profile-picture-button-counter-background-color,
      --cc-profile-picture-button-counter-text-color,
      --cc-profile-picture-button-text-color,

      // Conversation
      --cc-conversation-header-background-color,
      --cc-conversation-message-options-caret-color,

      // Conversation preview
      --cc-conversation-preview-background-color,
      --cc-conversation-preview-background-color--hover,
      --cc-conversation-preview-background-color--active,
      --cc-conversation-preview-draft-text-color,
      --cc-conversation-preview-properties-background-color,
      --cc-conversation-preview-properties-call-background-color,
      --cc-conversation-preview-properties-call-background-color--hover,
      --cc-conversation-preview-properties-call-text-color,
      --cc-conversation-preview-properties-call-joined-background-color,
      --cc-conversation-preview-properties-call-joined-text-color,
      --cc-conversation-preview-properties-icon-color,
      --cc-conversation-preview-properties-icon-pin-color,
      --cc-conversation-preview-message-text-color,
      --cc-conversation-preview-status-text-color,
      --cc-conversation-preview-swipe-area-button-gap,

      // Chat view
      --cc-chat-scroll-to-bottom-button-color,
      --cc-chat-scroll-to-bottom-button-background-color,
      --cc-chat-scroll-to-bottom-button-background-color--hover,
      --cc-chat-scroll-to-bottom-button-background-color--focus,
      --cc-chat-scroll-to-bottom-button-background-color--active,

      // Contact details
      --cc-contact-details-badge-consumer-text-color,
      --cc-contact-details-badge-consumer-background-color,
      --cc-contact-details-badge-work-text-color,
      --cc-contact-details-badge-work-background-color,

      // DropZoneProvider
      --cc-drop-zone-provider-border-color,
      --cc-drop-zone-provider-background-color,

      // Receiver
      --cc-contact-status-tag-background-color,
      --cc-contact-status-tag-text-color,

      // Switch
      --cc-switch-thumb-color,
      --cc-switch-thumb-color--disabled,
      --cc-switch-thumb-color-off,
      --cc-switch-thumb-color-off--disabled,
      --cc-switch-track-color,
      --cc-switch-track-color--disabled,
      --cc-switch-track-color-off,
      --cc-switch-track-color-off--disabled,
      --cc-switch-thumb-glow-color,
      --cc-switch-thumb-glow-color--active,
      --cc-switch-thumb-glow-border-color,

      // Search input
      --cc-search-input-background-color,
      --cc-search-input-background-color--focus,
      --cc-search-input-background-border-color--focus,
      --cc-search-input-text-color,
      --cc-search-input-placeholder-text-color,
      --cc-search-input-icon-color,
      --cc-search-input-icon-color--hover,

      // Menu items
      --cc-menu-item-icon-text-background-color--hover,
      --cc-menu-item-icon-text-background-color--active,

      // Compose area
      --cc-compose-area-placeholder-text-color,
      --cc-compose-area-padding,
      --cc-compose-area-margin,
      --cc-compose-area-quote-background-color,

      // Compose bar
      --cc-compose-bar-bytes-count-exceeded-color,

      // Emoji picker
      --cc-emoji-picker-tab-button-background-color--hover,
      --cc-emoji-picker-tab-button-color,
      --cc-emoji-picker-tab-button-color--active,
      --cc-emoji-picker-emoji-button-background-color--hover,
      --cc-emoji-picker-emoji-button-background-color--focus,
      --cc-emoji-picker-emoji-button-background-color--active,
      --cc-emoji-picker-emoji-button-border-color--focus,
      --cc-emoji-picker-customizer-background-color,
      --cc-emoji-picker-customizer-box-shadow,
      --cc-emoji-picker-customizer-handle-box-shadow,

      // Emoji Picker
      --cc-emoji-picker-popover-background-color,
      --cc-emoji-picker-popover-box-shadow--hidden,
      --cc-emoji-picker-popover-box-shadow--visible,

      // Emoji reactions strip
      --cc-emoji-reactions-strip-bucket-background-color,
      --cc-emoji-reactions-strip-bucket-background-color--active,
      --cc-emoji-reactions-strip-bucket-background-color--active--hover,
      --cc-emoji-reactions-strip-bucket-color,
      --cc-emoji-reactions-strip-bucket-border-color,
      --cc-emoji-reactions-strip-bucket-border-color--hover,
      --cc-emoji-reactions-strip-bucket-border-color--active,

      // Emoji reactions favorite box
      --cc-emoji-reactions-favorite-box-item-background-color--hover,
      --cc-emoji-reactions-favorite-box-item-background-color--active,
      --cc-emoji-reactions-favorite-box-item-background-color--active--hover,
      --cc-emoji-reactions-favorite-box-item-opacity--disabled,

      // Modal dialog
      --cc-modal-dialog-background-color-rgb-triplet,
      --cc-modal-dialog-background-color,

      // Media Message Modal
      --cc-media-message-background-color,
      --cc-media-message-active-file-chip-background-color,
      --cc-media-message-active-file-chip-text-color,
      --cc-media-message-file-type-text-color,
      --cc-media-message-file-type-background-image,
      --cc-media-message-active-file-options-background-color,
      --cc-media-message-active-file-options-text-color,
      --cc-media-message-miniatures-background-color,
      --cc-media-message-miniatures-text-color,

      // Linking Wizard
      --cc-linking-wizard-error-message-background,

      // Call Activity Sidebar
      --cc-call-sidebar-title-color,
      --cc-call-sidebar--expanded-title-color,
      --cc-call-sidebar-subtitle-color,
      --cc-call-sidebar--expanded-subtitle-color,
      --cc-call-sidebar-action-icon-color,
      --cc-call-sidebar--expanded-action-icon-color,

      // Logo
      --cc-logo-progress-bar-fill-color,
    ),

    debug-components: (
      // Top bar
      --dc-top-bar-background-color,
      --dc-top-bar-border-color,
    ),
  ),

  // Emoji sources
  emoji: url('./res/fonts/twemoji/Twemoji.woff2') format('woff2'),

  // Material Icon sources
  material-icons: (
    src-filled: url('./res/fonts/material-icons/MaterialIcons-Filled.woff2') format('woff2'),
    src-outlined: url('./res/fonts/material-icons/MaterialIcons-Outlined.woff2') format('woff2')
  ),

  // Threema Icon sources
  threema-icons: (
    src-filled: url('./res/fonts/threema-icons/ThreemaIcons-Filled.woff2') format('woff2'),
    src-outlined: url('./res/fonts/threema-icons/ThreemaIcons-Outlined.woff2') format('woff2')
  ),
));
