@use "variables" as *;

:host {
    display: block;
    min-height: 353px;

    form {
        column-gap: $spacing-4;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 45%;
    }

    .dot-favorite-dialog-footer__delete-button {
        left: 0;
        position: absolute;
    }

    dot-pages-favorite-page-empty-skeleton,
    .dot-favorite-dialog__thumbnailField {
        margin-bottom: 0;
        min-height: 353px;
        position: relative;
    }

    .dot-favorite-dialog__image-reload {
        background-color: $white;
        position: absolute;
        bottom: $spacing-3;
        right: $spacing-3;
    }

    .dot-favorite-dialog__image-container {
        border: 1px solid $color-palette-gray-300;
        display: block;
        text-align: center;

        img {
            object-fit: contain;
            object-position: top;
            height: 348px;
            max-width: 100%;
        }
    }

    ::ng-deep dot-html-to-image {
        height: 353px;

        img {
            background-color: $white;
            border: 1px solid $color-palette-gray-300;
            height: 353px;
            object-fit: contain;
            width: 100%;
        }
    }
}
