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

/**
 * Android (Tablet) + Chrome Notification Styles
 * Extends Android Mobile Chrome styles with tablet-specific overrides
 */

.notification-container.android-tablet-chrome {
  @extend .notification-container.android-mobile-chrome;

  &.collapsed {
    width: 480px; // Override mobile width (326px)

    .android-mobile-chrome-content {
      .notification-body {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &.expanded {
    width: 480px; // Override mobile width (326px)
    padding: 17.6px; // Override mobile padding (12px)

    .android-mobile-expanded-body {
      .android-mobile-expanded-body-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .android-mobile-expanded-media {
        .android-mobile-expanded-media-image {
          height: 168px; // Override mobile height (192px)
        }
      }
    }
  }
}
