$base-font-size: 16px;

// convert px to em
@function px-to-em($px) {
  @return $px / $base-font-size * 1em;
}

// convert px to rem
@function px-to-rem($px) {
  @return $px / $base-font-size * 1rem;
}

// return color mix function with opacity support
@function cm($main-color, $secondary-color, $opacity: 1) {
  $opacity: $opacity * 100%;
  @return color-mix(in srgb, $secondary-color $opacity, $main-color);
}

// return value from CSS variable
@function get-var($variable-name, $secondary-variable-name: false) {
  @if $secondary-variable-name {
    @return #{var(--#{$prefix}-#{$variable-name}, $secondary-variable-name)};
  }

  @return #{var(--#{$prefix}-#{$variable-name})};
}

// Apply moz pref media rule (support `not` and `or` with two params)
@mixin moz-pref-media($pref-names) {
  @if str-index($pref-names, "not") == 1 {
    $actual-pref-names: str-slice($pref-names, 5);
    @media not (#{'-moz-pref("' + $actual-pref-names + '")'}) {
      @content;
    }
  } @else if str-index($pref-names, "or") == 1 {
    $parts: str-split($pref-names, "or");
    $first: nth($parts, 1);
    $second: nth($parts, 2);
    @media (#{'-moz-pref("' + $first + '")'}) or (#{'-moz-pref("' + $second + '")'}) {
      @content;
    }
  } @else {
    @media (#{'-moz-pref("' + $pref-names + '")'}) {
      @content;
    }
  }
}
