// Postion and transform
@mixin aligner{
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin position($position, $args: ()) {
  $offsets: top right bottom left;
  position: $position;

  @each $offset in $offsets {
    $index: index($args, $offset);

    @if $index {
      @if $index==length($args) {
        #{$offset}: 0;
      }

      @else {
        $next: nth($args, $index + 1);

        @if is-valid-length($next) {
          #{$offset}: $next;
        }

        @else if index($offsets, $next) {
          #{$offset}: 0;
        }

        @else {
          @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
        }
      }
    }
  }
}

@mixin rotate($amount) {
  transform: rotate($amount);
}

// Typography
@mixin font($family: false, $size-mob: false, $size-desk: false, $colour: false, $weight: false, $lh: false) {
  @if $family {
    font-family: $family, Helvetica, Arial, sans-serif;
  }
  @if $size-mob {
    font-size: $size-mob;
  }
  @if $size-desk {
    font-size: $size-desk;
  }
  @if $colour {
    color: $colour;
  }
  @if $weight {
    font-weight: $weight;
  }
  @if $lh {
    line-height: $lh;
  }
}

@mixin font-size-map($font-sizes: $font-size-lists, $breakpoints: $grid-breakpoints) {
  @each $breakpoint,
    $font-size-list in $font-sizes {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      font-size: $font-size-list;
    }
  }
}

// Other
@mixin pseudo($display: block, $pos: absolute, $content: "") {
  position: $pos;
  display: $display;
  content: $content;
}

@mixin image-fit-cover{
  @include position(absolute, top 0 right 0);
  width: 100%;
  height: 100%;
  object-fit: cover;
}