.content-placement-top .l-popup[data-popper-placement^="top"] .l-popup__content {
  margin-bottom: var(--td-comp-margin-s);
}
.content-placement-top .l-popup[data-popper-placement^="top"] .l-popup__content--arrow {
  margin-bottom: var(--td-comp-margin-l);
}
.content-placement-bottom .l-popup[data-popper-placement^="bottom"] .l-popup__content {
  margin-top: var(--td-comp-margin-s);
}
.content-placement-bottom .l-popup[data-popper-placement^="bottom"] .l-popup__content--arrow {
  margin-top: var(--td-comp-margin-l);
}
.content-placement-left .l-popup[data-popper-placement^="left"] .l-popup__content {
  margin-right: var(--td-comp-margin-s);
}
.content-placement-left .l-popup[data-popper-placement^="left"] .l-popup__content--arrow {
  margin-right: var(--td-comp-margin-l);
}
.content-placement-left .l-popup[data-popper-placement^="left"] .l-popup__content--text {
  max-width: 480px;
}
.content-placement-right .l-popup[data-popper-placement^="right"] .l-popup__content {
  margin-left: var(--td-comp-margin-s);
}
.content-placement-right .l-popup[data-popper-placement^="right"] .l-popup__content--arrow {
  margin-left: var(--td-comp-margin-l);
}
.content-placement-right .l-popup[data-popper-placement^="right"] .l-popup__content--text {
  max-width: 480px;
}
.l-popup {
  font: var(--td-font-body-medium);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--td-text-color-primary);
  display: inline-block;
  z-index: 5500;
}
.l-popup__content {
  position: relative;
  background: var(--td-bg-color-container);
  box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
  border-radius: var(--td-radius-medium);
  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
  font-size: var(--td-font-size-body-medium);
  line-height: var(--td-line-height-body-medium);
  box-sizing: border-box;
  word-break: break-all;
}
.l-popup__arrow {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
}
.l-popup__arrow::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--td-bg-color-container);
}
.l-popup[data-popper-placement^="top"] .l-popup__content {
  margin-bottom: var(--td-comp-margin-s);
}
.l-popup[data-popper-placement^="top"] .l-popup__content--arrow {
  margin-bottom: var(--td-comp-margin-l);
}
.l-popup[data-popper-placement^="bottom"] .l-popup__content {
  margin-top: var(--td-comp-margin-s);
}
.l-popup[data-popper-placement^="bottom"] .l-popup__content--arrow {
  margin-top: var(--td-comp-margin-l);
}
.l-popup[data-popper-placement^="left"] .l-popup__content {
  margin-right: var(--td-comp-margin-s);
}
.l-popup[data-popper-placement^="left"] .l-popup__content--arrow {
  margin-right: var(--td-comp-margin-l);
}
.l-popup[data-popper-placement^="left"] .l-popup__content--text {
  max-width: 480px;
}
.l-popup[data-popper-placement^="right"] .l-popup__content {
  margin-left: var(--td-comp-margin-s);
}
.l-popup[data-popper-placement^="right"] .l-popup__content--arrow {
  margin-left: var(--td-comp-margin-l);
}
.l-popup[data-popper-placement^="right"] .l-popup__content--text {
  max-width: 480px;
}
.l-popup[data-popper-placement^="top"] .l-popup__arrow {
  bottom: calc(-8px / 2);
}
.l-popup[data-popper-placement^="top"] .l-popup__arrow::before {
  border-top-left-radius: 100%;
  box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom);
}
.l-popup[data-popper-placement="top-start"] .l-popup__arrow {
  left: 8px;
}
.l-popup[data-popper-placement="top"] .l-popup__arrow {
  left: 50%;
  margin-left: calc(-8px / 2);
}
.l-popup[data-popper-placement="top-end"] .l-popup__arrow {
  left: calc(100% - 8px * 2);
}
.l-popup[data-popper-placement^="bottom"] .l-popup__arrow {
  top: calc(-8px / 2);
}
.l-popup[data-popper-placement^="bottom"] .l-popup__arrow::before {
  border-bottom-right-radius: 100%;
  box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right);
}
.l-popup[data-popper-placement="bottom-start"] .l-popup__arrow {
  left: 8px;
}
.l-popup[data-popper-placement="bottom"] .l-popup__arrow {
  left: 50%;
  margin-left: calc(-8px / 2);
}
.l-popup[data-popper-placement="bottom-end"] .l-popup__arrow {
  left: calc(100% - 8px * 2);
}
.l-popup[data-popper-placement^="left"] .l-popup__arrow {
  right: calc(-8px / 2);
}
.l-popup[data-popper-placement^="left"] .l-popup__arrow::before {
  box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top);
}
.l-popup[data-popper-placement="left-start"] .l-popup__arrow {
  top: 8px;
}
.l-popup[data-popper-placement="left"] .l-popup__arrow {
  top: 50%;
  margin-top: calc(-8px / 2);
}
.l-popup[data-popper-placement="left-end"] .l-popup__arrow {
  top: calc(100% - 8px * 2);
}
.l-popup[data-popper-placement^="right"] .l-popup__arrow {
  left: calc(-8px / 2);
}
.l-popup[data-popper-placement^="right"] .l-popup__arrow::before {
  box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom);
}
.l-popup[data-popper-placement="right-start"] .l-popup__arrow {
  top: 8px;
}
.l-popup[data-popper-placement="right"] .l-popup__arrow {
  top: 50%;
  margin-top: calc(-8px / 2);
}
.l-popup[data-popper-placement="right-end"] .l-popup__arrow {
  top: calc(100% - 8px * 2);
}
.l-popup--animation-enter,
.l-popup--animation-enter-from,
.l-popup--animation-exiting,
.l-popup--animation-leave-to {
  opacity: 0;
  visibility: hidden;
}
.l-popup--animation-enter-to,
.l-popup--animation-entering,
.l-popup--animation-leave-from,
.l-popup--animation-leave {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.l-popup--animation-enter-active {
  transition: opacity 0.2s linear;
}
.l-popup--animation-leave-active {
  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.l-popup--animation-expand-enter-active[data-popper-placement^=top] {
  animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
}
.l-popup--animation-expand-leave-active[data-popper-placement^=top] {
  animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1);
}
@keyframes t-popup-animation-expand-in-top {
  0% {
    clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%);
  }
  100% {
    clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
  }
}
@keyframes t-popup-animation-expand-out-top {
  0% {
    clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
  }
  100% {
    clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%);
  }
}
.l-popup--animation-expand-enter-active[data-popper-placement^=bottom] {
  animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
}
.l-popup--animation-expand-leave-active[data-popper-placement^=bottom] {
  animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1);
}
@keyframes t-popup-animation-expand-in-bottom {
  0% {
    clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0);
  }
  100% {
    clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
  }
}
@keyframes t-popup-animation-expand-out-bottom {
  0% {
    clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
  }
  100% {
    clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0);
  }
}
