Asymmetrik/ngx-starter

@use 'sass:map';
@import '../../../../styles/shared';
@import '../shared';

$recent-message-preview-lint-count: 3 !default;

:host {
    display: flex;
    flex-direction: column;
    gap: map.get($spacers, 3);
    padding: map.get($spacers, 3);
}

.cards {
    display: flex;
    flex-direction: column;
    gap: map.get($spacers, 3);
    padding: 2px;
    overflow: auto;
    min-height: 120px;
    max-height: min(calc(100vh - 280px), #{$nav-messages-popover-max-height});
}

.card-message {
    @include card-message();

    .card-body {
        padding: 0.75rem;

        .card-text ::ng-deep a {
            display: inline;
            padding: 0;
            text-decoration: underline;
        }
    }

    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: $recent-message-preview-lint-count;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}