// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

.tile-layout {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    .overlay-container,
    .display-container,
    .placeholder-container {
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        min-height: 4rem;
        min-width: 4rem;
    }

    .placeholder-container {
        z-index: var(--zindex-layout-placeholder-container);
    }

    .overlay-container {
        z-index: var(--zindex-layout-overlay-container);
    }

    .overlay-node {
        display: flex;
        flex: 0 1 auto;
    }

    .overlay-node {
        .resize-handle {
            &.flex-row {
                cursor: ew-resize;
                .line {
                    height: 100%;
                    margin-left: 2px;
                }
            }
            &.flex-column {
                cursor: ns-resize;
                .line {
                    margin-top: 2px;
                }
            }
            flex: 0 0 5px;
            &:hover {
                &.flex-row .line {
                    border-left: 1px solid var(--accent-color);
                }
                &.flex-column .line {
                    border-bottom: 1px solid var(--accent-color);
                }
            }
        }

        &.resizing {
            border: 1px solid var(--accent-color);
            backdrop-filter: blur(8px);
        }
    }

    .tile-node {
        border-radius: calc(var(--block-border-radius) + 2px);
        overflow: hidden;

        &.dragging {
            filter: blur(8px);
        }

        &.magnified {
            background-color: var(--block-bg-solid-color);
            z-index: 10;
        }

        .tile-preview-container {
            position: absolute;
            top: 10000px;
            white-space: nowrap !important;
            user-select: none;
            -webkit-user-select: none;

            .tile-preview {
                width: 100%;
                height: 100%;
            }
        }
    }

    &.animate {
        .tile-node,
        .placeholder {
            transition-duration: 0.15s;
            transition-timing-function: ease-in;
            transition-property: transform, width, height, background-color;
        }
    }

    .tile-leaf,
    .overlay-leaf {
        height: 100%;
        width: 100%;
    }

    .tile-leaf {
        overflow: hidden;
    }

    .placeholder {
        background-color: var(--accent-color);
        opacity: 0.5;
        border-radius: calc(var(--block-border-radius) + 2px);
    }
}