.content-placement-top .mx-popup[data-popper-placement^='top'] .mx-popup__content {
  margin-bottom: var(--popup-content-margin);
}
.content-placement-top .mx-popup[data-popper-placement^='top'] .mx-popup__content--arrow {
  margin-bottom: var(--popup-content-arrow-margin);
}
.content-placement-bottom .mx-popup[data-popper-placement^='bottom'] .mx-popup__content {
  margin-top: var(--popup-content-margin);
}
.content-placement-bottom .mx-popup[data-popper-placement^='bottom'] .mx-popup__content--arrow {
  margin-top: var(--popup-content-arrow-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content {
  margin-right: var(--popup-content-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content--arrow {
  margin-right: var(--popup-content-arrow-margin);
}
.content-placement-left .mx-popup[data-popper-placement^='left'] .mx-popup__content--text {
  max-width: 480px;
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content {
  margin-left: var(--popup-content-margin);
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content--arrow {
  margin-left: var(--popup-content-arrow-margin);
}
.content-placement-right .mx-popup[data-popper-placement^='right'] .mx-popup__content--text {
  max-width: 480px;
}
body {
  --popup-wrapper-color: var(--bg-color-container);
  --popup-border-radius: var(--border-radius-medium);
  --popup-padding: 4px 8px;
  --popup-arrow-bg: var(--bg-color-container);
  --popup-arrow-width: 8px;
  --popup-content-margin: 8px;
  --popup-content-arrow-margin: 12px;
  --popup-top-arrow-shadow: var(--shadow-inset-left), var(--shadow-inset-bottom);
  --popup-left-arrow-shadow: var(--shadow-inset-left), var(--shadow-inset-top);
  --popup-bottom-arrow-shadow: var(--shadow-inset-top), var(--shadow-inset-right);
  --popup-right-arrow-shadow: var(--shadow-inset-right), var(--shadow-inset-bottom);
  --popup-z-index: var(--z-index-popup);
}
.mx-popup {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--text-color-primary);
  display: inline-block;
  z-index: var(--popup-z-index);
}
.mx-popup__content {
  position: relative;
  background: var(--popup-wrapper-color);
  border: 1px solid var(--border-level-1-color);
  border-radius: var(--popup-border-radius);
  padding: var(--popup-padding);
  font-size: 14px;
  line-height: 22px;
  box-sizing: border-box;
  word-break: break-all;
}
.mx-popup__arrow {
  position: absolute;
  z-index: 1;
  background-color: inherit;
}
.mx-popup__arrow::before {
  position: absolute;
  content: '';
  width: var(--popup-arrow-width);
  height: var(--popup-arrow-width);
  transform: rotate(45deg);
  background-color: inherit;
}
.mx-popup[data-popper-placement^='top'] .mx-popup__content {
  margin-bottom: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='top'] .mx-popup__content--arrow {
  margin-bottom: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__content {
  margin-top: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__content--arrow {
  margin-top: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content {
  margin-right: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content--arrow {
  margin-right: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__content--text {
  max-width: 480px;
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content {
  margin-left: var(--popup-content-margin);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content--arrow {
  margin-left: var(--popup-content-arrow-margin);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__content--text {
  max-width: 480px;
}
.mx-popup[data-popper-placement^='top'] .mx-popup__arrow::before {
  border-top-left-radius: 100%;
  border-bottom: 1px solid var(--border-level-1-color);
  border-right: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='top-start'] .mx-popup__arrow {
  left: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='top'] .mx-popup__arrow {
  left: 50%;
  margin-left: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='top-end'] .mx-popup__arrow {
  left: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__arrow {
  top: calc((-1 * var(--popup-arrow-width) / 2) - 1px);
}
.mx-popup[data-popper-placement^='bottom'] .mx-popup__arrow::before {
  border-bottom-right-radius: 100%;
  border-top: 1px solid var(--border-level-1-color);
  border-left: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='bottom-start'] .mx-popup__arrow {
  left: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='bottom'] .mx-popup__arrow {
  left: 50%;
  margin-left: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='bottom-end'] .mx-popup__arrow {
  left: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__arrow {
  right: calc(1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement^='left'] .mx-popup__arrow::before {
  border-top: 1px solid var(--border-level-1-color);
  border-right: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='left-start'] .mx-popup__arrow {
  top: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='left'] .mx-popup__arrow {
  top: 50%;
  margin-top: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='left-end'] .mx-popup__arrow {
  top: calc(100% - var(--popup-arrow-width) * 2);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__arrow {
  left: calc((-1 * var(--popup-arrow-width) / 2) - 1px);
}
.mx-popup[data-popper-placement^='right'] .mx-popup__arrow::before {
  border-bottom: 1px solid var(--border-level-1-color);
  border-left: 1px solid var(--border-level-1-color);
}
.mx-popup[data-popper-placement='right-start'] .mx-popup__arrow {
  top: var(--popup-arrow-width);
}
.mx-popup[data-popper-placement='right'] .mx-popup__arrow {
  top: 50%;
  margin-top: calc(-1 * var(--popup-arrow-width) / 2);
}
.mx-popup[data-popper-placement='right-end'] .mx-popup__arrow {
  top: calc(100% - var(--popup-arrow-width) * 2);
}