// Setup a mask-image for an inline svg
@mixin icon-image-mask($mask-image, $size: 16px) {
  background-size: $size;
  background-color: var(--dh-color-fg);
  mask-image: $mask-image;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: $size;
}

// Caret icon for pickers, dropdowns, select, etc.
@mixin caret-icon() {
  $width: 10px;
  $height: 6px;
  @include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);

  background-color: var(--dh-color-selector-fg);
  width: $width;
  height: $height;
}

/// Utilty for increasing specificity by repeating a given selector n number of
/// times.
///
/// It should work for selectors that can be concatenated without delimiters
/// such as '.some-selector.some-selector', '#some-id#some-id', or '&&'. A
/// case where it would not work would be with an element selector e.g. 'divdiv'.
///
/// Example usage:
///
/// #{multiply-specificity-n('.some-selector', 2)} {
/// }
///
/// would produce
///
/// .some-selector.some-selector {
/// }
///
/// @param {string} $selector the selector to duplicate
/// @param {number} $n number of times to duplicate
/// @return {string} duplicated selector
@function multiply-specificity-n($selector, $n) {
  $result: $selector;
  @for $i from 2 through $n {
    $result: selector-append($result, $selector);
  }

  @return $result;
}

// Linear gradient with same start and end color. Useful for certain scenarios
// where we need a solid background image layer.
@function solid-gradient($color) {
  @return linear-gradient(0deg, $color, $color);
}

@function color-mix-opacity($semantic-name, $i: 100) {
  @return color-mix(
    in srgb,
    /* if $i doesn't contain a % sign, add one */
      var(--dh-color-#{$semantic-name}) #{$i}#{if(unit($i) == '%', '', '%')},
    transparent
  );
}

@function accent-opacity($i: 100) {
  @return color-mix-opacity('accent', $i);
}

@function negative-opacity($i: 100) {
  @return color-mix-opacity('negative', $i);
}

@function negative-down-bg-opacity($i: 100) {
  @return color-mix-opacity('negative-down-bg', $i);
}

@function black-opacity($i: 100) {
  @return color-mix-opacity('black', $i);
}

@function bg-opacity($i: 100) {
  @return color-mix-opacity('bg', $i);
}

@function fg-opacity($i: 100) {
  @return color-mix-opacity('fg', $i);
}