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

/* eslint-disable Magento2.Less.ClassNaming.NotAllowedSymbol */

.wtai-categories-index,
.wtai-edit-modal-wrapper,
.wtai-grid-index {
    .wtai-bulk-generate-form {
        .wtai-thumbnail-field:hover {
            .tooltip-content {
                display: block;
            }
        }

        .tooltip {
            display: block;

            .tooltip-content {
                padding: 10px;
                background: #fff;
                margin-left: 0;
                margin-top: 3px;
                box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
                color: #2C3338;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
                width: 300px;
                max-width: none;
                position: fixed;

                &::before {
                    border-color: transparent transparent #fff transparent;
                    border-style: solid;
                    border-width: 10px;
                    top: -20px;
                    content: "";
                    left: 30px;
                    transform: translate(-50%);
                    position: absolute;
                    opacity: 1;
                }
            }
        }

        .wtai-keyword-optimization-tab {
            .wtai-auto-text-opt-help-container {
                .admin__field-tooltip {
                    .admin__field-tooltip-content {
                        bottom: 28px;
                    }
                }
            }
        }
    }

    .wtai-bottom .wtai-right .wtai-field,
    .wtai-top .wtai-col-right .wtai-field,
    .wtai-top .wtai-col-middle .wtai-field,
    .wtai-top .wtai-col-left .wtai-field .admin__action-dropdown-menu .wtai-field,
    .wtai-fieldset .wtai-field {
        &:hover .wtai-disabled-tooltip {
            display: block;
        }

        .wtai-disabled-tooltip {
            &:hover {
                display: block;
            }
        }
    }

    
    .wtai-top .wtai-col-left .wtai-field .wtai-custom-action-select-wrap {
        &:hover .wtai-disabled-tooltip.wtai-parent {
            display: block;
        }

        .wtai-disabled-tooltip {
            &:hover {
                display: block;
            }
        }
    }

    .wtai-bottom .wtai-right .wtai-field,
    .wtai-top .wtai-col-right .wtai-field,
    .wtai-top .wtai-col-left .wtai-field,
    .wtai-top .wtai-col-middle .wtai-field,
    .wtai-fieldset .wtai-field {
        position: relative;

        .wtai-disabled-tooltip {
            display: none;
            position: absolute;
            left: 0;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 1px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
            top: -200%;
            width: max-content;
            z-index: 1;

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

            .wtai-disabled-tooltip-content {
                color: #2C3338;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }

        .wtai-custom-action-select-wrap {
            .wtai-disabled-tooltip {
                top: -150%;
            }
        }
    }

    .admin__field-tooltip.wtai-small .admin__field-tooltip-action:before {
        font-size: 1.6rem;
    }

    .admin__field-tooltip {
        position: relative;

        &.wtai-big {
            .admin__field-tooltip-content {
                @media screen and (min-width: 1180px) {
                    width: 60rem;
                }
            }
        }

        .admin__field-tooltip-action {
            margin-left: 0;
        }

        .admin__field-tooltip-content {
            background: #fffbbb;
            border: 1px solid #afadac;
            bottom: auto;
            padding: 1.5rem 2.5rem;
            right: -3.8rem;
            top: 32px;
            scrollbar-color: #888888 #fffbbb;

            /* scrolling changes */
            padding-right: 0;
            /* end scrolling changes */

            left: -28px;
            top: 39px;

            &:before,
            &:after {
                top: unset;
                transform: rotate(180deg);
                bottom: 100%;
                left: 2rem;
                pointer-events: none;
            }

            &:after {
                margin-top: unset;
                margin-bottom: -1px;
            }

            &.wtai-bottom-left {
                left: -28px;
                bottom: 35px;
                border-top-color: #afadac;
                top: unset;

                &:before,
                &:after {
                    transform: unset;
                    top: 100%;
                    bottom: unset;
                    border: 1.6rem solid transparent;
                    border-top-color: #afadac;
                }
    
                &:after {
                    margin-bottom: unset;
                    margin-top: -1px;
                    border-top-color: #fffbbb;
                }
            }

            &.wtai-upper-right {
                left: unset;
                /* bottom: 35px; */
                border-top-color: #afadac;
                right: -45px;

                &:before,
                &:after {
                    transform: unset;
                    top: 100%;
                    right: 0;
                    left: unset;
                    right: 1.8rem;
                    top: unset;
                    bottom: 100%;
                    transform: rotate(180deg);
                    border-top-color: #afadac;
                }

                &:after {
                    border-top-color: #fffbbb;
                }
            }

            &.wtai-upper-right-corner {
                left: unset;
                top: 100%;
                /* bottom: 35px; */
                border-top-color: #afadac;
                right: -4px;

                &:before,
                &:after {
                    display: none;
                }
            }

            &.wtai-bottom-right {
                left: unset;
                right: -2.8rem;
                bottom: 5.2rem;
                border-top-color: #afadac;
                top: unset;

                &:before,
                &:after {
                    transform: unset;
                    top: 100%;
                    bottom: unset;
                    border: 1.6rem solid transparent;
                    border-top-color: #afadac;
                    right: 2rem;
                    left: unset;
                }

                &:after {
                    margin-bottom: unset;
                    margin-top: -1px;
                    border-top-color: #fffbbb;
                }
            }
            
            .wtai-content-wrapper p:last-child,
            .wtai-content-wrapper p:not(.wtai-heading):not(.wtai-default-margin):last-child {
                margin-bottom: 0;
            }

            .wtai-content-wrapper {
                background: #fffbbb;
                color: #303030;
                display: block;
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
                position: relative;
                
                /* scrolling changes */
                padding-right: 2.5rem;
                margin-right: 0;
                max-height: 400px;
                overflow-y: auto;
                /* end scrolling changes */

                .wtai-heading {
                    font-size: 14px;
                    font-weight: normal;
                }

                .wtai-note {
                    font-size: 11px;
                    font-style: italic;
                }

                p:not(.wtai-heading) {
                    margin-bottom: 20px;
                }
            }

            ul {
                li.wtai-list-disc {
                    list-style-type: disc;
                    margin-left: 18px;
                }
            }
        }

        .admin__control-text:focus + .admin__field-tooltip-content,
        &:hover .admin__field-tooltip-content {
            display: none;
        }

        &.active {
            z-index: 501;

            .admin__field-tooltip-content {
                display: block;
                z-index: 501;
            }
        }
    }

    .page-actions-buttons {
        .wtai-tooltip-wrapper {
            line-height: 30px;
            margin-left: 10px;
            width: 20px;
        }

        > .page-actions-buttons.wtai-input-wrapper {
            .wtai-tooltip-wrapper {
                margin-left: 0;
            }
        }
    }
}

.wtai-categories-index,
.wtai-grid-index {
    .sticky-header {
        .admin__data-grid-header-row {
            .wtai-bulk-actions-dropdown {
                margin-right: 20px;

                .action-menu {
                    min-width: max-content;
                }

                .admin__field-tooltip.wtai-small {
                    position: absolute;
                    right: -5px;
                    text-align: left;
                    top: 0;
                }
            }
        }
    }

    .admin__data-grid-header-row {
        .wtai-bulk-actions-dropdown {
            .action-menu {
                min-width: max-content;
            }

            .admin__field-tooltip.wtai-small {
                position: absolute;
                right: -10px;
                top: 0;
            }
        }

        .admin__field-tooltip .admin__field-tooltip-content {
            width: 60rem;
            width: 851px;
            z-index: 281;
            max-width: ~"calc(100vw - 400px)";

            .wtai-scrollable-wrapper {
                z-index: 4;
                position: relative;
                background-color: #fffbbb;
                padding-right: 0;

                .wtai-content-wrapper {
                    padding: 0;

                    > div:last-child {
                        margin-right: 20px;
                    }
                }
            }

            .wtai-content-wrapper {
                display: flex;
                gap: 30px;
                max-height: ~"calc(100vh - 400px)";
                overflow-y: auto;

                div:not(.wtai-separator) {
                    width: 50%;
                }
                
                div.wtai-left-fixed-width {
                    width: 430px;
                }

                div.wtai-right-fixed-width {
                    width: 320px;
                }

                div.wtai-full-col {
                    width: 100%;
                }

                div.wtai-flex-col {
                    display: flex;
                    column-gap: 20px;
                }

                .wtai-separator {
                    border-left: 1px solid #E0E0E0;
                    width: 1px;
                }
            }
        }
    }

    .wtai-no_activity_days-wrapper {
        position: relative;

        &:hover .wtai-no_activity_days-tooltip {
            display: block;
        }

        .wtai-no_activity_days-tooltip {
            display: none;
            position: absolute;
            right: 0;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 1px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
            top: -300%;
            width: max-content;
            z-index: 1;

            &:hover {
                display: block;
            }

            .wtai-no_activity_days-tooltip-content {
                color: #2C3338;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
    }
}

.wtai-auto-transfer-cron-not-available {
    background-image: url("../WriteTextAI_WriteTextAI/images/generate-error.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    margin-left: 3px;
}