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

@mixin rem($property, $values...) {
    $max: list.length($values);
    $px-values: '';
    $rem-values: '';

    @for $i from 1 through $max {
        $value: strip-unit(list.nth($values, $i));
        $px-values: #{$px-values + $value * 16}px;

        @if $i < $max {
            $px-values: #{$px-values + ' '};
        }
    }

    @for $i from 1 through $max {
        $value: strip-unit(list.nth($values, $i));
        $rem-values: #{$rem-values + $value}rem;

        @if $i < $max {
            $rem-values: #{$rem-values + ' '};
        }
    }

    #{$property}: $px-values;
    #{$property}: $rem-values;
}

@mixin font-size($size-value: 1.6) {
    @include rem(font-size, $size-value);
}

// =============================================================================
// String Replace
// =============================================================================
@function str-replace($string, $search, $replace: '') {
    $index: string.index($string, $search);

    @if $index {
        @return string.slice($string, 1, $index - 1) + $replace +
            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
    }

    @return $string;
}
// =============================================================================
// Font Face
// =============================================================================
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;
    $extmods: (
        eot: '?',
        svg: '#' + str-replace($name, ' ', '_'),
    );
    $formats: (
        otf: 'opentype',
        ttf: 'truetype',
    );

    @each $ext in $exts {
        $extmod: if(map.has-key($extmods, $ext), $ext + map.get($extmods, $ext), $ext);
        $format: if(map.has-key($formats, $ext), map.get($formats, $ext), $ext);
        $src: list.append($src, url('#{$path}.#{$extmod}') format(string.quote($format)), comma);
    }

    @font-face {
        font-family: string.quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

/* stylelint-disable block-no-empty */
@mixin clearfix() {
    // no-op
}
/* stylelint-enable block-no-empty */

// =============================================================================
// Remove nth-Child Padding
// =============================================================================

@mixin nth-element($num, $px) {
    &:nth-child(#{$num}) {
        padding-left: $px;
    }
}

// =============================================================================
// Sets antialiasing - used for light text on dark background
// =============================================================================
@mixin font-smoothing() {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}