.shepherd-element, .shepherd-arrow:before {
  background-color: var(--body-bg) !important;
}

.shepherd-text, .shepherd-title {
  color: var(--body-color) !important;
}

@if $enable-dark-mode {
  @include color-mode(dark) {
    .shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before {
      background-color: var(--dark-bg-subtle) !important;
    }

    // Matches the bootstrap color on hover for btn-close
    .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
      filter: $btn-close-white-filter !important;
    }
  }
}