<div [ngClass]="['content', color]" *ngIf="body">
	<div (click)="anchorClick($event, id)" [innerHTML]="body | safeHTML"></div>
</div>
<ng-template #id let-modal>
	<div [ngClass]="{'catalogue-table': modalType==='TABLE'}">
		<div class="modal-header">
			<h4 class="modal-title"> {{modalContentText}} </h4>
			<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
				<span >&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<img [src]="modalContentSrc" *ngIf="modalType==='IMAGE'">
			<div class="table-responsive" *ngIf="modalType==='TABLE' && tableData?.body">
				<rich-text-field [body]="tableData.body"></rich-text-field>
			</div>
		</div>
		<div class="modal-footer" *ngIf="modalType==='TABLE' && tableData?.footer">
			<ol class="note-list">
				<li class="d-flex" *ngFor="let footer of tableData.footer; let i=index">
					<span class="mr-1"><sup>{{i+1}})</sup></span>
					<rich-text-field [body]="footer"></rich-text-field>
				</li>
			</ol>
		</div>
	</div>
</ng-template>

./rich-text-field.component.scss

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

:host .content {
    ::ng-deep {
        font-family: 'SKF Chevin OT Light';
    }

    @include clearfix;

    ::ng-deep img {
        // This is used to override the sizes set by editors in RTFs in tridion
        // We set the max-width to not cause the image to span over the screen width
        // height is unset to keep the image scaled reasonably
        max-width: 100%;
        height: unset !important;
    }

    // This is needed since the html is embedded
    // Make the anchor tag look as if it where a regular link
    ::ng-deep .embeddedAnchor {
            color: $blue;
            &:hover {
                text-decoration: underline;
                color: #0056b3;
            }
    }

    ::ng-deep .small-capital-heading {
        @include font-scale(18, medium);
        font-variant: small-caps;
        font-variant-caps: all-small-caps;
    }

    ::ng-deep {
        .colorful-and-striped {
            border: none !important;

            caption {
                caption-side: top;
                color: $cool-grey;
                @include font-scale(14, uppercase);
            }

            thead tr {
                th, td {
                    border: none;
                    color: $white;
                    background-color: $blue;
                    @include font-scale(14, demibold);

                    & a {
                        color: $light-blue;
                    }
                }

                &:nth-last-child(2) {
                    th, td {
                        border-bottom: 1px solid $dark-blue !important;
                    }
                }

                &:last-child {
                    th, td {
                        border-bottom: 2px solid $dark-blue !important;
                    }
                }
            }

            tbody tr {
                td {
                    border: none;
                    @include font-scale(14, light);
                }

                &:nth-child(odd) {
                    background-color: $off-white;
                }

                &:nth-child(even) {
                    background-color: $white;
                }
            }
        }

        .simple-tables {
            @extend .colorful-and-striped;

            th, td {
                color: inherit;
                background-color: $white !important;

                & a {
                    color: $blue;
                }
            }

            tr {
                background-color: $white !important;
            }

            .thin-table-border {
                border-bottom: 1px solid $cool-grey;
            }

            .thick-table-border {
                border-bottom: 2px solid $cool-grey;
            }
        }

        .no-colors {
            background-color: $off-white;
            border-left: 0px;
            border-right: 0px;

            caption {
                caption-side: top;
                color: $cool-grey;
                @include font-scale(14, uppercase);
            }

            tbody {
                tr {
                    td {
                        height: 24px;
                        @include font-scale(16, light);
                        color: $cool-grey;
                        padding-top: 12px;
                        padding-bottom: 9px;
                        border-left: 0px;
                        border-right: 0px;
                    }
                }

                tr:first-child {
                    border-top: 3px solid;
                    border-top-color: $cool-grey;
                }
            }
        }
    }
}

.text-white {
    ::ng-deep {
        color: white;
        h1 { color: white; }
        h2 { color: white; }
        h3 { color: white; }
        h4 { color: white; }
        h5 { color: white; }
        p  { color: white; }
        a  {
            color: white;
            text-decoration: underline;
        }
    }
}

.text-darker-green-grey {
    ::ng-deep {
        color: $cool-grey;
        h1 {color: $cool-grey;}
        h2 {color: $cool-grey;}
        h3 {color: $cool-grey;}
        h4 {color: $cool-grey;}
        h5 {color: $cool-grey;}
        p  {color: $cool-grey;}
    }
}

// Used for the modal window. Move to global allow global usablity later
.close {
    &:focus {
        outline: none;
    }
}

::ng-deep .modal.modal-60-percent {
    .modal-dialog {
        @include media-breakpoint-up(sm) {
            max-width: 60%;
        }

        @include media-breakpoint-down(sm) {
            max-width: 60%;
            margin: auto;
        }

        @include media-breakpoint-up(xl) {
            max-width: 45%;
        }

    }

    .modal-body {
        img {
            max-width: 100%;
            object-fit: fill;
        }
    }

    .modal-footer {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .modal-content {
        margin: 0 auto;
    }
}

::ng-deep .catalogue-table {
    .modal-header { background-color: $off-white; }
    .modal-body { background-color: $off-white; }
    .modal-footer {
        background-color: $off-white;
        @include font-size(12);
        align-items: flex-start;

        .note-list {
            padding-left: 0;
            list-style: none;
            margin: 0;
        }
    }
}

:host ::ng-deep .caution-text, :host ::ng-deep .warning-text {
    padding: calc-rem(30);
    color: $cool-grey !important;
    margin-bottom: calc-rem(20);

    h2, h3, h4, h5 {
        margin-bottom: 0 !important;
    }

    h5 {
        font-family: 'SKF Chevin OT Light' !important;
        font-weight: 300 !important;
    }

    a {
        color: $blue !important;
        text-decoration: none !important;

        &:hover {
            text-decoration: underline !important;
        }
    }
}

:host ::ng-deep .caution-text {
    background-color: tint($orange, 85%);
    h2, h3, h4, h5 {
        color: $orange !important;
    }
}

:host ::ng-deep .warning-text {
    background-color: tint($red, 85%);

    h2, h3, h4, h5 {
        color: $red !important;
    }
}