[data-balloon],
button[data-balloon] {
    overflow: visible
}

[data-balloon] {
    position: relative
}

[data-balloon]:hover:after,
[data-balloon]:hover:before {
    opacity: 1;
    pointer-events: auto
}

[data-balloon]:before {
    border: 4px solid transparent;
    border-top: 4px solid var(--bricks-tooltip-bg);
    content: "";
    display: none;
    height: 0;
    transform: translate(-50%);
    width: 0
}

[data-balloon]:after {
    background-color: var(--bricks-tooltip-bg);
    border-radius: 3px;
    color: #fff;
    color: var(--bricks-tooltip-text);
    content: attr(data-balloon);
    display: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 7px;
    text-transform: none;
    transform: translate(-50%);
    white-space: nowrap
}

[data-balloon]:not([data-balloon=""]):after,
[data-balloon]:not([data-balloon=""]):before {
    display: block
}

[data-balloon]:after,
[data-balloon]:before {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 10
}

[data-balloon-pos=top]:after,
[data-balloon-pos=top]:before {
    left: 50%;
    top: -6px
}

[data-balloon-pos=top]:before {
    border-bottom: none;
    border-top-color: var(--bricks-tooltip-bg)
}

[data-balloon-pos=top]:after {
    transform: translate(-50%, -100%)
}

[data-balloon-pos=top-left]:before {
    border-bottom-color: transparent;
    border-top-color: var(--bricks-tooltip-bg);
    left: 4px;
    top: 0;
    transform: translateY(-100%)
}

[data-balloon-pos=top-left]:after {
    left: 0;
    top: -8px;
    transform: translateY(-100%)
}

body.rtl [data-balloon-pos=top-left]:before {
    right: 4px
}

body.rtl [data-balloon-pos=top-left]:after {
    left: auto;
    right: 0;
    transform: translateY(-100%)
}

[data-balloon-pos=top-right]:before {
    border-bottom-color: transparent;
    border-top-color: var(--bricks-tooltip-bg);
    right: 4px;
    top: 0;
    transform: translateY(-100%)
}

[data-balloon-pos=top-right]:after {
    right: 0;
    top: -8px;
    transform: translateY(-100%)
}

body.rtl [data-balloon-pos=top-right]:before {
    left: 4px
}

body.rtl [data-balloon-pos=top-right]:after {
    left: 0;
    right: auto;
    transform: translateY(-100%)
}

[data-balloon-pos=bottom]:after,
[data-balloon-pos=bottom]:before {
    bottom: -6px;
    left: 50%
}

[data-balloon-pos=bottom]:before {
    border-bottom-color: var(--bricks-tooltip-bg);
    border-top: none
}

[data-balloon-pos=bottom]:after {
    transform: translate(-50%, 100%)
}

[data-balloon-pos=bottom-left]:after,
[data-balloon-pos=bottom-left]:before {
    bottom: -6px
}

[data-balloon-pos=bottom-left]:before {
    border-bottom-color: var(--bricks-tooltip-bg);
    border-top-color: transparent;
    left: 4px;
    transform: translate(50%)
}

[data-balloon-pos=bottom-left]:after {
    left: 0;
    transform: translateY(100%)
}

body.rtl [data-balloon-pos=bottom-left]:before {
    right: 4px;
    transform: translate(-50%)
}

body.rtl [data-balloon-pos=bottom-left]:after {
    left: auto;
    right: 0;
    transform: translateY(100%)
}

[data-balloon-pos=bottom-right]:after,
[data-balloon-pos=bottom-right]:before {
    bottom: -6px
}

[data-balloon-pos=bottom-right]:before {
    border-bottom-color: var(--bricks-tooltip-bg);
    border-top-color: transparent;
    right: 4px;
    transform: translate(-50%)
}

[data-balloon-pos=bottom-right]:after {
    right: 0;
    transform: translateY(100%)
}

body.rtl [data-balloon-pos=bottom-right]:before {
    left: 4px
}

body.rtl [data-balloon-pos=bottom-right]:after {
    left: 0;
    right: auto;
    transform: translateY(100%)
}

[data-balloon-pos=left]:after,
[data-balloon-pos=left]:before {
    right: 100%;
    top: 50%;
    transform: translate(-7px, -50%)
}

[data-balloon-pos=left]:before {
    border-left-color: var(--bricks-tooltip-bg);
    border-top-color: transparent;
    left: 0
}

[data-balloon-pos=right]:after,
[data-balloon-pos=right]:before {
    left: 100%;
    top: 50%;
    transform: translate(7px, -50%)
}

[data-balloon-pos=right]:before {
    border-right-color: var(--bricks-tooltip-bg);
    border-top-color: transparent;
    left: auto;
    right: 0
}

[data-balloon-length]:after {
    line-height: 1.2;
    white-space: normal
}

[data-balloon-length=fit]:after {
    width: 100%
}

[data-balloon-length=small]:after {
    width: 80px
}

[data-balloon-length=medium]:after {
    width: 160px
}

[data-balloon-length=large]:after {
    width: 240px
}

[data-balloon-length=xlarge]:after {
    width: 320px
}

[data-balloon-break]:after {
    white-space: pre
}

[data-balloon-break][data-balloon-length]:after {
    white-space: pre-line;
    word-break: break-word
}

[data-builder-mode=dark] {
    --bricks-tooltip-bg: #eaecef;
    --bricks-tooltip-text: #23282d
}

[data-builder-mode=dark] [data-balloon]:after {
    background-color: var(--bricks-tooltip-bg);
    color: var(--bricks-tooltip-text)
}

[data-builder-mode=dark] [data-balloon-pos=top-left]:before,
[data-builder-mode=dark] [data-balloon-pos=top-right]:before,
[data-builder-mode=dark] [data-balloon-pos=top]:before {
    border-top-color: var(--bricks-tooltip-bg)
}

[data-builder-mode=dark] [data-balloon-pos=bottom-left]:before,
[data-builder-mode=dark] [data-balloon-pos=bottom-right]:before,
[data-builder-mode=dark] [data-balloon-pos=bottom]:before {
    border-bottom-color: var(--bricks-tooltip-bg)
}

[data-builder-mode=dark] [data-balloon-pos=left]:before {
    border-left-color: var(--bricks-tooltip-bg)
}

[data-builder-mode=dark] [data-balloon-pos=right]:before {
    border-right-color: var(--bricks-tooltip-bg)
}