@alifd/next/lib/balloon/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px; }

.next-balloon {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  max-width: 300px;
  max-width: var(--balloon-size-max-width, 300px);
  border-style: solid;
  border-style: var(--balloon-border-style, solid);
  border-radius: 3px;
  border-radius: var(--balloon-corner, 3px);
  font-size: 12px;
  font-size: var(--balloon-content-font-size, 12px);
  font-weight: normal;
  font-weight: var(--balloon-content-font-weight, normal);
  /* stylelint-disable */
  word-wrap: break-all;
  word-wrap: break-word;
  /* stylelint-enable */
  z-index: 0;
  /* size */
  /* 带关闭按钮的右侧padding变大 */ }
  .next-balloon *,
  .next-balloon *:before,
  .next-balloon *:after {
    box-sizing: border-box; }
  .next-balloon:focus,
  .next-balloon *:focus {
    outline: 0; }
  .next-balloon-title {
    margin-bottom: 8px;
    margin-bottom: var(--balloon-size-header-margin-bottom, 8px);
    font-size: 16px;
    font-size: var(--balloon-title-font-size, 16px);
    font-weight: bold;
    font-weight: var(--balloon-title-font-weight, bold); }
    .next-balloon-title.next-balloon-closable {
      padding: 0 40px 0 0;
      padding: 0 var(--balloon-size-padding-closable-right, 40px) 0 0; }
      .next-balloon-title.next-balloon-closable .next-balloon-close {
        top: -1px;
        transform: translateY(18px);
        transform: translateY(calc(var(--balloon-size-padding-top, 16px) + var(--balloon-title-font-size, 16px)/2 - var(--balloon-size-close, 12px)/2));
        right: 16px;
        right: var(--balloon-size-padding-right, 16px); }
  .next-balloon-primary {
    color: #333333;
    color: var(--balloon-primary-color, #333333);
    border-color: #4494F9;
    border-color: var(--balloon-primary-color-border, #4494F9);
    background-color: #E3F2FD;
    background-color: var(--balloon-primary-color-bg, #E3F2FD);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: var(--balloon-primary-shadow, 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
    border-width: 1px;
    border-width: var(--balloon-primary-border-width, 1px); }
    .next-balloon-primary .next-balloon-close {
      position: absolute;
      top: -1px;
      transform: translateY(16px);
      transform: translateY(calc(var(--balloon-size-padding-top, 16px) + var(--balloon-content-font-size, 12px)/2 - var(--balloon-size-close, 12px)/2));
      right: 12px;
      right: var(--balloon-size-close-margin-right, 12px);
      font-size: 12px;
      font-size: var(--balloon-size-close, 12px);
      cursor: pointer;
      color: #999999;
      color: var(--balloon-primary-color-close, #999999); }
      .next-balloon-primary .next-balloon-close .next-icon {
        width: 12px;
        width: var(--balloon-size-close, 12px);
        height: 12px;
        height: var(--balloon-size-close, 12px);
        line-height: 1em; }
        .next-balloon-primary .next-balloon-close .next-icon:before {
          width: 12px;
          width: var(--balloon-size-close, 12px);
          height: 12px;
          height: var(--balloon-size-close, 12px);
          font-size: 12px;
          font-size: var(--balloon-size-close, 12px);
          line-height: 1em; }
      .next-balloon-primary .next-balloon-close :hover {
        color: #333333;
        color: var(--balloon-primary-color-close-hover, #333333); }
    .next-balloon-primary:after {
      position: absolute;
      width: 12px;
      width: var(--balloon-size-arrow-size, 12px);
      height: 12px;
      height: var(--balloon-size-arrow-size, 12px);
      content: '';
      transform: rotate(45deg);
      box-sizing: content-box !important;
      border: 1px solid #4494F9;
      border: var(--balloon-primary-border-width, 1px) var(--balloon-border-style, solid) var(--balloon-primary-color-border, #4494F9);
      background-color: #E3F2FD;
      background-color: var(--balloon-primary-color-bg, #E3F2FD);
      z-index: -1; }
    .next-balloon-primary.next-balloon-top:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      left: calc(50% - 7px);
      left: calc(50% + var(--balloon-size-arrow-expose-primary, calc(0px - 12px / 2 - 1px)));
      border-right: none;
      border-bottom: none; }
    .next-balloon-primary.next-balloon-right:after {
      top: calc(50% - 7px);
      top: calc(50% + var(--balloon-size-arrow-expose-primary, calc(0px - 12px / 2 - 1px)));
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      border-left: none;
      border-bottom: none; }
    .next-balloon-primary.next-balloon-bottom:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      left: calc(50% - 7px);
      left: calc(50% + var(--balloon-size-arrow-expose-primary, calc(0px - 12px / 2 - 1px)));
      border-top: none;
      border-left: none; }
    .next-balloon-primary.next-balloon-left:after {
      top: calc(50% - 7px);
      top: calc(50% + var(--balloon-size-arrow-expose-primary, calc(0px - 12px / 2 - 1px)));
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-primary.next-balloon-left-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-primary.next-balloon-left-bottom:after {
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-primary.next-balloon-right-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      border-bottom: none;
      border-left: none; }
    .next-balloon-primary.next-balloon-right-bottom:after {
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      border-bottom: none;
      border-left: none; }
    .next-balloon-primary.next-balloon-top-left:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none; }
    .next-balloon-primary.next-balloon-top-right:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none; }
    .next-balloon-primary.next-balloon-bottom-left:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-top: none;
      border-left: none; }
    .next-balloon-primary.next-balloon-bottom-right:after {
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-left: none; }
  .next-balloon-normal {
    color: #333333;
    color: var(--balloon-normal-color, #333333);
    border-color: #DCDEE3;
    border-color: var(--balloon-normal-color-border, #DCDEE3);
    background-color: #FFFFFF;
    background-color: var(--balloon-normal-color-bg, #FFFFFF);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    box-shadow: var(--balloon-normal-shadow, 0px 2px 4px 0px rgba(0, 0, 0, 0.12));
    border-width: 1px;
    border-width: var(--balloon-normal-border-width, 1px); }
    .next-balloon-normal .next-balloon-close {
      position: absolute;
      top: -1px;
      transform: translateY(16px);
      transform: translateY(calc(var(--balloon-size-padding-top, 16px) + var(--balloon-content-font-size, 12px)/2 - var(--balloon-size-close, 12px)/2));
      right: 12px;
      right: var(--balloon-size-close-margin-right, 12px);
      font-size: 12px;
      font-size: var(--balloon-size-close, 12px);
      cursor: pointer;
      color: #999999;
      color: var(--balloon-normal-color-close, #999999); }
      .next-balloon-normal .next-balloon-close .next-icon {
        width: 12px;
        width: var(--balloon-size-close, 12px);
        height: 12px;
        height: var(--balloon-size-close, 12px);
        line-height: 1em; }
        .next-balloon-normal .next-balloon-close .next-icon:before {
          width: 12px;
          width: var(--balloon-size-close, 12px);
          height: 12px;
          height: var(--balloon-size-close, 12px);
          font-size: 12px;
          font-size: var(--balloon-size-close, 12px);
          line-height: 1em; }
      .next-balloon-normal .next-balloon-close :hover {
        color: #666666;
        color: var(--balloon-normal-color-close-hover, #666666); }
    .next-balloon-normal:after {
      position: absolute;
      width: 12px;
      width: var(--balloon-size-arrow-size, 12px);
      height: 12px;
      height: var(--balloon-size-arrow-size, 12px);
      content: '';
      transform: rotate(45deg);
      box-sizing: content-box !important;
      border: 1px solid #DCDEE3;
      border: var(--balloon-normal-border-width, 1px) var(--balloon-border-style, solid) var(--balloon-normal-color-border, #DCDEE3);
      background-color: #FFFFFF;
      background-color: var(--balloon-normal-color-bg, #FFFFFF);
      z-index: -1; }
    .next-balloon-normal.next-balloon-top:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      left: calc(50% - 7px);
      left: calc(50% + var(--balloon-size-arrow-expose, calc(0px - 12px / 2 - 1px)));
      border-right: none;
      border-bottom: none; }
    .next-balloon-normal.next-balloon-right:after {
      top: calc(50% - 7px);
      top: calc(50% + var(--balloon-size-arrow-expose, calc(0px - 12px / 2 - 1px)));
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      border-left: none;
      border-bottom: none; }
    .next-balloon-normal.next-balloon-bottom:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      left: calc(50% - 7px);
      left: calc(50% + var(--balloon-size-arrow-expose, calc(0px - 12px / 2 - 1px)));
      border-top: none;
      border-left: none; }
    .next-balloon-normal.next-balloon-left:after {
      top: calc(50% - 7px);
      top: calc(50% + var(--balloon-size-arrow-expose, calc(0px - 12px / 2 - 1px)));
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-normal.next-balloon-left-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-normal.next-balloon-left-bottom:after {
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none; }
    .next-balloon-normal.next-balloon-right-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      border-bottom: none;
      border-left: none; }
    .next-balloon-normal.next-balloon-right-bottom:after {
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      border-bottom: none;
      border-left: none; }
    .next-balloon-normal.next-balloon-top-left:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none; }
    .next-balloon-normal.next-balloon-top-right:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none; }
    .next-balloon-normal.next-balloon-bottom-left:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-top: none;
      border-left: none; }
    .next-balloon-normal.next-balloon-bottom-right:after {
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-left: none; }
  .next-balloon.visible {
    display: block; }
  .next-balloon.hidden {
    display: none; }
  .next-balloon-medium {
    padding: 16px 16px 16px 16px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px); }
  .next-balloon-closable {
    padding: 16px 40px 16px 16px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-closable-right, 40px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px); }

.next-balloon-tooltip {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  max-width: 300px;
  max-width: var(--balloon-size-max-width, 300px);
  border-style: solid;
  border-style: var(--balloon-tooltip-border-style, solid);
  border-radius: 3px;
  border-radius: var(--balloon-corner, 3px);
  font-size: 12px;
  font-size: var(--balloon-tooltip-content-font-size, 12px);
  font-weight: normal;
  font-weight: var(--balloon-tooltip-content-font-weight, normal);
  z-index: 0;
  /* stylelint-disable */
  word-wrap: break-all;
  word-wrap: break-word;
  /* stylelint-enable */
  color: #333333;
  color: var(--balloon-tooltip-color, #333333);
  border-color: #DCDEE3;
  border-color: var(--balloon-tooltip-color-border, #DCDEE3);
  background-color: #F2F3F7;
  background-color: var(--balloon-tooltip-color-bg, #F2F3F7);
  box-shadow: none;
  box-shadow: var(--balloon-tooltip-shadow, none);
  border-width: 1px;
  border-width: var(--balloon-tooltip-border-width, 1px);
  /* size */ }
  .next-balloon-tooltip *,
  .next-balloon-tooltip *:before,
  .next-balloon-tooltip *:after {
    box-sizing: border-box; }
  .next-balloon-tooltip .next-balloon-arrow {
    position: absolute;
    display: block;
    width: 24px;
    width: calc(var(--balloon-size-arrow-size, 12px)*2);
    height: 24px;
    height: calc(var(--balloon-size-arrow-size, 12px)*2);
    overflow: hidden;
    background: 0 0;
    pointer-events: none; }
    .next-balloon-tooltip .next-balloon-arrow .next-balloon-arrow-content {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 12px;
      width: var(--balloon-size-arrow-size, 12px);
      height: 12px;
      height: var(--balloon-size-arrow-size, 12px);
      margin: auto;
      background-color: #F2F3F7;
      background-color: var(--balloon-tooltip-color-bg, #F2F3F7);
      border: 1px solid #DCDEE3;
      border: var(--balloon-tooltip-border-width, 1px) var(--balloon-tooltip-border-style, solid) var(--balloon-tooltip-color-border, #DCDEE3);
      pointer-events: auto; }
  .next-balloon-tooltip-top .next-balloon-arrow {
    top: -24px;
    top: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    left: calc(50% - 12px);
    left: calc(50% - var(--balloon-size-arrow-size, 12px)); }
    .next-balloon-tooltip-top .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(12px) rotate(45deg);
      transform: translateY(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-right .next-balloon-arrow {
    top: calc(50% - 12px);
    top: calc(50% - var(--balloon-size-arrow-size, 12px));
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-right .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg);
      transform: translateX(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip-bottom .next-balloon-arrow {
    left: calc(50% - 12px);
    left: calc(50% - var(--balloon-size-arrow-size, 12px));
    bottom: -24px;
    bottom: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-bottom .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(-12px) rotate(45deg);
      transform: translateY(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip-left .next-balloon-arrow {
    top: calc(50% - 12px);
    top: calc(50% - var(--balloon-size-arrow-size, 12px));
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-left .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-left-top .next-balloon-arrow {
    top: 6px;
    top: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-left-top .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-left-bottom .next-balloon-arrow {
    bottom: 6px;
    bottom: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-left-bottom .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-right-top .next-balloon-arrow {
    top: 6px;
    top: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-right-top .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg);
      transform: translateX(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip-right-bottom .next-balloon-arrow {
    bottom: 6px;
    bottom: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-right-bottom .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg);
      transform: translateX(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip-top-left .next-balloon-arrow {
    left: 6px;
    left: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    top: -24px;
    top: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-top-left .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(12px) rotate(45deg);
      transform: translateY(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-top-right .next-balloon-arrow {
    right: 6px;
    right: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    top: -24px;
    top: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-top-right .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(12px) rotate(45deg);
      transform: translateY(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip-bottom-left .next-balloon-arrow {
    left: 6px;
    left: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    bottom: -24px;
    bottom: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-bottom-left .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(-12px) rotate(45deg);
      transform: translateY(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip-bottom-right .next-balloon-arrow {
    right: 6px;
    right: calc(var(--balloon-size-arrow-margin, 12px) - var(--balloon-size-arrow-size, 12px)/2);
    bottom: -24px;
    bottom: calc(0px - var(--balloon-size-arrow-size, 12px)*2); }
    .next-balloon-tooltip-bottom-right .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateY(-12px) rotate(45deg);
      transform: translateY(calc(0px - var(--balloon-size-arrow-size, 12px))) rotate(45deg); }
  .next-balloon-tooltip.visible {
    display: block; }
  .next-balloon-tooltip.hidden {
    display: none; }
  .next-balloon-tooltip-medium {
    padding: 8px 8px 8px 8px;
    padding: var(--balloon-tooltip-size-padding-top, 8px) var(--balloon-tooltip-size-padding-right, 8px) var(--balloon-tooltip-size-padding-bottom, 8px) var(--balloon-tooltip-size-padding-left, 8px); }

.next-balloon[dir="rtl"] {
  /* 带关闭按钮的右侧padding变大 */ }
  .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close {
    left: 12px;
    left: var(--balloon-size-close-margin-right, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-left: inherit;
    border-bottom: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-right: inherit;
    border-top: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-right:after {
    right: auto;
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal .next-balloon-close {
    left: 12px;
    left: var(--balloon-size-close-margin-right, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-left: inherit;
    border-bottom: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-right: inherit;
    border-top: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-top:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-top:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-bottom:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-right:after {
    right: auto;
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-closable {
    padding: 16px 16px 16px 40px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-closable-right, 40px); }

.next-balloon-tooltip[dir="rtl"] {
  /* size */ }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right .next-balloon-arrow {
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    right: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left .next-balloon-arrow {
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    left: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top .next-balloon-arrow {
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    left: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom .next-balloon-arrow {
    right: -24px;
    right: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    left: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(-12px) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top .next-balloon-arrow {
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    right: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom .next-balloon-arrow {
    left: -24px;
    left: calc(0px - var(--balloon-size-arrow-size, 12px)*2);
    right: auto; }
    .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom .next-balloon-arrow .next-balloon-arrow-content {
      transform: translateX(12px) rotate(45deg);
      transform: translateX(var(--balloon-size-arrow-size, 12px)) rotate(45deg); }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-left .next-balloon-arrow {
    right: 10px;
    right: calc(var(--balloon-size-arrow-margin, 12px) - 2px);
    left: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-right .next-balloon-arrow {
    left: 10px;
    left: calc(var(--balloon-size-arrow-margin, 12px) - 2px);
    right: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-left .next-balloon-arrow {
    right: 10px;
    right: calc(var(--balloon-size-arrow-margin, 12px) - 2px);
    left: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-right .next-balloon-arrow {
    left: 10px;
    left: calc(var(--balloon-size-arrow-margin, 12px) - 2px);
    right: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-medium {
    padding: 8px 8px 8px 8px;
    padding: var(--balloon-tooltip-size-padding-top, 8px) var(--balloon-tooltip-size-padding-left, 8px) var(--balloon-tooltip-size-padding-bottom, 8px) var(--balloon-tooltip-size-padding-right, 8px); }