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

.wtai-progress-bar-container {
    left: 50%;
    max-width: 800px;
    width: 800px;
    position: fixed;
    top: 40px;
    transform: translate(-50%);
    z-index: 503;

    &.wtai-keywords-section {
        .wtai-message-container {
            .wtai-action .wtai-cancel {
                margin-right: 5px;
            }
            
            .wtai-see-more {
                position: static;
                float: right;
            }
        }
    }

    &.wtai-no-display {
        display: none;
    }

    &.wtai-saw-more {
        .wtai-header-container {
            margin-bottom: 0;
            &:not(.wtai-has-dismiss-action) {
                min-height: 0;
                height: 0;
            }
            
            .wtai-header {
                opacity: 0;
                visibility: hidden;
            }
        }

        .wtai-message-container {
            .wtai-see-more {
                display: none;
                pointer-events: none;
            }

            .wtai-user-status-container .wtai-user-status:first-child {
                border-top: none;
            }
            .wtai-user-status-container .wtai-user-status:last-child {
                border-bottom: none;
            }
        }
    }

    &.wtai-saw-less {
        .wtai-message-container {
            max-height: 52px;
            overflow: hidden;
    
            .wtai-see-less {
                display: none;
                pointer-events: none;
            }

            .wtai-dismiss {
                display: none;
            }
        }
    }

    .wtai-header-container {
        align-items: center;
        display: flex;
        margin-bottom: 10px;
        min-height: 32px;
        transition: max-height 1s ease;

        .wtai-header {
            opacity: 1;
            transition: opacity 1s ease;
            visibility: visible;

            &.wtai-ongoing span::before {
                background-image: url("../WriteTextAI_WriteTextAI/images/generate-ongoing.gif");
                mix-blend-mode: multiply;
            }

            &.wtai-completed span::before {
                background-image: url("../WriteTextAI_WriteTextAI/images/generate-completed.png");
            }

            &.wtai-error span::before {
                background-image: url("../WriteTextAI_WriteTextAI/images/generate-error.png");
            }

            span {
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 19px;

                &::before {
                    background-color: transparent;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 19px;
                    margin-right: 10px;
                    vertical-align: middle;
                    width: 19px;
                }
            }
        }
    }

    .wtai-message-container {
        background: #FFFFFF;
        border-radius: 1px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
        max-height: 700px;
        overflow: hidden;
        padding: 10px;
        position: relative;
        transition: max-height 1s ease;

        &.wtai-no-display {
            display: none;
        }

        &.wtai-error {
            background: #FCEFEF;
            border-left: solid 6px #DC3232;
            border-radius: 3px;
            display: flex;
            padding: 20px 30px;

            &.wtai-no-display {
                display: none;
            }

            .wtai-content {
                color: #303030;
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 19px;
            }

            .wtai-action {
                line-height: 12px;

                button {
                    background-color: transparent;
                    border: none;
                    height: 12px;
                    padding: 0;
                    position: relative;
                    text-align: center;
                    width: 12px;

                    &::before {
                        background-color: transparent;
                        background-image: url("../WriteTextAI_WriteTextAI/images/close.png");
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        content: "";
                        height: 100%;
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                }
            }
        }

        &.wtai-all-done {
            .wtai-action {
                min-width: 0;
            }
        }
        
        .wtai-user-status-container {
            max-height: 500px;
            overflow: auto;
            
            .wtai-user-status:not(:first-child) {
                .wtai-comment {
                    display: none;
                }
            }

            .wtai-user-status {
                border-bottom: solid 1px #E3E3E3;
                display: flex;
                margin-bottom: 5px;
                padding-bottom: 5px;

                &:first-child {
                    border-top: solid 1px #E3E3E3;
                    margin-top: 5px;
                    padding-top: 5px;
                }

                &.wtai-cancelled,
                &.wtai-completed {
                    .wtai-content {
                        .wtai-label {
                            &::before {
                                background-image: url("../WriteTextAI_WriteTextAI/images/generate-completed.png");
                            }
                        }
                    }

                    .wtai-action {
                        display: flex;

                        .wtai-close {
                            margin: auto 0;
                        }
                    }
                }
                
                &.wtai-error {
                    .wtai-content {
                        .wtai-label {
                            &::before {
                                background-image: url("../WriteTextAI_WriteTextAI/images/generate-error.png");
                            }
                            color: #DC3232;
                        }
                    }
                }

                &.wtai-error,
                &.wtai-cancelling,
                &.wtai-cancelled {
                    .wtai-content {
                        .wtai-progress-bar {
                            &::-webkit-progress-value {
                                background: rgba(65, 54, 47, 0.5);
                            }
            
                            &::-moz-progress-bar {
                                background: rgba(65, 54, 47, 0.5);
                            }
                        }
                    }
                }
            }
        }
        
        .wtai-see-more,
        .wtai-see-less {
            background: none;
            border: none;
            bottom: 15px;
            box-shadow: none;
            padding: 0;
            position: absolute;
            right: 10px;

            span {
                color: #0073AA;
                font-family: 'Open Sans';
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
    
                &::after {
                    background-color: transparent;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 8px;
                    margin-left: 4px;
                    width: 8px;
                }
            }
        }

        .wtai-see-more {
            span {
                &::after {
                    background-image: url("../WriteTextAI_WriteTextAI/images/see_more.png");
                }
            }
        }

        .wtai-see-less {
            &.wtai-all-products-failed {
                position: static;
                float: right;
                display: none;
            }

            span {
                &::after {
                    background-image: url("../WriteTextAI_WriteTextAI/images/see_less.png");
                }
            }
        }

        .wtai-content {
            flex-grow: 1;
            width: 80%;

            .wtai-label {
                color: #303030;
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                display: inline-flex;
                max-width: 90%;
                align-items: flex-start;

                &.wtai-error {
                    color: #DC3232;
                    max-width: 500px;
                }

                &::before {
                    background-color: transparent;
                    background-image: url("../WriteTextAI_WriteTextAI/images/generate-ongoing.gif");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 19px;
                    margin-right: 7px;
                    vertical-align: middle;
                    position: relative;
                    width: 34px;
                    max-width: 22px;
                    mix-blend-mode: multiply;
                }

                .wtai-red-highlight {
                    margin-left: 4px;
                    color: #DC3232;
                    font-weight: 600;
                }
            }

            .wtai-retry {
                cursor: pointer;
            }

            .wtai-summary-container {
                float: right;
            }

            .wtai-transfer-additional-comment {
                margin-left: 29px;
                max-width: ~"calc(100% - 124px)";

                span {
                    color: #8C8F94;
                    font-family: 'Open Sans';
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 16px;
                }

                span.wtai-red {
                    color: #DC3232;
                }
            }

            .wtai-count {
                color: #303030;
                /*float: right; */
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 19px;
            }

            .wtai-failed-count {
                color: #DC3232;
                /* loat: right; */
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 19px;
                margin-left: 3px;
            }

            .wtai-user {
                color: #303030;
                font-family: 'Open Sans';
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
                margin-left: 29px;
                margin-top: 4px;
            }

            .wtai-progress-bar {
                border-radius: 10px;
                height: 8px;
                margin-left: 29px;
                margin-top: 8px;
                width: ~"calc(100% - 29px)";

                &::-webkit-progress-bar {
                    background: #F6F7F7;
                }

                &::-webkit-progress-value {
                    background: #EB5202;
                }

                &::-moz-progress-bar {
                    background: #EB5202;
                }
            }
        }

        .wtai-content.wtai-is-uploading {
            .wtai-label {
                max-width: 100%;
                &::before {
                    background-color: transparent;
                    background-image: url("../WriteTextAI_WriteTextAI/images/generate-error.png");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 19px;
                    margin-right: 10px;
                    vertical-align: middle;
                    position: relative;
                    width: 34px;
                    max-width: 22px;
                    mix-blend-mode: multiply;
                }
            }
            .wtai-progress-bar {
                display: flex;
                margin-left: 0;

                &::before {
                    background-color: transparent;
                    background-image: url("../WriteTextAI_WriteTextAI/images/generate-ongoing.gif");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 19px;
                    margin-right: 10px;
                    vertical-align: middle;
                    position: relative;
                    width: 34px;
                    max-width: 22px;
                    mix-blend-mode: multiply;
                    bottom: 9px;
                }
            }
        }

        .wtai-comment {
            margin-left: 29px;
            max-width: ~"calc(100% - 124px)";

            span {
                color: #8C8F94;
                font-family: 'Open Sans';
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
            }

            span.wtai-red {
                color: #DC3232;
            }
        }

        .wtai-action {
            align-items: flex-start;
            display: flex;
            margin-left: 20px;
            min-width: 73px;

            button {
                background: #514943;
                height: 33px;
                vertical-align: middle;
                min-width: 73px;
                width: auto;

                span {
                    color: #FFFFFF;
                    font-family: 'Open Sans';
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 19px;
                }
            }
        }

        .wtai-dismiss {
            background: none;
            border: none;
            margin-left: auto;
            padding: 0;

            span {
                border: none;
                color: #0073AA;
                font-family: 'Open Sans';
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
            }
        }
    }
}

.wtai-keywords-section {
    &.wtai-progress-bar-container {
        min-width: 800px;
        
        .wtai-message-container {
            &.wtai-no-comment {
                .wtai-comment {
                    display: none;
                }
    
                .wtai-see-less {
                    display: none;
                }
    
                .wtai-user-status-container {
                    .wtai-user-status {
                        &:first-child {
                            border-bottom: none;
                        }
                    }
                }
            }
            
            .wtai-content .wtai-label.wtai-error {
                flex-wrap: wrap;
                padding-left: 30px;
                grid-column-gap: 5px;
            }

            .wtai-user-status-container {
                .wtai-user-status {
                    border: none;

                    &.wtai-error .wtai-content .wtai-label::before {
                        position: absolute;
                        left: 10px;
                    }
                }
            }
        }
    }
}