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

/**
 * iOS Notification Styles
 * Applies to all browsers on iOS: Chrome, Safari, Firefox, Edge, Opera
 * 
 * iOS notifications are simple and clean:
 * - 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
 */

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

  &.collapsed {
    width: 326px;
    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;
      }
    }
  }
}

// Wrapper for iOS notification + CTA container (iOS + Collapsed only)
.ios-notification-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  .ios-cta-container {
    width: 195.6px; // 60% of 326px (notification width)
    background-color: $CAP_WHITE;
    border: 1px solid $CAP_G08;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .ios-cta-button {
      width: 100%;
      padding: 12px 16px;
      background-color: transparent;
      border: none;
      border-top: 1px solid $CAP_G22;
      cursor: pointer;
      text-align: center;
      font-size: $FONT_SIZE_S;
      font-weight: 500;
      color: $FONT_COLOR_01;
      transition: background-color 0.2s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:first-child {
        border-top: none;
      }

      &:hover {
        background-color: $CAP_G09;
      }

      &:active {
        background-color: $CAP_G08;
      }
    }
  }
}

