.ty-popup {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--ty-popup-radius, var(--ty-border-radius));
  white-space: nowrap;
  font-size: var(--ty-popup-font-size, var(--ty-font-size-base));
  text-align: left;
  box-shadow: var(--ty-popup-shadow, var(--ty-shadow-popup));
  z-index: var(--ty-popup-z-index, 999);
}
.ty-popup__arrow, .ty-popup__arrow::before {
  width: var(--ty-popover-arrow-size);
  height: var(--ty-popover-arrow-size);
  box-sizing: border-box;
  position: absolute;
}
.ty-popup__arrow::before {
  content: "";
  transform: rotate(45deg);
}
.ty-popup_light {
  background-color: var(--ty-popup-light-bg, var(--ty-color-bg-container));
  color: var(--ty-popup-color-light, var(--ty-color-text-secondary));
}
.ty-popup_light .ty-popup__arrow::before {
  background: var(--ty-popup-light-bg, var(--ty-color-bg-container));
}
.ty-popup_dark {
  background-color: var(--ty-popup-dark-bg, #262626);
  color: var(--ty-popup-color-dark, #fff);
}
.ty-popup_dark .ty-popup__arrow::before {
  background: var(--ty-popup-dark-bg, #262626);
}
.ty-popup[data-popper-placement^=top] > .ty-popup__arrow {
  bottom: calc(var(--ty-popover-arrow-size) / -2);
}
.ty-popup[data-popper-placement^=top] > .ty-popup__arrow::before {
  box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow, rgba(0, 0, 0, 0.07));
}
.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow {
  top: calc(var(--ty-popover-arrow-size) / -2);
}
.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow::before {
  box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow, rgba(0, 0, 0, 0.07));
}
.ty-popup[data-popper-placement^=left] > .ty-popup__arrow {
  right: calc(var(--ty-popover-arrow-size) / -2);
}
.ty-popup[data-popper-placement^=left] > .ty-popup__arrow::before {
  box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow, rgba(0, 0, 0, 0.07));
}
.ty-popup[data-popper-placement^=right] > .ty-popup__arrow {
  left: calc(var(--ty-popover-arrow-size) / -2);
}
.ty-popup[data-popper-placement^=right] > .ty-popup__arrow::before {
  box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow, rgba(0, 0, 0, 0.07));
}