@use "sass:math";

$base-fontsize: 10px;

// Strips the unit for a given number
// @param   $number     ('Number')  the number the unit should be stripped
// @returns ('Number')  the number without an unit
@function strip-units($number) {
  @return math.div($number, $number * 0 + 1);
}

// Converts px to rem
// @param   $target     ('Number')  target rem value
// @param   $context    ('Number')  context (container) pixel size
// @returns ('Number')  the px value converted to rem
@function rem($target, $context: $base-fontsize) {
  @return math.div(strip-units($target), strip-units($context)) * 1rem;
}

$min-vw: 576px;
$max-vw: 1400px;
$min-value: 1rem;
$max-value: 1.5rem;

@mixin fluid-size($min-vw, $max-vw, $min-value, $max-value) {
  $factor: math.div(1, $max-vw - $min-vw) * ($max-value - $min-value);
  $calc-value: unquote("#{rem( $min-value - ($min-vw * $factor)) } + #{ 100vw * $factor }");

  font-size: $max-value; // Fallback for older browsers
  font-size: clamp(
          #{ rem(if($min-value > $max-value, $max-value, $min-value)) },
          calc(#{ $calc-value }),
          #{ rem(if($min-value > $max-value, $min-value, $max-value)) }
  );
}

@mixin subheader($font-size, $borders: 0, $responsive: 0) {
  text-transform: uppercase;
  font-family: $font-family-sans-serif;
  font-size: rem($font-size);
  font-weight: 300;

  @if($responsive == 1) {
    @include media-breakpoint-up(md) {
      font-size: rem(calc($font-size*1.7));
    }
  }

  @if($borders == 1) {
    margin: rem(15) auto;
    padding: rem(25) 0;
    @include bsi-border;
    @include bsi-border('bottom');
    //border-top: 1px solid $bsi-color_gray-400;
    //border-bottom: 1px solid $bsi-color_gray-400;
    display: block;
  }
}

@mixin bsi-border($position: 'top') {
  border-#{$position}: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)
}

@mixin bsi-rimless {
  margin-left: -32px;
  margin-right: -32px;
}

@mixin bsi-video-cover-img {
  i {
    position: absolute;
    top: 40%;
    left: 45%;
    font-size: xxx-large;
    color: $youtube_red;
  }
}

@mixin bsi-pagination($marginTop: 0) {
  ul {
    @if $marginTop > 0 {
      margin-top: rem($marginTop);
    }
    display: flex;
  }
  li {
    list-style-type: none;
    margin: auto rem(20);
    font-size: rem(28);
    font-family: $bsi-font_family_sans;

    a {
      text-decoration: none;
      &.current {
        text-decoration: underline;
      }
    }

    &.current {
      text-decoration: underline;
    }
  }
}