.brick-popper,
.brick-popper * {
  box-sizing: border-box;
}
.brick-popper-wrap {
  position: absolute;
  z-index: 1030;
  width: max-content;
  max-width: 50vw;
}
.brick-popper-inner {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.brick-popper-with-arrow .brick-popper-inner {
  padding: 8px 12px;
}
.brick-popper-hidden .brick-popper-wrap {
  visibility: hidden;
  pointer-events: none;
}
.brick-popper-arrow {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
}
.brick-popper-arrow::before {
  display: inline-block;
  position: absolute;
  content: "";
  background: rgb(255, 255, 255);
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  clip-path: polygon(0% 100%, 100% 100%, 100% 0);
}
.brick-popper-arrow.direction-down, .brick-popper-arrow.direction-up, .brick-popper-arrow.direction-right, .brick-popper-arrow.direction-left {
  display: inline-block;
}
.brick-popper-arrow.direction-down {
  transform: rotate(0deg);
  bottom: 11.1px;
}
.brick-popper-arrow.direction-up {
  transform: rotate(180deg);
  top: 11.1px;
}
.brick-popper-arrow.direction-right {
  transform: rotate(-90deg);
  right: 11.1px;
}
.brick-popper-arrow.direction-left {
  transform: rotate(90deg);
  left: 11.1px;
}
.brick-popper-placement-top .brick-popper-arrow, .brick-popper-placement-bottom .brick-popper-arrow {
  left: 50%;
}
.brick-popper-placement-left .brick-popper-arrow, .brick-popper-placement-right .brick-popper-arrow {
  top: 50%;
}
.brick-popper-placement-top-start .brick-popper-arrow, .brick-popper-placement-bottom-start .brick-popper-arrow {
  left: 12px;
}
.brick-popper-placement-top-end .brick-popper-arrow, .brick-popper-placement-bottom-end .brick-popper-arrow {
  right: 12px;
}
.brick-popper-placement-left-start .brick-popper-arrow, .brick-popper-placement-right-start .brick-popper-arrow {
  top: 12px;
}
.brick-popper-placement-left-end .brick-popper-arrow, .brick-popper-placement-right-end .brick-popper-arrow {
  bottom: 12px;
}

.brick-popper[class*=brick-popper-placement-top] .brick-popper-wrap {
  padding-bottom: 4px;
}
.brick-popper[class*=brick-popper-placement-bottom] .brick-popper-wrap {
  padding-top: 4px;
}
.brick-popper[class*=brick-popper-placement-left] .brick-popper-wrap {
  padding-right: 4px;
}
.brick-popper[class*=brick-popper-placement-right] .brick-popper-wrap {
  padding-left: 4px;
}

.brick-popper-with-arrow[class*=brick-popper-placement-top] .brick-popper-wrap {
  padding-bottom: 8px;
}
.brick-popper-with-arrow[class*=brick-popper-placement-bottom] .brick-popper-wrap {
  padding-top: 8px;
}
.brick-popper-with-arrow[class*=brick-popper-placement-left] .brick-popper-wrap {
  padding-right: 8px;
}
.brick-popper-with-arrow[class*=brick-popper-placement-right] .brick-popper-wrap {
  padding-left: 8px;
}

body > .brick-popper .brick-popper-wrap {
  left: -100vh;
  top: -100vh;
}