@use "sass:math";

@mixin fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }

  @return $number;
}

// Colors generator
@mixin colorify($type: color, $prefix: color) {
  @each $color, $i in $colors {
    &.#{$prefix}-#{$color} {
      #{$type}: $i;
    }
  }
}

@mixin colorifyPseudo($type: color, $prefix: color) {
  @each $color, $i in $colors {
    &.#{$prefix}-#{$color}::after {
      #{$type}: $i;
    }
  }
}

@mixin responsive-font(
  $min-size: $font-size-min,
  $size: $font-size,
  $limit: $page-limit
) {
  $scale-font-enable: global-variable-exists(scale);

  $unitless-min: strip-unit($min-size);
  $unitless-size: strip-unit($size);
  $baseline: strip-unit($min-mobile);
  $font-multiplier: 
    math.div($unitless-size - $unitless-min, strip-unit($limit) - $baseline)
  ;
  $font-baseline: ($unitless-min - $font-multiplier * $baseline);

  @if $unitless-min >= $unitless-size {
    @warn 'Responsive font: min-size equal or greater than size';
  }

  font-size: #{$unitless-min}px;

  @if $scale-font-enable == true {
    font-size: calc(#{$unitless-min}px * #{var(--scale-font)});
  }

  @media (min-width: $min-mobile) {
    font-size: #{$unitless-min}px;

    @if $scale-font-enable == true {
      font-size: calc(
        (#{$font-multiplier} * #{100vw} + (#{$font-baseline}px)) *
          #{var(--scale-font)}
      );
    } @else {
      font-size: calc((#{$font-multiplier} * #{100vw} + (#{$font-baseline}px)));
    }
  }

  @media (min-width: $limit) {
    font-size: #{$unitless-size}px;

    @if $scale-font-enable == true {
      font-size: calc(#{$unitless-size}px * #{var(--scale-font)});
    }
  }
}

// Alias for responsive-font mixin
@mixin rf($args...) {
  @include responsive-font($args...);
}

@mixin hasInfinite($text-below: false, $line-height: $line-height) {
  position: relative;

  &.hasInfinite {
    padding-left: 0.6em;
  }

  &.hasInfinite::first-letter {
    color: transparent;
  }

  &.hasInfinite::before {
    content: '∞';
    left: 0;
    position: absolute;

    font-size: 1.88em;
    line-height: #{$line-height * 0.533}em;
  }

  @if $text-below == true {
    margin-bottom: 0.4em;

    &.hasInfinite::after {
      content: 'ótakmarkað';
      @include colorify('color');

      position: absolute;
      left: 2px;
      top: 3.3em;

      font-size: 0.34em;
      font-family: $font-heading;
      font-weight: 500;
      text-transform: uppercase;
    }
  }
}

@mixin vertically-responsive($property, $number) {
  #{$property}: $number;

  @if global-variable-exists(scale) {
    @supports (--css: variables) {
      #{$property}: calc(#{$number} * var(--scale-element));
    }
  }
}

// Segment customisable per-component / instance rather than being forced to work around defaults.
@mixin segment(
  $padding-top: $segment-padding,
  $padding-bottom: $segment-padding,
  $padding-top-mobile: $segment-padding-mobile,
  $padding-bottom-mobile: $segment-padding-mobile
) {
  flex-grow: 1;

  // Set up unitless values
  $padding-top-mobile-unitless: strip-unit($padding-top-mobile);
  $padding-bottom-mobile-unitless: strip-unit($padding-bottom-mobile);
  $padding-top-unitless: strip-unit($padding-top);
  $padding-bottom-unitless: strip-unit($padding-bottom);

  @include vertically-responsive(
    padding-top,
    $padding-top-mobile-unitless * 1px
  );
  @include vertically-responsive(
    padding-bottom,
    $padding-bottom-mobile-unitless * 1px
  );

  @media (min-width: $min-tablet) {
    @include vertically-responsive(
      padding-top,
      percentage(math.div($padding-top-unitless * 1px, $page-limit))
    );
    @include vertically-responsive(
      padding-bottom,
      percentage(math.div($padding-bottom-unitless * 1px, $page-limit))
    );
  }

  @media (min-width: $page-limit) {
    @include vertically-responsive(padding-top, $padding-top-unitless * 1px);
    @include vertically-responsive(
      padding-bottom,
      $padding-bottom-unitless * 1px
    );
  }
}

@mixin container() {
  flex-grow: 1;

  margin: 0 auto;
  padding-left: $container-gutter-mobile;
  padding-right: $container-gutter-mobile;

  max-width: $page-width + $container-gutter-mobile;

  @media (min-width: $min-mobile) {
    max-width: $page-width + $container-gutter-mobile * 2;
  }

  @media (min-width: $min-tablet) {
    padding-left: $container-gutter-tablet;
    padding-right: $container-gutter-tablet;
    max-width: $page-width + $container-gutter-tablet * 2;
  }

  @media (min-width: $min-desktop) {
    padding-left: $container-gutter-desktop;
    padding-right: $container-gutter-desktop;
    max-width: $page-width + $container-gutter-desktop * 2;
  }
}

@mixin js-only {
  html:not(:global(.no-js)) & {
    @content;
  }
}

@mixin no-js {
  html:not(:global(.js)) & {
    @content;
  }
}

@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {
    @content;
  }
}

// Gsap trans-in defaults
@mixin will-animate($transform: true, $opacity: true) {
  @include js-only {
    @if $opacity == true {
      opacity: 0;
    }

    @if $transform == true {
      will-change: opacity, transform;
    } @else {
      will-change: opacity;
    }
  }
}

@mixin buttons-hover() {
  $opacity: 8%;

  @each $color, $i in $colors {
    &.color-#{$color} {
      background-color: darken($i, $opacity);

      transition-property: background-color, color;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
  }
}

// Placeholder loading applied to block element after rendering real data
@mixin loading() {
  @keyframes animateBackground {
    0% {
      background-position: -468px 0;
    }

    100% {
      background-position: 468px 0;
    }
  }

  color: transparent;

  background: linear-gradient(to right, #f5f5f5 8%, #ebebeb 18%, #f5f5f5 33%);
  background-color: #f5f5f5;
  background-size: 800px 104px;

  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: animateBackground;
  animation-timing-function: linear;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@mixin loadingColorText($color: $color-ocean) {
  display: inline-block;
  position: relative;
  background: #f6f7f8;
  background: linear-gradient(to right, $color 8%, #ebebeb 18%, $color 33%);
  background-size: 800px 104px;
  color: transparent;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
}

@mixin loadingTextDefault {
  display: inline-block;
  position: relative;
  background: #f6f7f8;
  background: linear-gradient(to right, #f5f5f5 8%, #ebebeb 18%, #f5f5f5 33%);
  background-size: 800px 104px;
  color: transparent;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
}

@mixin loadingTextDark {
  display: inline-block;
  position: relative;
  background: #1f1f1f;
  background: linear-gradient(
    to right,
    $color-dark 8%,
    $color-grey700 18%,
    $color-dark 33%
  );
  background-size: 800px 104px;
  color: transparent;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
}

@mixin loadingText(
  $height: 16,
  $width: 90,
  $type: 'default',
  $color: $color-grey
) {
  @if ($type == 'default') {
    @include loadingTextDefault;
  }
  @if ($type == 'dark') {
    @include loadingTextDark;
  }
  @if ($type == 'color') {
    @include loadingColorText($color);
  }
  display: block;

  height: #{$height}px;
  width: #{$width}px;
  max-width: 100%;
}

// Color text selection
@mixin selection($background, $color) {
  ::-moz-selection {
    color: $color;

    background: $background;
  }

  ::selection {
    color: $color;

    background: $background;
  }
}

// Title
@mixin heading($min: 100, $max: 120) {
  @include reset-heading;
  @include responsive-font($min, $max);
  @include dots;

  font-family: $font-heading;
  font-weight: 700;
  line-height: math.div($max, $max);

  color: #fff;

  &::after {
    content: '';

    display: inline-block;

    position: relative;
    top: 1px;

    margin-left: 0.08em;
    margin-right: -0.275em;
    width: 0.18em;
    height: 0.18em;

    border-radius: 50%;

    background-color: $color-dark;
  }
}

// Dot colors
@mixin dots() {
  @each $color, $i in $colors {
    &.color-#{$color}::after {
      background-color: $i;
    }
  }
}

// Hover effect
@mixin hover($color: #fff) {
  &::before,
  &::after {
    content: '';

    display: block;

    position: absolute;
    bottom: 0;

    height: 1px;
    width: 0;
  }

  &::before {
    left: 0;

    transition: width 0ms ease-in-out, border-bottom 250ms ease-in-out;
  }

  &::after {
    right: 0;

    border-bottom: 1px solid;

    transition: width 250ms ease-in-out;
  }

  &:hover::before,
  &:focus::before {
    width: 100%;

    border-bottom: 1px solid;

    transition: width 250ms ease-in-out;
  }

  &:hover::after,
  &:focus::after {
    width: 100%;

    border-bottom: 1px solid transparent;

    transition: width 0ms ease-in-out, border-bottom 0ms ease-in-out;
  }
}

@mixin dotShadow(
  $offset: 20px,
  $pointer-events-none: false,
  $opacity: 0.2,
  $background-size: 10px
) {
  &::after {
    content: '';

    position: absolute;
    top: $offset;
    right: -$offset;
    bottom: -$offset;
    left: $offset;

    z-index: -1;

    width: 100%;

    @if $pointer-events-none {
      pointer-events: none;
    }

    opacity: $opacity;
    background: url('/assets/black-dot-opaque.svg') repeat;
    background-size: $background-size;
  }
}

@mixin form-label() {
  @include responsive-font(14, 15);

  display: inline-block;

  position: relative;
  z-index: 1;

  margin: 0;
  padding: 0;

  height: 20px;

  pointer-events: none;

  color: $color-dark;
  opacity: 0.5;

  transform: translate(0, 41px);
  transition: transform $transition-enter;

  &.isActive {
    pointer-events: auto;
    transform: translate(0, 0);
  }
}