@use 'sass:map';
@use '../../scss/font-settings' as font-settings;
@use '../../scss/font-mixins' as fonts;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';
@import '../../scss/supernova/styles/spacers.css';

.popover {
  width: max-content;
  max-width: min(32rem, calc(100vw - (2 * 8px)));
  text-align: start;
  background-color: var(--core-color-white);
  z-index: 3;
  box-shadow: 0 0 0 1px var(--color-base-border-onlight);
  border-radius: 9px;
  filter: drop-shadow(0 4px 16px rgb(0 0 0 / 30%));
  padding: var(--core-space-s);

  @include fonts.help-text;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    max-width: 35rem;
  }

  &__arrow {
    // Fjerner mellomrom mellom pil og boble på ulike zoomnivåer
    margin: -0.5px 0;
  }
}