@use 'sass:list';

// Ny breakpoint-mixin, veldig forenklet. Tar bare verdi, og lager media query
// for min-width. Hvis verdien er 0, blir det ingen media query i det hele tatt.
@mixin bp-up($value) {
  @if $value == 0 {
    @content;
  } @else {
    @media screen and (min-width: $value) {
      @content;
    }
  }
}

$-removed-in-19: ('phablet', 'phablet-up', 'desktop-up');
$-removed-in-later-version: ('mobile-to-phablet', 'phablet-to-tablet-big', 'tablet-big-to-laptop');

@mixin bp($name) {
  @if list.index($-removed-in-19, $name) {
    @error "bp('#{$name}') ble fjernet i Punkt 19. Bruk bp-up() med en literal verdi for å beholde terskelen — f.eks. bp-up(36rem) i stedet for bp('phablet-up'). Se punkt.oslo.kommune.no/grunnleggende/for-utviklere/migrering-punkt-19/";
  } @else if list.index($-removed-in-later-version, $name) {
    @warn "bp('#{$name}') er utdatert og vil fjernes i senere Punkt-versjon. Skriv media query-en direkte.";
  }

  @if $name== 'mobile' {
    // 0px to 767px
    @media screen and (min-width: 0rem) and (max-width: 47.938rem) {
      @content;
    }
  } @else if $name== 'mobile-up' {
    // 0px and up
    @media screen {
      @content;
    }
  } @else if $name== 'tablet' {
    // 768px to 1023px
    @media screen and (min-width: 48rem) and (max-width: 63.938rem) {
      @content;
    }
  } @else if $name== 'tablet-up' {
    // 768px and up
    @media screen and (min-width: 48rem) {
      @content;
    }
  } @else if $name== 'tablet-big' {
    // 1024px to 1279px
    @media screen and (min-width: 64rem) and (max-width: 79.938rem) {
      @content;
    }
  } @else if $name== 'tablet-big-up' {
    // 1024px and up
    @media screen and (min-width: 64rem) {
      @content;
    }
  } @else if $name== 'laptop' {
    // 1280px and up
    @media screen and (min-width: 80rem) {
      @content;
    }
  } @else if $name== 'laptop-up' {
    // 1280px and up
    @media screen and (min-width: 80rem) {
      @content;
    }
  } @else if $name== 'mobile-to-phablet' {
    // 0px to 575px
    @media screen and (min-width: 0rem) and (max-width: 35.938rem) {
      @content;
    }
  } @else if $name== 'mobile-to-laptop' {
    // 0px to 1279px
    @media screen and (min-width: 0rem) and (max-width: 79.938rem) {
      @content;
    }
  } @else if $name== 'mobile-to-tablet' {
    // 0px to 767px
    @media screen and (min-width: 0rem) and (max-width: 47.938rem) {
      @content;
    }
  } @else if $name== 'tablet-to-tablet-big' {
    // 768px to 1023px
    @media screen and (min-width: 48rem) and (max-width: 63.938rem) {
      @content;
    }
  } @else if $name== 'phablet-to-tablet-big' {
    // 576px to 1023px
    @media screen and (min-width: 36rem) and (max-width: 63.938rem) {
      @content;
    }
  } @else if $name== 'tablet-to-laptop' {
    // 768px to 1279px
    @media screen and (min-width: 48rem) and (max-width: 79.938rem) {
      @content;
    }
  } @else if $name== 'tablet-big-to-laptop' {
    // 1024px to 1279px
    @media screen and (min-width: 64rem) and (max-width: 79.938rem) {
      @content;
    }
  } @else {
    @media screen and (min-width: $name) {
      @content;
    }
  }
}