@use 'sass:map';
@use '../../scss/font-settings' as font-settings;
@use '../AnchorLink/styles.module' as anchorlink;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/spacers.css';

.helpbubble {
  $bubble: &;

  display: flex;
  align-items: flex-start !important;
  text-align: start;
  font-family: inherit;
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
    font-size: font-settings.$font-size-md;
    line-height: font-settings.$lineheight-size-md;
  }

  &__content {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-wrap: anywhere;
    padding-right: calc(var(--core-space-xl) - var(--core-space-2xs));

    > p {
      margin: 0;
    }
  }

  &__link {
    all: unset;

    @include anchorlink.anchorlink;
  }

  &__close {
    order: 2;
    position: absolute;
    top: 0;
    right: 0;
  }
}