@import '~@capillarytech/cap-ui-library/styles/_variables';
@import './notification-container';

.webpush-preview-container {
  .preview-controls {
    display: flex;
    margin-bottom: 16px;

    .preview-control-os,
    .preview-control-browser,
    .preview-control-state {
      flex: 1;
      min-width: 0;
      
      > * {
        max-width: 100%;
      }
    }

    .preview-control-browser {
      margin-left: 16px;
    }

    .preview-control-label {
      margin-bottom: 8px;
      display: block;
      color: $FONT_COLOR_01;
    }
  }

  // Wrapper for disabled dropdown (State when Windows, or when stateDropdownDisabled)
  // Scoped under container to avoid conflicts; keeps controls visible but non-interactive
  .preview-control-disabled-wrapper {
    pointer-events: none;
    opacity: 0.6;
  }

  .preview-controls-compact {
    display: block;
    margin-bottom: 16px;

    .preview-control {
      display: inline-block;
      vertical-align: top;
      margin-right: 12px;
      width: auto;

      &:last-child {
        margin-right: 0;
      }

      > * {
        max-width: none;
      }
    }

    .preview-control-os,
    .preview-control-browser,
    .preview-control-state {
      flex: none;
      min-width: 0;
    }

    .preview-control-browser {
      margin-left: 0;
    }

    .preview-control-label {
      margin-bottom: 8px;
      display: block;
      color: $FONT_COLOR_01;
    }
  }

  .preview-controls-state {
    // Additional spacing below State dropdown when shown
    // This ensures proper spacing between State dropdown and notification preview
    margin-bottom: 16px;

    .preview-control-state {
      > * {
        max-width: 100%;
      }
    }

    .preview-control-label {
      margin-bottom: 8px;
      display: block;
      color: $FONT_COLOR_01;
    }
  }

  .preview-content {
    margin-bottom: 16px;

    .preview-content-wrapper {
      width: 100%;
    }

    .preview-placeholder {
      padding: 20px;
      background-color: $CAP_G09;
      border-radius: 8px;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $CAP_G05;
      font-size: $FONT_SIZE_S;
    }

    // Notification preview wrapper - styles for preview area container only
    // This class handles positioning, background, padding, and layout constraints
    // The actual notification styles are in notification-container.scss
    .notification-preview {
      background-color: $CAP_G09;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      // Additional positioning/container styles can be added here
      // but NOT styles for .notification-container itself
      &.preview-unavailable {
        background-color: transparent;
        border: 1px dashed $CAP_G06;
        min-height: 84px;
      }

      .notification-container {
        width: 100%;
      }
    }
  }

  .preview-disclaimer {
    .disclaimer-text {
      color: $CAP_G05;
      font-size: $FONT_SIZE_S;
      line-height: 1.5;
      text-align: center;
    }
  }

  .preview-all-devices-button {
    margin-top: 16px;
    text-align: center;

    .preview-all-devices-trigger {
      border: none;
      background: transparent;
      color: map-get($CAP_SECONDARY, base);
      font-weight: $FONT_WEIGHT_MEDIUM;
      border-radius: 8px;
      padding: 8px 16px;

      &:hover:not(:disabled) {
        background: $CAP_G09;
      }

      &:disabled {
        color: $CAP_G05;
        cursor: not-allowed;
        background: transparent;
      }
    }
  }
}

// Make the backdrop transparent for the preview slidebox
// This prevents double-darkening when it opens over an existing slidebox
.webpush-preview-slidebox.cap-slide-box-v2 {
  background: transparent;
}

// ============================================================================
// Device Preview Container Styles
// ============================================================================

/**
 * Device Preview Container
 * 
 * Background container for device frame previews in the SlideBox.
 * 
 * Specifications:
 * - Width: 100% (responsive)
 * - Height: Determined by device frame content (auto)
 * - Background: $CAP_G09
 * - Padding: 24px 16px 16px 16px (top right bottom left)
 */
.device-preview-container {
  width: 100%;
  background-color: $CAP_G09;
  padding: 24px 16px 16px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  // Height is determined by the device frame content

  /**
   * Device Frame Wrapper
   * 
   * Wraps the device frame SVG and positions it centered within the container.
   * This wrapper will also serve as the positioning reference for notifications
   * in later phases.
   */
  .device-frame-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    // Height determined by device frame image

      /**
       * Device Frame Asset
       *
       * Wraps the frame image and provides the positioning context for the
       * notification overlay. Anchors notification coordinates to the frame image
       * itself instead of the background container.
       */
      .device-frame-asset {
        position: relative;
        display: inline-block;
        max-width: 100%;
        width: auto;
        height: auto;
        line-height: 0; // remove inline-block whitespace
      }

    .device-frame {
      filter: none;
      transition: none;
      transform: none;
      
      &:hover {
        filter: none;
        transform: none;
      }
      
      max-width: 100%;
      width: auto;
      height: auto;
      display: block;
      object-fit: contain;
    }

    /**
     * Device Notification Wrapper
     * 
     * Wraps the notification container and positions it relative to the device frame.
     * This ensures the notification is anchored to the device frame, not the background container.
     */
    .device-notification-wrapper {
      position: absolute;
      z-index: 10;
      line-height: normal; // prevent zero line-height inheritance from frame asset
      // Position is set inline via style prop for precise control
      &.preview-unavailable {
        width: 16px;
        height: 16px;
        border: 1px dashed $CAP_G06;
        border-radius: 4px;
        background: transparent;
      }
    }

  }

  .device-notification-wrapper .notification-container.macos-chrome {
    width: 336px;
  }
  .device-notification-wrapper .notification-container.macos-safari {
    width: 336px;
  }
  .device-notification-wrapper .notification-container.windows-chrome {
    width: 336px;
  }
  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed,
  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed,
  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed,
  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed {
    width: 326px;
    height: 78px;
  }

  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed .notification-header.android-mobile-chrome-header {
    align-items: center;
  }

  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed,
  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed,
  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed,
  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed {
    width: 480px;
    height: 78px;
  }

  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed .notification-header.android-mobile-chrome-header,
  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed .notification-header.android-mobile-chrome-header {
    align-items: center;
  }

  .device-notification-wrapper .notification-container.android-tablet-chrome.expanded,
  .device-notification-wrapper .notification-container.android-tablet-firefox.expanded,
  .device-notification-wrapper .notification-container.android-tablet-edge.expanded,
  .device-notification-wrapper .notification-container.android-tablet-opera.expanded {
    width: 480px;
    min-height: 78px;
  }

  .device-notification-wrapper .notification-container.ios-chrome.collapsed,
  .device-notification-wrapper .notification-container.ios-safari.collapsed,
  .device-notification-wrapper .notification-container.ios-firefox.collapsed,
  .device-notification-wrapper .notification-container.ios-edge.collapsed,
  .device-notification-wrapper .notification-container.ios-opera.collapsed {
    width: 326px;
    height: 78px;
  }

  .device-notification-wrapper .notification-container.ios-chrome.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ios-safari.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ios-firefox.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ios-edge.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ios-opera.collapsed .notification-header.ios-header {
    align-items: center;
  }

  .device-notification-wrapper .notification-container.ipados-chrome.collapsed,
  .device-notification-wrapper .notification-container.ipados-safari.collapsed,
  .device-notification-wrapper .notification-container.ipados-firefox.collapsed,
  .device-notification-wrapper .notification-container.ipados-edge.collapsed,
  .device-notification-wrapper .notification-container.ipados-opera.collapsed {
    width: 480px;
    height: 78px;
  }

  .device-notification-wrapper .notification-container.ipados-chrome.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ipados-safari.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ipados-firefox.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ipados-edge.collapsed .notification-header.ios-header,
  .device-notification-wrapper .notification-container.ipados-opera.collapsed .notification-header.ios-header {
    align-items: center;
  }

  .device-notification-wrapper .notification-title {
    line-height: 1.2;
  }
}

