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

 .wtai-edit-modal {
    .wtai-keywords {
        padding-bottom: 20px;

        .wtai-step1-content {
            display: flex;
            column-gap: 20px;

            .wtai-col-1 {
                .wtai-thumbnail {
                    img {
                        border: 1px solid #DDDDDD;
                        width: 70px;
                        height: 70px;
                        object-fit: contain;
                    }
                }
            }

            .wtai-col-2 {
                flex-grow: 1;
                /** 70px from image and 15px from padding = 85px */
                max-width: ~"calc(100% - 85px)";

                .wtai-keywords-main {
                    margin-bottom: 10px;
                    min-height: 119px;

                    .wtai-title {
                        font-weight: 600;
                        font-size: 13px;
                        margin-bottom: 3px;
                        display: flex;
                        align-items: center;
                        gap: 5px;

                        .wtai-notes {
                            font-weight: 400;
                            font-style: italic;
                        }

                        .admin__field-tooltip.wtai-small {
                            top: -3px;
                        }
                    }

                    .wtai-keyword-input {
                        width: 100%;
                        border: solid 1px #8c8f94;
                        padding: 3px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        position: relative;
                        min-height: 40px;

                        .wtai-keyword-items {
                            display: flex;
                            gap: 2px;
                            flex-wrap: wrap;
                            width: 100%;
    
                            .wtai-keyword-input-wrapper {
                                &:last-child {
                                    display: flex;
                                    flex-grow: 1;
                                }

                                .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);
                                }
                            }

                            .wtai-keyword-items-wrapper {
                                display: contents;
                            }

                            .wtai-keyword-item-group {
                                background-color: #FEA577;
                                font-size: 13px;
                                font-weight: 600;
                                padding: 7px 5px;
                                border-radius: 5px;
                                max-width: 100%;
                                display: flex;

                                .wtai-keyword-item {
                                    max-width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                .wtai-keyword-item-remove:after {
                                    content: '\e62f';
                                    font-family: 'Admin Icons';
                                    font-size: 8px;
                                    padding: 6px;
                                    cursor: pointer;
                                }
                            }
                        }

                        .wtai-input-keywords-error {
                            position: absolute;
                            bottom: -13px;
                            border-radius: 4px;
                            background-color: #e24556;
                            color: #fff;
                            font-size: 13px;
                            padding: 0 6px;
                        }
                        
                        input.admin__control-text {
                            -webkit-appearance: none;
                            appearance: none;
                            outline: none;
                            border: 0;
                            font-size: 13px;
                            background: transparent;
                            flex-grow: 1;

                            &.wtai-disabled {
                                cursor: not-allowed;
                                opacity: 0.5;
                            }
                        }

                        .wtai-keyword-input-disabled-mask {
                            background: #f2f2f2;
                            width: ~"calc(100% + 2px)";
                            height: ~"calc(100% + 2px)";
                            position: absolute;
                            right: -1px;
                            opacity: 0.5;
                            filter: grayscale(100%);
                        }
                    }
                    
                    .wtai-comments {
                        font-weight: 400;
                        font-size: 11px;
                        line-height: 15px;
                        color: #888888;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 3px;
                    }

                    .wtai-keyword-list {
                        display: flex;
                        flex-wrap: wrap;
                        font-size: 13px;

                        .wtai-keyword-item {
                            padding: 7px 15px;
                            border-right: solid 1px #8c8f94;

                            &:first-child {
                                padding-left: 0;
                            }

                            &:last-child {
                                border: none;
                            }
                        }

                    }
                }

                .wtai-advanced-keyword-optimization-grouping {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    background-color: #F0F0F0;
                    padding: 20px;

                    &.wtai-no-pro-access {
                        .wtai-fieldset-title:not(.wtai-grouping-main-title) {
                            opacity: 0.5;
                        }

                        .wtai-search-intent-help-container {
                            opacity: 0.5;
                            pointer-events: none;
                        }
                    }

                    .wtai-actions {
                        display: flex;
                        gap: 20px;
                        align-items: center;
                        margin-top: 20px;
                        justify-content: flex-end;

                        @media screen and (min-width: 1180px) {
                            margin-top: 0;
                            justify-content: normal;
                        }
                        
                        .wtai-refresh.wtai-link-style-button {
                            font-size: 13px;
                            font-weight: 400;
                            background-color: transparent;
                            border-color: transparent;
                            text-shadow: none;
                            display: flex;
                            align-items: center;
                            z-index: 1;
                            color: #007bdb;
                            text-decoration: none;
                
                            &:hover {
                                text-decoration: underline;
                            }

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

                            &::before {
                                content: url('../WriteTextAI_WriteTextAI/images/ic_refresh.png');
                                display: inline-block;
                                margin-right: 5px;
                                width: 17px;
                                height: 17px;
                            }

                            &:hover,
                            &:focus,
                            &:active {
                                box-shadow: none;
                            }
                        }

                        .action-primary.wtai-loading {
                            background-color: rgba(235, 82, 2, 0.5);
                            pointer-events: none;
                            border-color: rgba(235, 82, 2, 0.5);
                            position: relative;
                            &::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: "";
                                height: 18px;
                                width: 18px;
                                mix-blend-mode: multiply;
                                position: absolute;
                                right: 50%;
                                transform: translateX(50%);
                            }
                            .wtai-button-text {
                                visibility: hidden;
                            }
                        }
                    }

                    .wtai-left-side {
                        & > div:not(:last-child) {
                            margin-bottom: 13px;
                        }

                        .wtai-field {
                            &.wtai-upper-portion {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                min-height: 33px;
                            }
    
                            .wtai-fieldset-title.wtai-grouping-main-title {
                                font-weight: 600;
                                font-size: 14px;
                                line-height: 100%;
                            }
                        }
                    }
                    
                    .wtai-right-side {
                        margin-left: auto;
                        &  > *:not(:last-child) {
                            margin-bottom: 13px;
                        }
                        .wtai-step1-bottom-text {
                            .wtai-inprogress-text {
                                min-height: 33px;
                                align-items: center;
                            }
                        }
                    }
                }

                &.wtai-not-started {
                    .wtai-advanced-keyword-optimization-grouping {
                        .wtai-right-side {
                            .wtai-actions {
                                display: block;
                                text-align: right;
                            }
                        }
                    }
                }

                .wtai-bottom-contents {
                    align-items: flex-end;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    display: block;

                    @media screen and (min-width: 1180px) {
                        display: flex;
                        align-items: center;
                    }

                    &.wtai-justify-flex-end {
                        justify-content: flex-end;
                        flex-direction: column;
                    }

                    .wtai-search-intent-container {
                        .wtai-fieldset-title {
                            margin-bottom: 5px;
                            font-weight: 600;
                            font-size: 13px;
                            margin-bottom: 4px;
                        }

                        .wtai-search-intent-help-container {
                            display: block;
                            position: relative;
                            bottom: 6px;
                            left: 4px;
                        }

                        .wtai-field {
                            display: flex;
                            margin-bottom: 0;
                            align-items: center;
                            gap: 10px;

                            &.wtai-disabled {
                                cursor: not-allowed;

                                .wtai-search-intent-options {
                                    opacity: 0.5;
                                    pointer-events: none;

                                    .wtai-search-intent-option {
                                        &.wtai-selected.wtai-disabled-pro {
                                            color: #303030;
                                            border: solid 1px #8c8f94;
                                        }
                                    }
                                }
                            }

                            .wtai-search-intent-options {
                                display: flex;
                                gap: 10px;
                                flex-wrap: wrap;

                                &.wtai-one-item-selected {
                                    .wtai-intent-item-container.wtai-selected {
                                        cursor: not-allowed;

                                        &.wtai-navigational {
                                            &:hover {
                                                .wtai-intent-item-tooltip.wtai-navigational {
                                                    display: none;
                                                }
                                            }
                                        }
    
                                        &.wtai-informational {
                                            &:hover {
                                                .wtai-intent-item-tooltip.wtai-informational {
                                                    display: none;
                                                }
                                            }
                                        }
                                        
                                        .wtai-intent-item-tooltip.wtai-single-item {
                                            &.wtai-show {
                                                display: block;
                                            }
                                        }
                                    }
                                }


                                .wtai-intent-item-container {
                                    display: inline-block;
                                    padding: 5px 0;
                                    position: relative;
                                    cursor: pointer;

                                    &.wtai-navigational {
                                        &:hover {
                                            .wtai-intent-item-tooltip.wtai-navigational {
                                                display: block;
                                            }
                                        }
                                    }

                                    &.wtai-informational {
                                        &:hover {
                                            .wtai-intent-item-tooltip.wtai-informational {
                                                display: block;
                                            }
                                        }
                                    }
                                }

                                .wtai-search-intent-option {
                                    display: inline;
                                    border: solid 1px #8c8f94;
                                    padding: 5px 9px;
                                    border-radius: 3px;
                                    font-weight: 600;
                                    font-size: 13px;

                                    &.wtai-selected {
                                        &:not(.wtai-disabled) {
                                            color: #eb5202;
                                            border: solid 1px #eb5202;
                                        }

                                        &:not(.wtai-disabled-pro):after {
                                            content: '\e62d';
                                            display: inline-block;
                                            font-family: 'Admin Icons';
                                            margin-left: 5px;
                                            font-size: 11px;
                                            font-weight: 400;
                                        }
                                    }

                                    &.wtai-disabled {
                                        cursor: not-allowed;
                                        opacity: 0.5;
                                    }
                                }

                                .wtai-intent-item-tooltip {
                                    position: absolute;
                                    background-color: #fff;
                                    font-size: 13px;
                                    top: -32px;
                                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
                                    padding: 4px 8px;
                                    z-index: 2;
                                    display: none;
                                    left: 64%;
                                    transform: translate(-50%);
                                    width: max-content;
                                    border: none;

                                    &:after {
                                        border-color: #fff transparent transparent transparent;
                                        border-style: solid;
                                        border-width: 10px;
                                        top: 79%;
                                        content: "";
                                        left: 98px;
                                        transform: translate(-50%);
                                        position: absolute;
                                    }
                                }
                            }

                            .admin__actions-switch-text {
                                &::before {
                                    padding-left: 40px;
                                }
                            }
                        }
                    }
                }

                .wtai-failed-text {
                    color: #DC3232;
                    text-align: right;
                    font-size: 13px;
                    margin-bottom: 0;
                    margin-top: 3px;

                    &::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: 16px;
                        margin-right: 3px;
                        vertical-align: middle;
                        width: 16px;
                        position: relative;
                        bottom: 2px;
                    }
                }
                
                .wtai-inprogress-text {
                    display: flex;
                    text-align: right;
                    margin-bottom: 0;
                    justify-content: flex-end;
                    font-size: 13px;
                    line-height: 17px;

                    &:not(.wtai-no-loader) {
                        &::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: 18px;
                            margin-right: 10px;
                            vertical-align: middle;
                            width: 18px;
                            mix-blend-mode: multiply;
                        }
                    }
                }
                
                .wtai-step1-bottom-text {
                    min-height: 18px;

                    .wtai-negative-keywords-link {
                        font-size: 13px;
                        line-height: 100%;

                        a.wtai-disabled {
                            opacity: 0.5;
                            pointer-events: none;
                            cursor: not-allowed;
                        }
                    }
                }

                .wtai-auto-rewrite,
                .wtai-auto-generate {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    font-size: 13px;
                    min-height: 33px;

                    &.wtai-disable {
                        .admin__field-label {
                            opacity: 0.5;
                            pointer-events: none;
                        }
                    }
                }
            }
        }
    }
}