// 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%;
    }

    .placeholder-container {
        z-index: 1;
    }

    .overlay-container {
        z-index: 2;
    }

    .tile-node,
    .overlay-node {
        display: flex;
        flex: 1 1 auto;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;

        &.is-dragging {
            background-color: rgba(0, 255, 0, 0.3);
        }
    }

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

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

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

    .tile-leaf,
    .overlay-leaf {
        display: flex;
        flex: 1 1 auto;
        max-height: 100%;
        max-width: 100%;
    }

    .tile-leaf {
        border: 1px solid black;
    }

    .placeholder {
        background-color: aqua;
        opacity: 0.5;
        border-radius: 5px;
    }
}