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

/**
 * macOS + Chrome Notification Styles
 */

.notification-container.macos-chrome {
  width: 100%;
  max-width: 348px;
  background-color: $CAP_WHITE;
  border: 1px solid $CAP_G07;
  border-radius: 12px;
  padding: 12px;

  .notification-header {
    .notification-icon-container {
      width: 40px;
      height: 40px;
      background-color: $CAP_G09;
      border-radius: 12px;
      padding: 8px;
    }

    .notification-content {
      .notification-title {
        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 590;
        font-size: $FONT_SIZE_S;
        line-height: 16px;
        min-height: 16px;
        color: $FONT_COLOR_01;
        letter-spacing: 0;
      }

      .notification-url {
        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 510;
        font-size: $FONT_SIZE_S;
        line-height: 16px;
        min-height: 16px;
        color: $FONT_COLOR_01;
        letter-spacing: 0;
      }

      .notification-body {
        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 400;
        font-size: $FONT_SIZE_S;
        line-height: 16px;
        min-height: 16px;
        color: $FONT_COLOR_01;
        letter-spacing: 0;
        
        // Limit notification body to 3 lines as per macOS notification behavior
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // Collapsed state - ensure header aligns center vertically
  &.collapsed .notification-header {
    align-items: center;

    .notification-brand-icon-container {
      .notification-brand-icon {
        border-radius: 5px;
      }
    }
  }

  // Expanded state - CTA button typography
  &.expanded {
    .notification-expanded-content {
      .notification-actions {
        .notification-action-item {
          .notification-action-button {
            font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-weight: 510;
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0;
            padding: 8px 12px;

            .notification-action-label {
              font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
              font-weight: 510;
              font-size: 12px;
              line-height: 16px;
              letter-spacing: 0;
            }
          }
        }
      }
    }
  }
}

