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

.highlightpanel {
  $colors: 'neutral', 'blueberry', 'cherry';

  // fluid skal ha bakgrunnsfarge på den ytre containeren
  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);

  @media (min-width: map.get($grid-breakpoints, sm)) {
    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
  }

  @media (min-width: map.get($grid-breakpoints, xl)) {
    padding: spacers.getSpacer(l) spacers.getSpacer(l) spacers.getSpacer(l) spacers.getSpacer(m);
  }

  &--compact {
    padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
    flex-direction: row !important;
  }

  @each $color in $colors {
    &--#{$color} {
      background-color: var(--color-base-background-#{$color});
      border: 1px solid var(--color-base-border-#{$color});
    }
  }

  &--white {
    background-color: var(--color-base-background-white);
    border: 1px solid var(--color-base-border-onlight-subtle);
  }

  &__content {
    @media (min-width: map.get($grid-breakpoints, md)) {
      margin-top: 0.625rem;
    }

    &--compact {
      margin-top: 0.625rem;
    }

    &__children--compact {
      @include fonts.help-text;
    }
  }

  &--has-icon {
    display: flex;

    &:not(.highlightpanel--compact) {
      flex-direction: column;
      padding-top: spacers.getSpacer(m);

      @media (min-width: map.get($grid-breakpoints, md)) {
        flex-direction: row;
      }
    }
  }

  &__icon {
    display: inline-flex;
    gap: spacers.getSpacer(xs);
    margin-bottom: spacers.getSpacer(2xs);

    @media (min-width: map.get($grid-breakpoints, md)) {
      margin-right: spacers.getSpacer(s);
      margin-bottom: 0;
    }

    &--compact {
      margin-right: spacers.getSpacer(2xs);
      margin-bottom: 0;
    }
  }

  &__title-wrapper {
    display: flex;
    align-items: center;
  }
}