@use 'sass:map';
@use '../../../scss/spacers' as spacers;
@use '../../../scss/breakpoints' as breakpoints;

.paneltitle {
  display: grid;
  gap: spacers.getSpacer(2xs);
  grid-template-areas: 'title';

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    gap: spacers.getSpacer(2xs) spacers.getSpacer(s);
  }

  &--has-icon {
    margin-left: -3.5rem;
    grid-template-columns: 3rem 1fr;
    grid-template-areas: 'icon title';

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

  &__icon {
    grid-area: icon;
    justify-self: center;
    height: 48px;
  }

  &__title {
    grid-area: title;
    display: flex;
    flex-flow: row;
    gap: spacers.getSpacer(s);
    margin-top: 8px;
    height: fit-content;
  }

  &__badge {
    display: inline;
  }
}