/**
 * Custom mixins
 * ----------------------------------------------------------------------------
 */

/// Helper function
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

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

    @return $string;
  }

/**
 * Used to compile CSS to display retina images.
 *
 * Example:
 * @include background-image-retina(logo, png, 210px, 70px);
 *
 */
@mixin background-image-retina($file, $type, $width, $height) {
    background-image: url("assets/images/" + $file + "." + $type);
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        & {
            background-image: url("assets/images/" + $file + "@2x." + $type);
            -webkit-background-size: $width $height;
            -moz-background-size: $width $height;
            -o-background-size: $width $height;
            background-size: $width $height;
        }
    }
}

@mixin placeholder {
    &::-webkit-input-placeholder {@content}
    &:-moz-placeholder           {@content}
    &::-moz-placeholder          {@content}
    &:-ms-input-placeholder      {@content}
}

/**
 * Add an link to style etc.
 */
@mixin link-style($type: 'black', $line: 2px, $opacity: 0) {
    $color: $color-gray-85;
    $hover-color: $black;

    @if $type == 'black' {
        $color: $color-gray-85;
        $hover-color: $black;
    } @else if $type == 'white' {
        $color: $white;
        $hover-color: $white;
    }

    position: relative;

    &:not(.button) {
        color: $color;
    }

    &:not(.button)::before {
        content: '';
        position: absolute;
        width: 100%;
        opacity: $opacity;
        height: $line;
        bottom: -$line;
        background: $color;
        transition: all .2s ease-in;
    }

    &:hover, &:focus {
        &:not(.button) {
            color: $hover-color;
        }
        &:not(.button)::before {
            opacity: 1;
        }
    }

    &:hover:focus,
    &:hover:active,
    &:active {
        &:not(.button)::before {
            opacity: 0;
        }
    }
}

/**
 * Add an arrow to links/buttons etc.
 *
 * @param {String} $color - The chosen color.
 */
@mixin add-arrow($color: $color-gray-85) {
    $color: str-replace(quote($color), '#', '%23'); // Fix for IE and Firefox

    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 9px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 14"><path fill-rule="evenodd" fill="#{$color}" d="M8.5 7l-.59-.569L1.762.5.5 1.638 6.057 7 .5 12.362 1.762 13.5 7.91 7.569z"/></svg>');
    background-repeat: no-repeat;
}

/**
 * Use this mixin to organize z-index. Keeps it under control.
 *
 * @param {String} $unit [base] - The chosen z-index value unit.
 * @return {List} The desired z-index.
 */
$z-index: (
  base: 1,
  negative: -1,
  positive: 10,
  header: 100,
  overlay: 1000
);

@function z-index($unit: 'base') {
  @if not map-has-key($z-index, $unit) {
    @error 'No unit found for `#{$unit}` in $z-index map.';
  }

  @return map-get($z-index, $unit);
}

/**
 * Custom placeholders
 * ----------------------------------------------------------------------------
 */

%unstyled-list {
    margin: {
        bottom: 0;
        left: 0;
    };
    padding: {
        left: 0;
    };
    list-style: none;
}
