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

/**
 * iPadOS Notification Styles
 * Applies to all browsers on iPadOS: Chrome, Safari, Firefox, Edge, Opera
 * 
 * iPadOS notifications follow the same design as iOS but with wider dimensions:
 * - Browser icon on the left
 * - Title and "now" timestamp on the same row
 * - Body text below
 * - NO brand icon
 * - NO URL display
 * - NO expanded state
 * - WIDER width than iOS (tablet format)
 */

.notification-container.ipados-chrome,
.notification-container.ipados-safari,
.notification-container.ipados-firefox,
.notification-container.ipados-edge,
.notification-container.ipados-opera {
  background-color: $CAP_WHITE;
  border: 1px solid $CAP_G08;
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;

  &.collapsed {
    width: 480px;
    height: 78px;

    .notification-header {
      display: flex;
      gap: 12px;
      height: 100%;
    }

    .notification-header.ios-header {
      align-items: center;
    }

    .notification-icon-container {
      width: 28px;
      height: 28px;
      padding: 2px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .notification-icon {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .ios-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1;

      .notification-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;

        .notification-title {
          font-weight: 600;
          font-size: $FONT_SIZE_S;
          color: $FONT_COLOR_01;
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
          min-width: 0;
        }

        .notification-time {
          font-size: $FONT_SIZE_S;
          color: $CAP_G05;
          flex-shrink: 0;
        }
      }

      .notification-body {
        font-size: $FONT_SIZE_S;
        color: $FONT_COLOR_01;
        margin: 0;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .notification-url {
        display: none;
      }
    }
  }
}

