.cobalt-popover {
  @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
  padding: 0;
  min-width: 16rem;
  max-width: 500px;
}

.cobalt-popover--fitContent {
  min-width: auto;
  max-width: none;
}

.cobalt-popover--withArrow {
  @apply c-rounded-xl;
}

.cobalt-popover--withBorder {
  @apply c-border c-border-outline;
}

.cobalt-popover--bodySpacing {
  padding: theme("spacing.md");
}

.cobalt-popover__arrow {
  fill: theme("colors.surfaceBright");
}

.use-cobalt-dark-theme {
  .cobalt-popover {
    box-shadow: 0 0 0 1px theme("colors.outline");
  }

  .cobalt-popover__arrow {
    fill: theme("colors.surfaceBright");
    stroke: theme("colors.outline");
    stroke-width: 1;
  }
}

.cobalt-popover[data-theme~="tooltip"] {
  @apply c-py-2xs c-px-xs c-rounded c-text-body-sm;

  min-width: auto;

  box-shadow: elevation(), elevation(md);
}