.trip-bg {
  pointer-events: none;
  border-radius: var(--op-radius-medium);
  box-shadow: 0 0 0 4px var(--trip-color);

  @media (width < 768px) {
     box-shadow: 0 0 0 4px var(--trip-color);
  }
}

/* Primary: filled background */
.trip-bg--primary {
  background-color: var(--trip-color);
}

/* Secondary: border outline only */
.trip-bg--secondary {
  background: transparent;
}

/* Overlap: alternating diagonal crosshatch of both event colors */
/* Might be nice to add later */
/* .trip-bg--overlap {
  background: repeating-linear-gradient(
    45deg,
    var(--trip-color-a),
    var(--trip-color-a) 4px,
    var(--trip-color-b) 4px,
    var(--trip-color-b) 8px
  );
  border-radius: var(--op-radius-large);
  box-shadow: none;
} */

.trip__handle {
  position: absolute;
  background-color: var(--op-color-primary-plus-six);
  border-radius: 5px;
  padding: 1px;
  font-size: var(--op-font-x-small);
  cursor: pointer;
  left: -5px;
  top: -5px;
  z-index: 1;
}

.trip__handle--secondary {
  /*top: unset;*/
  /*bottom: -9px;*/
  /*left: -9px;*/
  /*font-size: var(--op-font-2x-small);*/
}

.trip__decoration {
  position: absolute;
  max-width: unset;
}

.trip__decoration--celebration {
  width: 7rem;
  height: 7rem;
  left: -1.2rem;
  top: -1rem;
}

.trip__decoration--arrow {
  width: 8rem;
  height: 6.5rem;
  left: -1.6rem;
  top: -0.8rem;
}

.trip__decoration--star {
  top: -1.2rem;
  left: -1.2rem;
}