$arrow-size: rem(14px);
$visible-portion-of-arrow: rem(5px);
$content-max-height: rem(100px);
$content-max-width: rem(200px);

.p_xz {
  margin: $visible-portion-of-arrow spacing() spacing();
  opacity: 1;
  box-shadow: shadow(deep);
  border-radius: border-radius();
  pointer-events: none;
  will-change: opacity, left, top;
  transition: opacity duration() easing(in) duration(fast);
}

.p_lj {
  opacity: 0;
}

.p_dv {
  margin: spacing() spacing() $visible-portion-of-arrow;

  .p_y1 {
    top: inherit;
    bottom: 0;
  }
}

.p_rh {
  .p_m3 {
    background: color(white);
    color: color(ink);
  }

  .p_y1 {
    background: color(white);
  }
}

.p_m3 {
  position: relative;
  display: flex;
  background-color: color(ink);
  border-radius: border-radius();
  color: color(white);
  max-height: $content-max-height;
}

.p_fz {
  position: relative;
  margin-top: spacing(extra-tight);
  border-radius: border-radius();
  max-width: $content-max-width;
  max-height: $content-max-height;
}

.p_y1 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  height: $arrow-size;
  width: $arrow-size;
  background: color(ink);
  box-shadow: shadow(deep);
}

.p_zi {
  padding: 0 spacing(tight) spacing(extra-tight);
}