.shepherd-header {
  @apply bg-background-muted border-b px-4 py-2 first:rounded-t; /* same as card-header */
}

.shepherd-text {
  @apply p-4; /* same as card-block */
}

.sheperd-text p {
  @apply py-1;
}

.shepherd-content {
  @apply bg-background text-foreground rounded;
}

.shepherd-footer {
  @apply bg-background-muted border-t px-4 py-2 last:rounded-b; /* same as card-footer */
  @apply flex justify-between;
}

.shepherd-element {
  @apply bg-background invisible z-[80] m-0 w-full max-w-96 rounded opacity-0 shadow-sm outline-none transition-[visibility,opacity] duration-300;
}

.shepherd-enabled.shepherd-element {
  @apply visible opacity-100;
}

.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
  @apply pointer-events-none invisible opacity-0;
}

.shepherd-arrow,
.shepherd-arrow::before {
  @apply absolute -z-[1] h-4 w-4;
}

.shepherd-arrow::before {
  @apply bg-background rotate-45 content-[""];
}

.shepherd-element[data-popper-placement^="top"] > .shepherd-arrow {
  @apply -bottom-2;
}

.shepherd-element[data-popper-placement^="bottom"] > .shepherd-arrow {
  @apply -top-2;
}

.shepherd-element[data-popper-placement^="left"] > .shepherd-arrow {
  @apply -right-2;
}

.shepherd-element[data-popper-placement^="right"] > .shepherd-arrow {
  @apply -left-2;
}

.shepherd-element.shepherd-centered > .shepherd-arrow {
  @apply opacity-0;
}

.shepherd-element.shepherd-has-title[data-popper-placement^="bottom"]
  > .shepherd-arrow::before {
  @apply bg-background-muted;
}

.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target * {
  @apply pointer-events-none;
}

.shepherd-modal-overlay-container {
  @apply pointer-events-none fixed left-0 top-0 z-[70] h-0 w-screen overflow-hidden opacity-0;

  transition:
    all 0.3s ease-out,
    height 0s 0.3s,
    opacity 0.3s 0s;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  @apply fill-foreground-muted h-screen opacity-50;

  transform: translateZ(0);
  transition:
    all 0.3s ease-out,
    height 0s 0s,
    opacity 0.3s 0s;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
  @apply pointer-events-all;
}
