/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */

.wtai-child-product-pool {
    .wtai-product-pool-container {
        border: 1px solid #8C8F94;
        background: #FFFFFF;
        border-radius: 3px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        max-height: 276px;
        height: 276px;
        min-height: 276px;
        &.wtai-no-data {
            align-items: center;
            text-align: center;
            justify-content: center;
        }

        @media screen and (max-width: 1539px) {
            height: auto;
            max-height: none;
            min-height: auto;
        }

        &.wtai-loading {
            height: 92px;
            max-height: 92px;
            padding: 10px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;

            .wtai-loading-text {
                font-size: 12px;
                color: #757575;
            }

            .wtai-spinner {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                border: 2px solid #D6D6D6;
                border-top-color: #007bdb;
                animation: wtai-spin 0.8s linear infinite;
            }
        }

        &.wtai-no-data {
            height: 92px;
            max-height: 92px;
            padding: 10px;
            align-items: center;
        }

        ul {
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            grid-gap: 8.1px;
            align-items: flex-start;
            align-content: flex-start;
            height: 100%;
            overflow-y: auto;
            padding: 10px;

            span {
                button {
                   padding: 5px 10px;
                }
            }

            @media screen and (max-width: 1539px) {
                max-height: 284px;
            }

            li {
                padding: 5px 10px;
                border-radius: 4px;
                background: #DDDDDD;
                box-shadow: 0px 2px 4px 0px #0000004D;
                position: relative;
                height: 29px;
                max-width: 259px;

                &.wtai-hovered-cut {
                    .wtai-hovered {
                        bottom: auto;
                        top: 100%;
                        margin-top: 6px;
                    }
                }

                &:not(.ui-sortable-helper):hover {
                    box-shadow: none;
                    .wtai-hovered {
                        display: grid;
                    }
                }

                .wtai-not-hovered {
                    font-weight: 600;

                    span {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 100%;
                    }
                }

                .wtai-hovered {
                    display: none;
                    position: absolute;
                    z-index: 10;
                    bottom: 0;
                    width: auto;
                    background: #DDDDDD;
                    padding: 5px 10px;
                    left: 0;
                    border-radius: 4px;
                    box-shadow: 0px 2px 4px 0px #0000004D;
                    grid-gap: 5px;
                    min-width: 157px;

                    @media screen and (max-width: 1539px) {
                        width: 100%;
                        left: 0;
                        right: 0;
                    }

                    .wtai-product {
                        font-weight: 600;
                        font-size: 13px;
                        word-break: break-word;
                    }

                    .wtai-product-data {
                        display: flex;
                        font-size: 12px;
                        gap: 10px;
                        .wtai-product-data-label {
                            width: 50%;
                            font-weight: 600;
                        }

                        .wtai-product-data-value {
                            width: 50%;
                            word-break: break-word;
                            word-wrap: break-word;
                        }
                    }
                }
            }
            span {
                button {
                    &.wtai-link-style-button {
                        font-size: 14px;
                        font-weight: 400;
                        background-color: transparent;
                        border-color: transparent;
                        text-shadow: none;
                        color: #007bdb;
                        display: flex;
                        align-items: center;
                        z-index: 1;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

    &:not(.wtai-has-scroll) {
        .wtai-product-pool-container {
            overflow: visible;
        }

        .wtai-product-pool-container ul {
            overflow-y: visible;
        }
    }

    &.wtai-has-scroll {
        .wtai-product-pool-container ul {
            overflow-y: auto;
            li {
                max-width: 259px;
            }
        }

        // .wtai-product-pool-container ul li {
        //     &:nth-child(-n+4):not(.ui-sortable-helper):hover {
        //         .wtai-hovered {
        //             bottom: auto;
        //             top: 100%;
        //             margin-top: 6px;
        //         }
        //     }
        // }
    }
}

@keyframes wtai-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
