// 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;
        background-color: coral;
        opacity: 0.5;
    }

    .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 {
        visibility: hidden;
    }

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

    &.overlayVisible {
        .tile-node {
            visibility: unset;
        }
    }

    .tile-leaf,
    .overlay-leaf {
        display: flex;
        flex: 1 1 auto;
        max-height: 100%;
        max-width: 100%;
        /* margin: 5px; */
    }

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

    .overlay-leaf {
        border: 10px solid red;
    }

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

    // .overlay-leaf {
    // 	margin: 1px;
    // }

    .placeholder {
        display: flex;
        flex: 1 1 auto;
        background-color: aqua;
    }
}