@use 'sass:string';
@use 'sass:math';

$golden-ratio: 1.618;
$reciprocal-golden-ratio: 1 / $golden-ratio;
$duration: $reciprocal-golden-ratio * 1.2;
$breakpoints: (
  'mobile': (
    max-width: 800px
  ),
  'desktop': (
    max-width: 1440px
  )
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  } @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
  }
}

@function tovw($target, $min: 'placeholder', $context: 1920px) {
  @if $context == 'desktop' {
    $context: 1440px;
  }

  @if $context == 'mobile' {
    $context: 800px;
  }

  @if $target == 0 {
    @return 0;
  }

  @if $min != 'placeholder' {
    @return string.unquote(
      'max(' + $min + ', ' + (math.div($target, $context) * 100) + 'vw)'
    );
  }

  @return string.unquote((math.div($target, $context) * 100) + 'vw');
}

@function torem($target, $context: 16px) {
  @if $target == 0 {
    @return 0;
  }

  @return math.div($target, $context) + 0rem;
}

@function toem($target, $context) {
  @if $target == 0 {
    @return 0;
  }

  @return math.div($target, $context) + 0em;
}
