@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/typography';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/functions';

pkt-heading {
  display: block;
}
.pkt-heading {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;

  // Doblet klasse gir spesifisitet (0,2,0), som slår vertsdokumentets
  // `.noe h1`–`h6` (0,1,1). Uten dette arver overskriften marger per
  // nivå fra siden den står på, selv når den visuelle størrelsen er lik.
  &.pkt-heading {
    margin-block: 0;
  }

  &--xlarge {
    @include typography.get-text('pkt-txt-40');

    @include bp-up(36rem) {
      @include typography.get-text('pkt-txt-54');
    }
    @include bp('tablet-up') {
      @include typography.get-text('pkt-txt-70');
    }
  }

  &--large {
    @include typography.get-text('pkt-txt-28');

    @include bp-up(36rem) {
      @include typography.get-text('pkt-txt-36');
    }

    @include bp('tablet-up') {
      @include typography.get-text('pkt-txt-48');
    }
  }

  &--medium {
    @include typography.get-text('pkt-txt-24-medium');

    @include bp-up(36rem) {
      @include typography.get-text('pkt-txt-28-medium');
    }

    @include bp('tablet-up') {
      @include typography.get-text('pkt-txt-30-medium');
    }
  }

  &--small {
    @include typography.get-text('pkt-txt-18-medium');

    @include bp-up(36rem) {
      @include typography.get-text('pkt-txt-20-medium');
    }

    @include bp('tablet-up') {
      @include typography.get-text('pkt-txt-24-medium');
    }
  }

  &--xsmall {
    @include typography.get-text('pkt-txt-16-medium');

    @include bp-up(36rem) {
      @include typography.get-text('pkt-txt-18-medium');
    }

    @include bp('tablet-up') {
      @include typography.get-text('pkt-txt-22-medium');
    }
  }

  &--fw-light {
    font-weight: map.get(variables.$font-weight, 'light');
  }

  &--fw-regular {
    font-weight: map.get(variables.$font-weight, 'regular');
  }

  &--fw-medium {
    font-weight: map.get(variables.$font-weight, 'medium');
  }

  &--fw-bold {
    font-weight: map.get(variables.$font-weight, 'bold');
  }

  &--noSpacing {
    margin-block: 0;
  }

  &--start {
    text-align: start;
  }

  &--end {
    text-align: end;
  }

  &--center {
    text-align: center;
  }
}