@use "variables" as *;
@import "mixins";

:host {
    background-color: $white;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0;
}

dot-whats-changed,
.dot-edit__iframe {
    background: $white;
    border-radius: $border-radius-xs;
    box-shadow: $shadow-m;
    flex-grow: 1;
    overflow: hidden;
}

.dot-edit__page-wrapper {
    background-color: $white;
    height: 100%;
    max-width: 100%;
    padding: $spacing-5;
    width: 100%;
    overflow: auto;
}

.device-info {
    align-self: center;
    padding: $spacing-1 0;
}

.dot-edit-content__wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    z-index: 1;
    padding-right: 80px;

    &.dot-edit-content__preview {
        flex-direction: column;
    }
}

.dot-edit__device-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: solid 1px $color-palette-gray-300;
    height: 100%;

    .dot-edit__page-wrapper--deviced & {
        flex-grow: 0;
        border-radius: 10px;
        box-shadow: $shadow-l;
        background: $white;
        background: linear-gradient(135deg, $white 0%, rgba(240, 240, 240, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1);
        margin: 0 auto;
        width: fit-content;
        height: fit-content;
    }

    .dot-edit__iframe-wrapper {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        position: relative;
    }
}

/*
    When the primeng dialog components resize it adds .p-unselectable-text to the <body>, we need to disable
    pointer events in the iframe during the resize of the dialog otherwise resize breaks.
*/
::ng-deep .p-unselectable-text .dot-edit__contentlet-iframe {
    pointer-events: none;
}

.dot-edit-content__palette {
    position: relative;
    transition: width $basic-speed ease-in-out;
    width: 0px;

    &.editMode {
        width: $content-palette-width;

        .dot-edit-content__palette-visibility {
            display: flex;
        }
    }

    &.collapsed {
        width: 0px;
    }

    .dot-edit-content__palette-visibility {
        display: none;
        align-items: center;
        justify-content: center;
        width: 29px;
        height: 35px;
        left: -28px;
        position: absolute;
        background: $white;
        top: 134px;
        border: 1px solid $color-palette-gray-300;
        border-radius: 6px 0 0 6px;
        cursor: pointer;
        z-index: 2;
    }
}
