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

/**
 * Base Notification Container Styles
 * 
 * Common styles shared across all platform + browser combinations.
 * These styles define the base structure and common elements.
 */

// Base notification container styles
.notification-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  // Common notification header structure
  .notification-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;

    .notification-icon-container {
      flex-shrink: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;

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

    .notification-content {
      flex: 1;
      width: 0; // to prevent the children from increasing the parent's width
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;

      .notification-title {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .notification-url {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .notification-body {
        margin: 0;
        word-break: break-word;
      }
    }

    .notification-brand-icon-container {
      flex-shrink: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;

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

    .notification-header-actions {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 8px;

      .notification-action-menu {
        font-size: $FONT_SIZE_M;
        color: $FONT_COLOR_01;
        line-height: 1;
        cursor: default;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;

        .notification-action-menu-icon {
          height: $FONT_SIZE_M;
          width: auto;
          display: block;
        }
      }

      .notification-action-arrow {
        font-size: $FONT_SIZE_M;
        color: $FONT_COLOR_01;
        line-height: 1;
        cursor: default;
        user-select: none;
        transform: rotate(0deg) translateY(-4px);
        margin-bottom: -7px;
        display: flex;
        align-items: center;
        justify-content: center;

        .notification-action-arrow-icon {
          height: $FONT_SIZE_M;
          width: auto;
          display: block;
        }
      }
    }
  }

  // Expanded state content
  .notification-expanded-content {
    width: 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .notification-media {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      .notification-media-image {
        width: 100%;
        max-width: 100%;
          height: 168px; // Fixed height limit
        object-fit: cover; // Ensures image covers the area without distortion
        object-position: center; // Centers the image
        display: block;
        box-sizing: border-box;
      }
    }

    .notification-actions {
      width: 100%;
      display: flex;
      flex-direction: column;

      .notification-action-item {
        width: 100%;
        display: flex;
        flex-direction: column;

        .notification-action-divider {
          width: 100%;
          height: 1px;
          background-color: $CAP_G08;
        }

        .notification-action-button {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 8px 12px;
          background-color: transparent;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          text-align: center;
          font-size: $FONT_SIZE_S;
          font-weight: 500;
          color: $FONT_COLOR_01;
          transition: background-color 0.2s ease;

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

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

          .notification-action-icon {
            font-size: $FONT_SIZE_M;
            flex-shrink: 0;
          }

          .notification-action-label {
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

