<div class="card" (clickOutside)="onClickOutside($event)">
    <div class="product-image">
        <a [routerLink]="detailUrl" [ngClass]="{'disabled-link': !detailUrl}">
            <img class="card-img-top" *ngIf="imageUrl" [src]="imageUrl" alt="" (error)="imageError()" />
        </a>
    </div>
    <div class="card-body">
        <div class="card-title">
            <a [routerLink]="detailUrl" [ngClass]="{'disabled-link': !detailUrl}">
                {{ document.title }}
            </a>
            <i class="fas fa-ellipsis-v" (click)="documentAction=true"></i>
        </div>
        <div class="card-text" *ngIf="document.title != document.designation">{{ document.designation }}</div>
        <div class="card-text dimension-info">
            <div class="text-muted" *ngFor="let info of document.search_result_nested">
                <span [innerHTML]="info.symbol" *ngIf="info.symbol"></span>
                <span *ngIf="!info.symbol">{{info.name}}</span>
                <span *ngIf="info.data_type === 'Character string' || info.data_type === 'Logical value'">&#61; {{info.string_values}}{{info.unit}}</span>
                <span *ngIf="info.data_type === 'Floating point'">&#61; {{info.real_value}}{{info.unit}}</span>
            </div>
        </div>
    </div>

    <div class="card action-list" [ngClass]="{'active': documentAction}">
        <div class="close-action">
            <i class="fas fa-times p-2" aria-hidden="true" (click)="documentAction=false"></i>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item" [ngClass]="{'disabled-link': !detailUrl}">
                <a class="action" [routerLink]="detailUrl" >
                    {{ viewProductLabel }}
                    <i class="icon-chevronLarge-next"></i>
                </a>
            </li>
            <li class="list-group-item">
                <a class="action no-window-icon" [href]="calculateUrl" target="_blank">
                    {{ calculateProductLabel }}
                    <i class="icon-chevronLarge-next"></i>
                </a>
            </li>
            <li class="list-group-item" *ngIf="mountLink">
                <a class="action no-window-icon" [href]="mountLink" target="_blank">
                    {{ mountDismountLabel }}
                    <i class="icon-chevronLarge-next"></i>
                </a>
            </li>
            <li class="list-group-item" *ngIf="document.buyable">
                <a class="buy" href="" target="_blank">
                    <span class="buy-button">Koupit online</span>
                    <i class="icon-chevronLarge-next"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

./product-document.component.scss

@import "src/app/styles/helpers";

.card {
    border: none;
    position: relative;
    box-shadow: $box-shadow-sm;
    height: 100%;
    overflow: hidden;

    &:hover {
        box-shadow: $box-shadow-sm-hover;
        transition: 0.3s;
    }

    .product-image {
        display: flex;
        border-bottom: 1px solid $off-white;

        @include aspect-ratio(1 1);

        .card-img-top {
            object-fit: cover;
        }
    }

    &-body {
        background-color: whitesmoke;
    }

    &-text {
        .text-muted {
            @include font-scale(14, light);
            color: $cool-grey;
            margin-right: calc-rem(5);
        }

        &.dimension-info {
            display: flex;
            flex-flow: row wrap;
        }
    }

    &-title {
        display: flex;
        justify-content: space-between;
        @include font-scale(18, bold);
        color: $blue;
        word-wrap: break-word;

        .disabled-link {
            color: $grey;
        }

        i {
            padding: 0 calc-rem(5) 0 calc-rem(10);
            cursor: pointer;
        }
    }
}

.action-list {
    position: absolute;
    padding: calc-rem(20) 0;
    border: none;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transition: all 0.3s ease-out;
    background-color: $blue;
    opacity: 0.95;
    cursor: default;

    &.active {
        top: 0;
    }

    .close-action {
        display: flex;
        justify-content: flex-end;
        padding: 0 calc-rem(20);

        i {
            float: right;
            color: $light_blue;
            cursor: pointer;
        }
    }

    .list-group-item {
        background-color: inherit;
        border: none;
        padding: 0 calc-rem(25);

        &:not(:last-child) {
            .action {
                border-bottom: 1px solid $light_blue;
            }
        }

        &:hover {
            background-color: $dark-blue;
            >.action {
                border-bottom: none;
            }
        }

        &.disabled {
            a {
                color: $grey;
            }
        }

        .action {
            display: flex;
            justify-content: space-between;
            align-items: center;
            @include font-size(16);
            padding: calc-rem(12) 0;
            color: $light_blue;
            text-decoration: none;

            i {
                @include font-size(11);
            }

            &.no-window-icon {
                &:after {
                    content: none;
                }
            }
        }
    
        .buy {
            display: flex;
            justify-content: center;
            .buy-button {
                padding: calc-rem(7) calc-rem(40);
                background-color: $blue;
                color: $light_blue;
                cursor: pointer;
    
                &:hover { background-color: $dark-blue; }
            }
        }
    }
}