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

.wtai-categories-index {
    .wtai-edit-modal {
        .breadcrumbs {
            max-width: 500px;
            word-wrap: break-word;
        }
        
        .wtai-toolbar {
            .wtai-top {
                .wtai-col-left {
                    display: flex;
                    
                    .wtai-dropdown-field {
                        max-width: 400px;
                    }
                }
            }
        }

        .wtai-wtai-accordions {
            column-gap: 20px;

            .wtai-category-image-block {
                width: 50%;
                background: #f8f8f8;

                &:has(.admin__collapsible-block-wrapper._hide) {
                    align-self: flex-start;
                }
                

                &.wtai-contain-ads {
                    display: flex;
                    flex-direction: column;

                    @media screen and (min-width: 1280px) {
                        max-width: ~"calc(100% - 300px)";
                    }

                    [data-role="content"] {
                        flex-grow: 1;
                        display: flex;
                        align-items: center;
                        min-height: 185px;
                    }
                }

                [data-role="content"] {
                    padding: 5px 20px 20px;

                    .wtai-category-image {
                        padding-left: 54px;
                        padding-right: 54px;
                    }
                    
                    .wtai-has-image {
                        margin-left: 26px;
                        
                        .wtai-image-wrapper {
                            .wtai-preview-wrapper {
                                max-width: 150px;
                            }

                            img {
                                cursor: pointer;
                                margin: 0;
                            }

                            .wtai-field-content {
                                margin-top: 1.2rem;
                            }
                        }

                        .wtai-description {
                            font-size: 13px;
                            font-weight: 400;
                            color: #3C434A;
                            padding: 1.2rem 0;
                            text-align: left;

                            .wtai-note {
                                font-size: 11px;
                                font-style: italic;
                                font-weight: 400;
                                color: #3C434A;
                                margin-top: 5px;
                            }

                            span[data-config-scope]::before {
                                color: #808080;
                                content: attr(data-config-scope);
                                font-size: 1.1rem;
                                font-weight: 400;
                                min-width: 15rem;
                                text-transform: lowercase;
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }

            .wtai-additional-prompt-block {
                width: ~"calc(50% - 20px)";
                background: #f8f8f8;

                &:has(.admin__collapsible-block-wrapper._hide) {
                    align-self: flex-start;
                }

                .wtai-step {
                    display: none;
                }

                .wtai-wtai-additional-prompt {
                    padding-bottom: 20px;
                    padding-right: 74px;
                    padding-left: 20px;

                    textarea {
                        background: #ffffff;
                        border: 1px solid #ADADAD;
                        height: 96px;
                        padding: 12px;
                        resize: none;
                        width: 100%;
                    }

                    .wtai-note {
                        font-size: 12px;
                    }
                    
                    .wtai-header-details {
                        font-size: 12px;
                    }

                    .wtai-footer-details {
                        font-size: 11px;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
            }

            .wtai-representative-products {
                display: flex;
                flex-direction: column;

                @media screen and (min-width: 1100px) {
                    width: 50%;
                }

                .wtai-no-data {
                    margin: 20px;
                    display: block;
                    text-align: center;
                    width: auto;
                }

                .wtai-field-description {
                    font-size: 13px;
                    font-weight: 400;

                    span {
                        font-style: italic;
                    }
                }

                .wtai-empty {
                    background: #F6F7F7;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: solid 1px #AAAAAA;
                    margin-top: 27px;
                }

                .wtai-selected {
                    margin-top: 27px;

                    ul {
                        max-height: 300px;
                        overflow-y: auto;
                        margin-top: 0;
                    }

                    li {
                        display: flex;
                        align-items: center;
                        grid-gap: 10px;
                        margin: 10px 0;
                        font-size: 13px;

                        &:first-child {
                            margin-top: 0;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }

                        img {
                            width: 50px;
                            height: 50px;
                        }

                        .wtai-option-status {
                            margin-left: auto;
                        }

                        .wtai-action-remove {
                            cursor: pointer;
                            margin-left: 20px;
                            margin-right: 20px;

                            &::after {
                                font-family: 'Admin Icons';
                                content: '\e62f';
                            }
                        }
                    }
                }

                .admin__action-multiselect-label {
                    display: flex;
                    align-items: center;
                    grid-gap: 5px;

                    img {
                        width: 50px;
                        height: 50px;
                    }

                    .wtai-option-label {
                        max-width: 385px;
                        padding-left: 10px;
                    }

                    .wtai-option-status {
                        margin-left: auto;
                        padding-left: 10px;
                        color: #AAAAAA;
                        font-size: 11px;
                    }
                }

                .action-menu-item {
                    &._disabled {
                        cursor: not-allowed;
                        opacity: 0.5;
                    }
                }

                .loader {
                    background-color: transparent;
                }

                .wtai-representatives-tooltip:not(:first-child) {
                    .lib-tooltip(
                        @_tooltip-border-color: transparent,
                        @_tooltip-color: #303030,
                        @_tooltip-position: top,
                        @_tooltip-cursor: not-allowed
                    );
    
                    .tooltip-content {
                        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
                        text-align: center;
                        margin-left: 10px;
                        font-size: 13px;
                        bottom: 75%;
                    }

                    .admin__action-multiselect-label {
                        cursor: not-allowed;
                    }
                }

                .wtai-representatives-tooltip:first-child {
                    .lib-tooltip(
                        @_tooltip-border-color: transparent,
                        @_tooltip-color: #303030,
                        @_tooltip-position: right,
                        @_tooltip-cursor: not-allowed
                    );
    
                    .tooltip-content {
                        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
                        text-align: center;
                        margin-left: 10px;
                        font-size: 13px;
                        left: 25%;
                    }

                    .admin__action-multiselect-label {
                        cursor: not-allowed;
                    }
                }
                
            }

            .wtai-representatives {
                padding-left: 54px;
                padding-right: 54px;

                .wtai-other-details {
                    flex: 1;
                    margin-left: 20px;
                    margin-top: 9px;

                    .wtai-control {
                        margin-top: 10px;
                        padding-left: 0;
                    }
    
                    textarea {
                        background: @bg-white;
                        border: 1px solid #ADADAD;
                        height: 96px;
                        padding: 12px;
                        resize: none;
                        width: 100%;
                    }
    
                    .wtai-note {
                        font-size: 12px;
                    }
                    
                    @media screen and (min-width: 1100px) {
                        margin-left: auto;
                        max-width: ~"calc(50% - 45px)";
                    }

                    .wtai-control {
                        padding-left: 0;
                    }

                    .wtai-product-research-data .wtai-field {
                        .admin__field-label {
                            font-weight: 400;
                            font-size: 13px;
                            display: flex;
                            align-items: center;
                            
                            .wtai-sub-text {
                                font-size: 11px;
                                font-style: italic;
                            }
    
                            .wtai-icon-label {
                                width: 50px;
                                display: block;
                                height: 50px;
                                background-image: url("../WriteTextAI_WriteTextAI/images/img_product_research.svg");
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
    
                            .wtai-text-label {
                                display: flex;
                                flex-direction: column;
                                margin-left: 6px;

                                .wtai-main-text {
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }
        }

        .wtai-accordion-block.wtai-text-block:last-child {
            .admin__collapsible-block-wrapper {
                &._hide {
                    margin-bottom: 40px;
                }
            }
        }
    }
}