/* 
 * Containers
 *
 * Containers er en viktig brikke for å bruke Punkt, og som holder på, 
 * gir luft rundt og justerer innholdet innenfor en skjermstørrelse.
 */

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

$-gapsSmall: map.get(variables.$spacing, 'size-16');
$-gapsMedium: map.get(variables.$spacing, 'size-32');

.pkt-container {
  margin-inline: auto;
  padding-inline: $-gapsSmall;
  width: 100%;
  max-width: 100vw;

  @include bp('tablet-up') {
    padding-inline: $-gapsMedium;
  }

  @include bp-up(80rem) {
    max-width: 80rem;
  }

  // Widths
  &--full {
    max-width: 100%;
  }
  @include bp-up(36rem) {
    &--phablet {
      max-width: 36rem;
    }
  }
  @include bp-up(48rem) {
    &--tablet {
      max-width: 48rem;
    }
  }
  @include bp-up(64rem) {
    &--tablet-big {
      max-width: 64rem;
    }
  }
  @include bp-up(80rem) {
    &--laptop {
      max-width: 80rem;
    }
  }
  @include bp-up(100rem) {
    &--desktop {
      max-width: 100rem;
    }
  }

  // Alignment
  &--left {
    margin-left: 0;
    margin-right: auto;
  }
  &--center {
    margin-inline: auto;
  }
  &--right {
    margin-left: auto;
    margin-right: 0;
  }
}