@use "variables" as *;

:host {
    display: grid;
    grid-template-rows: min-content 1fr;
    height: 100%;

    // Default state (no palette)
    grid-template-columns: 1fr;

    &:has(.toggle-palette-placeholder) {
        grid-template-columns: 1fr 2rem min-content;
    }
}

// To generate the space for the palette toggle button
.toggle-palette-placeholder {
    width: 2rem;
    height: 0;
}

dot-edit-ema-palette {
    transition: all $basic-speed ease-in-out;

    &.closed {
        width: 0;
    }

    &.open {
        width: 15.5rem;
    }
}

dot-device-selector-seo {
    display: none;
}

dot-ema-page-dropzone {
    position: absolute;
    inset: 0;
}

dot-edit-ema-toolbar,
dot-uve-toolbar {
    grid-column: 1 / -1;
}

dot-ema-device-display {
    grid-column: 1 / 2;
}

dot-results-seo-tool {
    grid-column: 1 / -1;
}

.editor-content {
    padding: $spacing-4 $spacing-3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: $spacing-1;
    overflow: auto;
}

.editor-content-preview {
    padding: $spacing-4;
}

.iframe-wrapper {
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    margin: 0 auto;
    border: solid 1px $color-palette-gray-300;
    height: 100%;
    width: 100%;
    transition: all 0.3s ease-in-out;

    iframe {
        border: none;
    }
}

.iframe-wrapper--device {
    box-shadow: $shadow-l;
    background: linear-gradient(135deg, $white 0%, rgba(240, 240, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1);
}

a,
a:focus,
a:active {
    text-decoration: none;
}
