/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
 
/* eslint-disable Magento2.Less.ClassNaming.NotAllowedSymbol */

@screen__t: 768px;
@screen__m: 1180px;
@screen__l: 1440px;
@screen__xl: 1600px;

.modal-popup.wtai-transfer.wtai-bulk-transfer-popup {
    &.wtai-edit {
        .modal-inner-wrap {
            max-width: 500px;
            min-width: 310px;
        }
    }

    .modal-inner-wrap {
        max-width: max-content;

        .modal-content {
            border-bottom: dashed 1px #e3e3e3;

            form#wtaiBulkTransferForm {
                .wtai-form-fields {
                    @media screen and (min-width: @screen__t) {
                        flex-wrap: unset;
                    }

                    .wtai-col.wtai-stores {
                        border-top: solid 1px #e3e3e3;

                        @media screen and (min-width: @screen__t) {
                            border-left: solid 1px #e3e3e3;
                            border-top: none;
                        }
                    }
                }
            }

            form#wtaiEditTransferForm,
            form#wtaiBulkTransferForm {
                margin-bottom: 0;
                max-height: ~"calc(100vh - 430px)";
                overflow-y: auto;

                @media screen and (min-width: @screen__m) {
                    margin-bottom: 0;
                }

                @media screen and (min-width: @screen__l) {
                    margin-bottom: 0;
                }

                .wtai-form-fields {
                    .wtai-col.wtai-stores {
                        padding: 0 30px 30px 30px;

                        .wtai-fieldset {
                            .wtai-fieldset-title {
                                margin-top: 20px;
                            }

                            .wtai-field {
                                border-bottom: dashed 1px #e3e3e3;
                                border-left: dashed 1px #e3e3e3;
                                height: 20px;
                                margin-bottom: 0;
                                padding-bottom: 15px;
                                padding-top: 15px;
                                position: relative;
                                width: 300px;
                                
                                &.wtai-all {
                                    border: none;
                                    height: 10px;
                                    margin-left: 0;
                                    padding: 0;
                                }

                                &.wtai-website {
                                    margin-left: 20px;
                                    padding-left: 10px;
                                }
    
                                &.wtai-store {
                                    margin-left: 20px;
                                    padding-left: 10px;
                                }
    
                                &.wtai-view {
                                    margin-left: 20px;
                                    padding-left: 10px;
                                }

                                .wtai-field-content {
                                    background: #fff;
                                    bottom: 10px;
                                    left: 10px;
                                    margin-bottom: -20px;
                                    padding: 10px 0;
                                    padding-bottom: 0;
                                    position: absolute;
                                    width: 100%;
                                    z-index: 1;

                                    &.wtai-disabled {
                                        opacity: .5;
                                        pointer-events: none;
                                    }

                                    .admin__control-checkbox.wtai-disabled {
                                        pointer-events: none;

                                        + label {
                                            opacity: .5;
                                            pointer-events: none;
                                        }
                                    }
                                }
                            }

                            .wtai-fields {
                                .wtai-fields {
                                    margin-left: 20px;
                                    
                                    &:not(:last-child) {
                                        border-left: dashed 1px #e3e3e3;
                                
                                        .wtai-fields {
                                            margin-left: 20px;

                                            &:not(:last-child) {
                                                border-left: dashed 1px #e3e3e3;
                                            }
                                        }
                                    }
                                }
                            }

                            .wtai-error-message {
                                margin-top: 20px;
                            }
                        }
                    }
                }
            }

            
            form#wtaiEditTransferForm {
                margin-bottom: 0;
                max-height: ~"calc(100vh - 483px)";
                overflow-y: auto;
            }
        }

        .modal-footer {
            .action-primary {
                background-color: #eb5202;
                border-color: #eb5202;
                color: #ffffff;
            }
        }
    }
}

.modal-popup.wtai-transfer.wtai-bulk-transfer-popup {
    overflow: hidden;
    
    .modal-inner-wrap {
        .modal-content {
            padding: 0;

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

            .wtai-subtitle {
                /* border-bottom: solid 1px #e3e3e3; */
                margin: 0;
                padding: 0 30px 20px;
                padding-bottom: 0;
            }

            .wtai-notice-container {
                border-bottom: solid 1px #e3e3e3;
                padding: 0 30px 20px 60px;
            }

            form {
                margin-bottom: 73px;
                max-height: ~"calc(100vh - 550px)";
                overflow-y: auto;
                padding-top: 20px;

                @media screen and (min-width: @screen__t) {
                    margin-bottom: 53px;
                    padding-top: 0;
                }

                @media screen and (min-width: @screen__m) {
                    margin-bottom: 0;
                    max-height: none;
                    overflow-y: unset;
                }

                @media screen and (min-width: @screen__l) {
                    max-height: none;
                }
        
                .wtai-form-fields {
                    display: block;

                    @media screen and (min-width: @screen__t) {
                        display: flex;
                    }
                
                    .wtai-fieldset {
                        border: none;
                        margin-left: 0;
                        padding: 0;
    
                        &:last-child {
                            margin-right: 0;
                        }
    
                        .wtai-field-rows {
                            p {
                                font-size: 13px;
                            }
                        }
    
                        .wtai-fieldset-title {
                            font-weight: 600;
                            margin-bottom: 10px;
                        }
                    
                        .wtai-field {
                            margin-bottom: 10px;
                        }
                    }
    
                    .wtai-mobile-divider {
                        background-color: #e3e3e3;
                        border: none;
                        height: 1px;
                        margin-bottom: 20px;
                        width: 100%;

                        @media screen and (min-width: @screen__t) {
                            margin: 0;
                        }
                        
                        @media screen and (min-width: @screen__m) {
                            display: none;
                        }
    
                        &.wtai-tablet-hidden {
                            @media screen and (min-width: @screen__t) {
                                display: none;
                            }
                        }
                    }
    
                    .wtai-col {
                        margin: 0;
                        padding: 0 30px;

                        @media screen and (min-width: @screen__t) {
                            padding-top: 20px;
                        }
    
                        &.wtai-col-0 {
                            @media screen and (min-width: @screen__t) {
                                border-right: 1px solid #e3e3e3;
                                margin-right: 15px;
                                max-width: 220px;
                                padding-right: 15px;
                            }

                            @media screen and (min-width: @screen__m) {
                                margin-right: 0;
                            }
                        }
                    
                        &.wtai-col-1 {
                            @media screen and (min-width: @screen__t) {
                                padding-left: 0;
                                padding-right: 0;
                            }

                            @media screen and (min-width: @screen__m) {
                                border-right: 1px solid #e3e3e3;
                            }

                            .wtai-error-message {
                                margin-bottom: 10px;
                            }
                    
                            .row {
                                display: flex;
                                flex-direction: column;
                                flex-wrap: wrap;
                                grid-gap: 15px;
                                width: 100%;

                                @media screen and (min-width: @screen__t) {
                                    flex-direction: row;
                                }

                                @media screen and (min-width: @screen__m) {
                                    padding-left: 15px;
                                    max-height: 260px;
                                    overflow: auto;
                                }

                                @media screen and (min-width: @screen__l) {
                                    max-height: 290px;
                                }

                                @media screen and (min-width: @screen__xl) {
                                    grid-gap: 40px;
                                    padding: 0 40px;
                                }
                            }
                    
                            fieldset {
                                @media screen and (min-width: @screen__t) {
                                    max-width: 192px;
                                }
                            }
                        }
                    
                        &.wtai-col-2 {
                            position: relative;

                            @media screen and (min-width: @screen__t) {
                                border-right: 1px solid #e3e3e3;
                                border-left: 1px solid #e3e3e3;
                                margin: 0;
                                margin-right: 15px;
                                max-width: 400px;
                                padding-right: 20px;
                            }
                    
                            @media screen and (min-width: @screen__m) {
                                max-width: 200px;
                                padding-left: 20px;
                                padding-right: 0;
                                border-left: none;
                            }
                    
                            @media screen and (min-width: @screen__l) {
                                max-width: 400px;
                            }
                    
                            @media screen and (min-width: @screen__xl) {
                                max-width: 450px;
                            }
                    
                            .wtai-field-columns {
                                display: flex;
                                flex-direction: column;
                                overflow-y: auto;
                        
                                @media screen and (min-width: @screen__t) {
                                    flex-direction: unset;
                                    flex-wrap: wrap;
                                }
                    
                                @media screen and (min-width: @screen__m) {
                                    max-height: 150px;
                                }
                    
                                @media screen and (min-width: @screen__l) {
                                    max-height: 185px;
                                }
                        
                                .wtai-fieldset-title {
                                    flex: 100%;
                                }
                        
                                .wtai-field {
                                    flex: 100%;
                    
                                    &:not(:first-child) {
                                        @media screen and (min-width: @screen__l) {
                                            flex: 50%;
                                        }
                                    }

                                    &.wtai-select-all {
                                        @media screen and (min-width: @screen__l) {
                                            flex: 100%;
                                        }
                                    }
                        
                                    &:nth-child(odd) {
                                        .wtai-label {
                                            padding-right: 20px;
                                        }
                                    }

                                    .wtai-thumbnail-text {
                                        font-weight: 400;
                                        font-style: italic;
                                        font-size: 11px;
                                    }
                                }
                            }

                            .wtai-special-instructions {
                                position: absolute;
                                bottom: 0;
                                width: 100%;
                                background: #ffffff;
                                left: 0;
                                padding: 10px 20px;
                                border-top: solid 1px #e3e3e3;

                                .admin__field-label {
                                    color: #41362f;
                                    font-size: 14px;
                                    font-weight: 600;
                                }

                                .wtai-control {
                                    margin-top: 10px;

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

                                    textarea {
                                        width: 100%;
                                        resize: none;
                                        font-size: 13px;
                                    }

                                    .wtai-text-length {
                                        font-size: 11px;
                                        text-align: right;
                                    }
                                }

                                .admin__field-tooltip {
                                    margin-top: 0;
                                }
                            }
                        }
                    
                        &.wtai-input-col {
                            @media screen and (min-width: @screen__m) {
                                max-width: 200px;
                                padding-left: 0;
                            }

                            .wtai-label {
                                display: inline-block;
                                width: 40px;
                                word-break: break-word;
                            }
                    
                            .wtai-error-message {
                                max-width: 165px;
                            }
                            
                            .row {
                                .wtai-control {
                                    margin-bottom: 15px;
                                    align-items: center;
                                    display: flex;

                                    &.wtai-disabled {
                                        opacity: .5;
                                        pointer-events: none;
                                    }

                                    .wtai-input-number {
                                        width: 47px;
                                    }
                                }
                            }
                        }
    
                        .admin__field-label {
                            text-align: left;
        
                            &.wtai-strong {
                                font-weight: 600;
                            }
                        }
                    }
                }
        
                .wtai-grid-settings {
                    background: #fff;
                    border-bottom: solid 1px #e3e3e3;
                    border-top: solid 1px #e3e3e3;
                    bottom: 101px;
                    left: 0;
                    padding: 10px 30px;
                    position: fixed;
                    width: 100%;
            
                    .wtai-note {
                        color: #8C8F94;
                        font-size: 11px;
                        margin-top: 5px;
                        padding-left: 25px;
                    }
                }
            }
        }

        .modal-footer {
            border-top: solid 1px #e3e3e3;
            z-index: 1;

            .action-dismiss {
                display: none;

                @media screen and (min-width: 425px) {
                    display: inline-block;
                }
            }
        }
    }
}