@import '../variables';

.itf-popover {
  display: none;

  .popover-body > & {
    display: block;
  }
  .border-right {
    border-right: 1px solid #eee;
  }
}
.itf-popover-container {
  display: inline-block;
}

[data-theme="dark"] {
  .itf-popover {
    .border-right {
      border-color: $dark-border-color;
    }
  }
  .popover {
    background-color: $dark-body-bg;
    border-color: $dark-border-color;
  }
  .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
    border-bottom-color: $dark-border-color;
  }
  .popover-body {
    color: $dark-body-color;
  }
}

.nopadding .popover-body {
  padding: 0;
}

.popover.onboarding-popover {
  --bs-popover-max-width: 317px;
  --bs-popover-bg: var(--primary);
  --bs-popover-border-width: 0px;
  --bs-popover-border-color: var(--primary);
  --bs-border-radius-lg: 0.5rem;
  --bs-popover-body-color: var(--white);
  --bs-popover-body-padding-x: 0;
  --bs-popover-body-padding-y: 0;
  --bs-secondary-rgb: 255, 255, 255;

  a {
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-link-active-color-rgb: 255, 255, 255;
  }

  .border-secondary {
    --bs-border-opacity: 0.5;
  }
}
