/**
 * @file
 * Lottie pipe edge utilities.
 *
 * Put classes on a container (e.g. lottie-top-desktop lottie-wide-864).
 *
 * Animation (JSON):
 *   .lottie-narrow-364  .lottie-wide-622  .lottie-wide-864
 *   .lottie-vertical-215  .lottie-vertical-650
 *
 * Edge (where it paints):
 *   .lottie-top  .lottie-bottom  .lottie-left  .lottie-right
 *   .lottie-top-desktop  .lottie-bottom-desktop  .lottie-left-desktop  .lottie-right-desktop
 *   .lottie-top-mobile   .lottie-bottom-mobile   .lottie-left-mobile   .lottie-right-mobile
 *
 * Players are injected by js/lottie-pipe.js
 */

:root {
  --lottie-pipe-thickness: 25px;
  --lottie-pipe-gap: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Host                                                                       */
/* -------------------------------------------------------------------------- */

.lottie-top,
.lottie-bottom,
.lottie-left,
.lottie-right,
.lottie-top-desktop,
.lottie-top-mobile,
.lottie-bottom-desktop,
.lottie-bottom-mobile,
.lottie-left-desktop,
.lottie-left-mobile,
.lottie-right-desktop,
.lottie-right-mobile {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Injected player host (.lottie-pipe-el from js/lottie-pipe.js)               */
/* -------------------------------------------------------------------------- */

.lottie-pipe-el {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  line-height: 0;
  overflow: hidden;
}

.lottie-pipe-el dotlottie-player,
.lottie-pipe-el .lottie-pipe__player {
  display: block;
  width: 100%;
  height: 100%;
}

.lottie-pipe-el--top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--lottie-pipe-thickness);
}

.lottie-pipe-el--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--lottie-pipe-thickness);
}

.lottie-pipe-el--left {
  top: 0;
  left: 0;
  width: var(--lottie-pipe-thickness);
  height: 100%;
}

.lottie-pipe-el--right {
  top: 0;
  right: 0;
  width: var(--lottie-pipe-thickness);
  height: 100%;
}

@media (max-width: 768px) {
  .lottie-pipe-el[data-bp="desktop"] {
    display: none;
  }
}

@media (min-width: 769px) {
  .lottie-pipe-el[data-bp="mobile"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lottie-pipe-el {
    display: none;
  }
}