funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Chatbox/index.scss

@@ -0,0 +1,966 @@
+
+
+/*=================== Chatbox (Loading) =================*/
+.custom-chatbox-loader-container {
+    --custom-chatbox-loader-color: #b9caf7;
+    --custom-chatbox-loader-color2: #0d6efd;
+
+    
+    width: 130px;
+    text-align: start;
+
+    .custom-chatbox-loader {
+        height: 4px;
+        width: 100%;
+        --c: no-repeat linear-gradient(var(--custom-chatbox-loader-color2) 0 0);
+        background: var(--c), var(--c), var(--custom-chatbox-loader-color);
+        background-size: 60% 100%;
+        animation: loader-move 3s infinite;
+    }
+
+
+    @keyframes loader-move {
+        0% {
+            background-position: -150% 0, -150% 0
+        }
+
+        66% {
+            background-position: 250% 0, -150% 0
+        }
+
+        100% {
+            background-position: 250% 0, 250% 0
+        }
+    }
+}
+
+
+
+.custom-chatbox-mini-loader {
+    --custom-chatbox-miniloader-color: rgba(0,0,0,.5);
+
+    width: 15px;
+    height: 15px;
+    margin: .5rem;
+    margin-bottom: 0;
+    border: 3px dotted var(--custom-chatbox-miniloader-color);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: mini-loader-spin 1s linear infinite;
+
+    @keyframes mini-loader-spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+
+    }
+}
+
+
+
+
+/*===================  Chatbox (Core) =================*/
+
+.custom-chatbox-circle {
+    --custom-chatbox-circle-color: #5A5EB9;
+    --custom-chatbox-circle-text: #fff;
+
+
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: var(--custom-chatbox-circle-color);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    color: var(--custom-chatbox-circle-text);
+    cursor: pointer;
+    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    z-index: 1030;
+    text-align: center;
+    vertical-align: middle;
+    transition: .1s ease-in-out;
+
+    > span {
+        display: inline-block;
+        margin-top: 25%;
+    }
+
+    &:hover {
+        transform: scale(1.2);
+    }
+
+    svg {
+        width: 30px;
+        height: 30px;
+
+        path {
+            stroke: #fff;
+        }
+    }
+}
+
+
+.custom-chatbox-close {
+    --custom-chatbox-close-color: #333;
+    
+    padding: 20px;
+    position: fixed;
+    bottom: calc(100vh - 55px);
+    z-index: 1032;
+    right: -15px;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background: none;
+    transition-delay: 0.05s; /* Prevent real-time update of store displacement */
+
+    path {
+        fill: var(--custom-chatbox-close-color);
+    }
+
+    &:hover {
+        transform: scale(1.2);
+        path {
+            fill: #f00
+        }
+    }
+
+}
+
+
+.custom-chatbox-container {
+    --custom-chatbox-w: 600px;
+    --custom-chatbox-h: 100vh;
+    --custom-chatbox-bg: #fff;
+    --custom-chatbox-input-bg: #fff;
+    --custom-chatbox-default-txt-color: #333;
+    --custom-chatbox-default-btn-color: #fff;
+    --custom-chatbox-msg-bg: #eaeaea;
+    --custom-chatbox-msg-bg2: #d1e6f8;
+    --custom-chatbox-msg-border: #ddd;
+    --custom-chatbox-primary-color: #5A5EB9;
+    --custom-chatbox-gray-color: #adadad;
+    --custom-chatbox-primary-text: #333;
+    --custom-chatbox-disable-color: #ccc;
+    --custom-chatbox-stop-color: #f00;
+    --custom-chatbox-time-color:  #96a2c1;
+    --custom-chatbox-msg-dotted-loader-size: 15px;
+    --custom-chatbox-content-w: calc(100% - 50px);
+    --custom-chatbox-toolkit-btn-color: #f8f9fa;
+    --custom-chatbox-toolkit-btn-border-color: #e9ecef;
+    --custom-chatbox-toolkit-btn-active-color: #c2dfff;
+    --custom-chatbox-newchat-btn-color: #f8f9fa;
+    --custom-chatbox-newchat-btn-border-color: #e9ecef;
+    --custom-chatbox-toolkit-opt-color: #f8f9fa;
+    --custom-chatbox-toolkit-opt-border-color: #e9ecef;
+    --custom-chatbox-toolkit-opt-active-color: #c2dfff;
+    --custom-chatbox-toolkit-btn-radius: 20px;
+    --custom-chatbox-questions-bg: #f5f5f5;
+    --custom-chatbox-questions-hover-bg: #e9e9e9;
+    --custom-chatbox-content-html-elem-border-color: #ddd;
+    --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
+    --custom-balloon-border-radius: 0.35rem;
+    --custom-balloon-color: rgba(16, 16, 16, 0.95);
+    --custom-balloon-text-color: #fff;
+    --custom-balloon-font-size: 12px;
+    --custom-balloon-move: 4px; 
+    --custom-toolkit-select-options-container-min-w: 135px; 
+    --custom-toolkit-select-options-container-max-h: 300px; 
+
+    
+    
+    min-width: var(--custom-chatbox-w);
+    max-width: var(--custom-chatbox-w);
+    margin: auto;
+    background: var(--custom-chatbox-bg);
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 1031;
+    height: var(--custom-chatbox-h);
+
+    /* disable popup */
+    &.popup-none {
+        position: relative;
+        bottom: auto;
+        right: auto;
+        box-shadow: none;
+    }
+
+    details {
+        font-style: italic;
+        margin: 0;
+        padding: 0;
+        font-size: 0.75rem;
+        margin-bottom: .5rem;
+        background: var(--custom-chatbox-msg-bg);
+        padding: .5rem;
+    }
+
+    summary {
+        cursor: pointer;
+        font-weight: bold;
+        color: var(--custom-chatbox-primary-color);
+        outline: none;
+    }
+
+    details[open] summary {
+        color: var(--custom-chatbox-primary-text);
+    }
+
+    h1 {
+        font-size: 1.35rem;
+    }
+    h2 {
+        font-size: 1.25rem;
+    }
+    h3 {
+        font-size: 1.125rem;
+    }
+
+    h4 {
+        font-size: 1rem;
+    }
+    h5 {
+        font-size: 0.875rem;
+    }
+    h6 {
+        font-size: 0.75rem;
+    }
+
+
+    /* message list */
+    .messages {
+        height: calc(100% - 125px);
+        overflow-y: auto;
+        margin-bottom: 10px;
+        font-size: 13px;
+        margin-right: 0;
+
+        img, svg, video, canvas, audio, iframe, embed, object {
+            display: inline;
+        }
+
+        &::-webkit-scrollbar {
+            width: 3px;
+        }
+    
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.2);
+        }
+    
+
+        > div:not(.newchat-btn) {
+            margin: 5px 0;
+            padding: 3px 5px;
+            border-radius: 0.35rem;
+            position: relative;
+        }
+
+        p {
+            margin: 3px 0;
+        }
+
+        .qa-timestamp {
+            font-size: 0.75rem;
+            color: var(--custom-chatbox-time-color);
+            font-style: italic;
+            font-weight: normal;
+            display: block;
+            text-align: right;
+        }
+
+        .qa-name {
+            font-weight: bold;
+            color: var(--custom-chatbox-primary-color);
+
+            svg, img {
+                max-height: 15px;
+            }
+        }
+        .qa-content {
+            background: var(--custom-chatbox-msg-bg);
+            padding: .5rem;
+            border-radius: 0.35rem;
+            margin-top: .3rem;
+            display: inline-block;
+            text-align: start;
+
+
+            /* Custom HTML Styles */
+            .table-container {
+                overflow-x: auto;
+                margin-bottom: .5rem;
+
+                &::-webkit-scrollbar {
+                    height: 10px;
+                }
+            
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(0, 0, 0, 0.2);
+                }
+
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    border-radius: 0.35rem;
+                    
+
+
+                    thead {
+                        background: var(--custom-chatbox-content-html-elem-bg);
+                        
+                        tr {
+                            white-space: nowrap;
+                        }
+                    }
+
+                    th, td {
+                        padding: .25rem;
+                        text-align: left;
+                        border: 1px solid var(--custom-chatbox-content-html-elem-border-color);
+                    }
+                }
+            }
+            
+
+        }
+
+
+        .request {
+            text-align: end;
+
+            .qa-content {
+                max-width: var(--custom-chatbox-content-w);
+                background: var(--custom-chatbox-msg-bg2);
+            }
+            
+        }
+        .reply {
+            text-align: start;
+
+            .qa-name {
+                display: flex;
+            }
+            
+            .qa-content {
+                width: var(--custom-chatbox-content-w);
+                background: transparent;
+                padding-top: 0;
+            }
+        }
+
+        .reply-waiting {
+            .qa-content {
+                
+            }
+        }
+
+        
+        /* copy button */
+        .copy-btn {
+            position: absolute;
+            left: calc(var(--custom-chatbox-content-w) - .7rem);
+            bottom: 0.5rem;
+            z-index: 1;
+            background: transparent;
+            border: none;
+            padding: 4px;
+            cursor: pointer;
+            opacity: 0.6;
+            transition: opacity 0.2s;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+        
+    }
+
+    /* dot loading */
+    .msg-dotted-loader-container {
+        font-weight: normal;
+        transform: translateY(-5px);
+        display: flex;
+        align-items: center;
+        margin-top: .4rem;
+        margin-left: .3rem;
+        color: var(--custom-chatbox-gray-color);
+    }
+    .msg-dotted-loader-text {
+        transform: translateY(-10%);
+    }
+    .msg-dotted-loader {
+        position: relative;
+        text-align: center;
+        display: inline-block;
+        width: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
+        height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
+        margin-right: .1rem;
+    }
+    .msg-dotted-loader::after ,
+    .msg-dotted-loader::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--custom-chatbox-msg-dotted-loader-size);
+        height: var(--custom-chatbox-msg-dotted-loader-size);
+        border-radius: 50%;
+        border: 2px var(--custom-chatbox-gray-color);
+        border-style: dotted solid dotted solid;
+        animation: turn-left 1.5s linear infinite;
+    }
+    .msg-dotted-loader::before {
+        left: calc(var(--custom-chatbox-msg-dotted-loader-size)/2/2 * -1);
+        top: calc(var(--custom-chatbox-msg-dotted-loader-size)/2/2 * -1);
+        width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size)/2);
+        height: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size)/2);
+        border-style: dotted dotted solid solid;
+        animation: msg-dotted-loader-anim--turn-right 1.5s linear infinite;
+    }
+    @keyframes msg-dotted-loader-anim--turn-right {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes turn-left {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(-360deg);
+        }
+    }
+
+
+    /* control area */
+    .msgcontrol {
+        display: flex;
+        position: absolute;
+        bottom: 10px;
+        z-index: 1;
+        width: calc(100% - 40px);
+        border: 1px solid var(--custom-chatbox-gray-color);
+        border-radius: 0.35rem;
+        transition: all 0.3s ease;
+        background: var(--custom-chatbox-input-bg);
+
+        img, svg, video, canvas, audio, iframe, embed, object {
+            display: inline;
+        }
+
+        &.focus {
+            border-color: var(--custom-chatbox-primary-color);
+        }
+
+
+        .messageInput {
+            width: 100%;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            border: none;
+            outline: none;
+            margin-bottom: 2.2rem;
+
+            &:focus,
+            &:focus-visible {
+                outline: none;
+                box-shadow: none;
+            }
+
+            .messageInput-control {
+                background: var(--custom-chatbox-input-bg);
+                padding: .5rem;
+                border-radius: 0.35rem;
+                width: 100%;
+                color: var(--custom-chatbox-default-txt-color);
+                resize: none;
+                max-height: 50vh;
+                border: none;
+                
+
+                &::-webkit-scrollbar {
+                    width: 3px;
+                }
+            
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(0, 0, 0, 0.2);
+                }
+            
+                &:focus,
+                &:focus-visible {
+                    border-color: transparent;
+                    outline: none;
+                    box-shadow: none;
+                }
+            
+
+            }
+            
+        }
+
+        button {
+            padding: 6px;
+            border: none;
+            position: absolute;
+            background-color: var(--custom-chatbox-primary-color);
+            color: var(--custom-chatbox-default-btn-color);
+            border: 1px solid var(--custom-chatbox-primary-color);
+            border-radius: 50%;
+            cursor: pointer;
+            margin-left: .5rem;
+            min-width: 30px;
+            font-size: 0.875rem;
+            z-index: 2;
+            right: .4rem;
+            bottom: .3rem;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+
+            path {
+                fill: var(--custom-chatbox-default-btn-color);
+            }
+
+            &:hover {
+                transform: scale(1.1);
+            }
+
+            &:disabled {
+                opacity: .7;
+            }
+
+            &.is-suspended {
+                background-color: var(--custom-chatbox-stop-color);
+                border-color: var(--custom-chatbox-stop-color);
+            }
+            
+        }
+
+    }
+
+ 
+
+     /* loading */
+    .loading {
+        margin-top: 0;
+        height: 5px;
+        position: absolute;
+        bottom: 5px;
+        width: calc(100% - 40px);
+        z-index: 1;
+    }
+
+    /* new chat button */
+    .newchat-btn {
+        text-align: center;
+        position: absolute;
+        bottom: 115px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+        
+        > button {
+            padding: 3px 6px;
+            background-color: var(--custom-chatbox-newchat-btn-color);
+            border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.8125rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+            img, svg, video, canvas, audio, iframe, embed, object {
+                display: inline;
+            }
+
+            &:hover {
+                transform: translateY(-2px);
+            }
+    
+        }
+    }
+
+
+
+    /* toolkit buttons */
+    .toolkit-btns {
+        display: flex;
+        position: absolute;
+        bottom: 15px;
+        margin-left: 5px;
+        z-index: 1;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: center;
+
+
+        button {
+            padding: 3px 6px;
+            background-color: var(--custom-chatbox-toolkit-btn-color);
+            border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
+            border-radius: var(--custom-chatbox-toolkit-btn-radius);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.75rem;
+
+            
+            img, svg, video, canvas, audio, iframe, embed, object {
+                display: inline;
+            }
+
+
+            &:hover {
+                background-color: var(--custom-chatbox-toolkit-btn-border-color);
+                transform: translateY(-2px);
+            }
+
+            &.opt-active,
+            &.active {
+                background-color: var(--custom-chatbox-toolkit-btn-active-color);
+            }
+            
+            
+        }
+   
+    }
+
+    /* toolkit options */
+    @keyframes dropupAnimation {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .toolkit-select-wrapper {
+        position: relative;
+        display: inline-block;
+
+        .toolkit-select-btn {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border: 1px solid var(--custom-chatbox-gray-color);
+            border-radius: var(--custom-chatbox-toolkit-btn-radius);
+            cursor: pointer;
+        }
+
+        .toolkit-select-arrow {
+            margin-left: 8px;
+            font-size: 10px;
+            transition: transform 0.2s ease;
+        }
+
+        .toolkit-select-arrow.active {
+            transform: rotate(180deg);
+        }
+        
+        .toolkit-select-options-container {
+            z-index: 1000;
+            width: 100%;
+            min-width: var(--custom-toolkit-select-options-container-min-w);
+            transform: translateY(-100%);
+        }
+    
+        .toolkit-select-options {
+            background-color: var(--custom-chatbox-toolkit-opt-color);
+            border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
+            border-radius: 4px;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 10px;
+            max-height: var(--custom-toolkit-select-options-container-max-h);
+            min-width: var(--custom-toolkit-select-options-container-min-w);
+            overflow-y: auto;
+            animation: dropupAnimation 0.2s ease;
+
+            position: absolute;
+            bottom: 1rem;
+            left: 0;
+            right: 0;
+            display: none;
+            z-index: 1000;
+
+            &.active {
+                display: block;
+            }
+
+
+            &::-webkit-scrollbar {
+                width: 3px;
+            }
+        
+            &::-webkit-scrollbar-thumb {
+                background: rgba(0, 0, 0, 0.2);
+            }
+        }
+
+        .toolkit-select-option {
+            padding: 3px 6px;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            font-size: 0.75rem;
+
+            &.cancel {
+                color: var(--custom-chatbox-gray-color);
+            }
+
+            &.selected:not(.cancel),
+            &:hover {
+                background-color: var(--custom-chatbox-toolkit-opt-active-color);
+            }
+        }
+
+    }
+
+
+    /* default questions */
+    .default-questions-title {
+        margin-bottom: .5rem;
+    }
+    .default-questions {
+        padding: 15px;
+        width: 100%;
+    }
+    
+    .default-question-item {
+        padding: .3rem 1rem;
+        margin-bottom: .2rem;
+        background-color: var(--custom-chatbox-questions-bg);
+        border-radius: 0.35rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            background-color: var(--custom-chatbox-questions-hover-bg);
+        }
+
+        
+        &:last-child {
+            margin-bottom: 0;
+        } 
+
+    }
+    
+
+    /* Tooltip */
+    button[aria-label][data-balloon-pos] {
+        overflow: visible;
+    }
+    
+    [aria-label][data-balloon-pos] {
+        cursor: pointer;
+    }
+    
+    [aria-label][data-balloon-pos]:after {
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.18s ease-out 0.18s;
+        text-indent: 0;
+        font-weight: normal;
+        font-style: normal;
+        text-shadow: none;
+        font-size: var(--custom-balloon-font-size);
+        background: var(--custom-balloon-color);
+        border-radius: 2px;
+        color: var(--custom-balloon-text-color);
+        border-radius: var(--custom-balloon-border-radius);
+        content: attr(aria-label);
+        padding: .5em 1em;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 10;
+    }
+    
+    [aria-label][data-balloon-pos]:before {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-top-color: var(--custom-balloon-color);
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.18s ease-out 0.18s;
+        content: "";
+        position: absolute;
+        z-index: 10;
+    }
+    
+    [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
+        opacity: 1;
+        pointer-events: none;
+    }
+
+    [aria-label][data-balloon-pos][data-balloon-break]:after {
+        white-space: pre;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
+        white-space: pre-line;
+        word-break: break-word;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
+        transition: none;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
+        transform: translate(-50%, 0);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
+        transform: translate(-50%, 0);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
+        left: 0;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
+        left: 5px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
+        right: 0;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
+        right: 5px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
+        transform: translate(0, 0);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
+        transform: translate(0, 0);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
+        bottom: 100%;
+        transform-origin: top;
+        transform: translate(0, var(--custom-balloon-move));
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
+        margin-bottom: 10px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
+        left: 50%;
+        transform: translate(-50%, var(--custom-balloon-move));
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
+        top: 100%;
+        transform: translate(0, calc(var(--custom-balloon-move) * -1));
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
+        margin-top: 10px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-bottom-color: var(--custom-balloon-color);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
+        left: 50%;
+        transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
+        transform: translate(0, -50%);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
+        transform: translate(0, -50%);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
+        right: 100%;
+        top: 50%;
+        transform: translate(var(--custom-balloon-move), -50%);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
+        margin-right: 10px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-left-color: var(--custom-balloon-color);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
+        left: 100%;
+        top: 50%;
+        transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
+        margin-left: 10px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-right-color: var(--custom-balloon-color);
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length]:after {
+        white-space: normal;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
+        width: 80px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
+        width: 150px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
+        width: 260px;
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
+        width: 380px;
+    }
+    
+    @media screen and (max-width: 768px) {
+        [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
+            width: 90vw;
+        }
+    }
+    
+    [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
+        width: 100%;
+    }
+    
+
+}