@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.initial-selectLayout-wrapper {
    position: fixed;
    top: 100px;
    left: 40px;
    z-index: 10;

    .regularDropdown-container {
        background: var(--background-color);
    }
}

.compareLayOut-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    height: 100vh;
    background: var(--background-color);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInFromRight 0.4s ease-out forwards;
    user-select: none;


    .selectLayout-wrapper {

        position: absolute;
        top: 100px;
        right: 40px;

        .regularDropdown-container {
            background: var(--background-color);
        }
    }

    .chooseLayout-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .resizer {
            width: 32px;
            height: 32px;
            @include flex-center;
            padding: 6px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            background: var(--background-color);
            backdrop-filter: blur(20px);
            box-shadow: $box-shadow-heavy;
            border-radius: 50%;
            cursor: ew-resize;
            transition: transform 0.1s ease;
            z-index: 10;



        }

        .chooseLayout-wrapper {
            background: var(--background-color);
            backdrop-filter: blur(20px);
            padding: 20px;
            border-radius: 8px;
            box-shadow: $box-shadow-medium;
            max-width: 80%;
            text-align: center;
            position: relative;

            .icon {
                width: 100%;
                margin-bottom: 15px;
                text-align: center;

                svg {

                    width: 100%;
                }

            }

            .value {
                margin-bottom: 15px;
                font-size: var(--font-size-small);
                font-weight: 500;
                color: var(--text-primary);
            }

            button {
                display: block;
                margin: 0 auto;
                padding: 8px 16px;
                background: var(--background-color-button);
                color: var(--icon-default-color-active);
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s ease;

                &:hover {

                    transform: translateY(-1px);
                }



            }

            .displayLayouts-container {
                max-width: 170px;
                height: auto;
                background: var(--background-color);
                backdrop-filter: blur(20px);
                padding: 6px;
                border-radius: 8px;
                box-shadow: $box-shadow-medium;
                position: absolute;
                right: 0;
                top: 100%;
                transform: translate(50%, -10px);
                display: flex;
                flex-direction: column;
                gap: 6px;

                .header {
                    text-align: left;
                    padding-top: 6px;
                    padding-left: 6px;
                }

                .search-wrapper {
                    padding: 6px 0;

                    .search-container {
                        padding: 0;
                        border-radius: 6px;
                    }
                }

                .layouts-container {
                    .layout {

                        padding: 6px 0;
                    }

                    .layout-wrapper {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        cursor: pointer;
                        padding: 0 10px;
                        background: none;
                        width: 100%;

                        &:hover {
                            background-color: var(--highlight-text-color) !important;
                            border-radius: 4px;

                            .layout {
                                color: var(--text-button-color) !important;

                            }

                            svg {

                                path {

                                    fill: var(--text-button-color) !important;
                                }
                            }

                            .layout {

                                color: var(--background-color-accent);
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


// body.compare-layout-open {
//     main {
//         padding-right: 10px;

//         transition: padding 0.3s ease;
//     }
// }