@layer bricks {
  [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: 4px;
    color: #fff;
    color: var(--bricks-tooltip-text);
    content: attr(data-balloon);
    display: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.1px;
    line-height: 1;
    padding: 4px;
    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,
  [data-balloon]:not([data-balloon-pos]):after,
  [data-balloon]:not([data-balloon-pos]):before {
    left: 50%;
    top: -6px;
  }
  [data-balloon-pos="top"]:before,
  [data-balloon]:not([data-balloon-pos]):before {
    border-bottom: none;
    border-top-color: var(--bricks-tooltip-bg);
  }
  [data-balloon-pos="top"]:after,
  [data-balloon]:not([data-balloon-pos]):after {
    transform: translate(-50%, -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;
    right: auto;
  }
  body.rtl [data-balloon-pos="top-right"]:after {
    left: 0;
    right: auto;
    transform: translateY(-100%);
  }
  [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-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: 8px;
    right: auto;
  }
  body.rtl [data-balloon-pos="bottom-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-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"]:after {
    transform: translate(-50%, 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;
  }
  body.rtl [data-balloon-pos="left"]:before {
    transform: translateY(-50%);
  }
  [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-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"] .brx-body.main {
    --bricks-tooltip-bg: #eaecef;
    --bricks-tooltip-text: #23282d;
  }
  [data-builder-mode="dark"] .brx-body.main [data-balloon]:after {
    background-color: var(--bricks-tooltip-bg);
    color: var(--bricks-tooltip-text);
  }
  [data-builder-mode="dark"]
    .brx-body.main
    [data-balloon-pos="top-left"]:before,
  [data-builder-mode="dark"]
    .brx-body.main
    [data-balloon-pos="top-right"]:before,
  [data-builder-mode="dark"] .brx-body.main [data-balloon-pos="top"]:before {
    border-top-color: var(--bricks-tooltip-bg);
  }
  [data-builder-mode="dark"]
    .brx-body.main
    [data-balloon-pos="bottom-left"]:before,
  [data-builder-mode="dark"]
    .brx-body.main
    [data-balloon-pos="bottom-right"]:before,
  [data-builder-mode="dark"] .brx-body.main [data-balloon-pos="bottom"]:before {
    border-bottom-color: var(--bricks-tooltip-bg);
  }
  [data-builder-mode="dark"] .brx-body.main [data-balloon-pos="left"]:before {
    border-left-color: var(--bricks-tooltip-bg);
  }
  [data-builder-mode="dark"] .brx-body.main [data-balloon-pos="right"]:before {
    border-right-color: var(--bricks-tooltip-bg);
  }
}