@charset 'UTF-8';

////
/// Flavor SCSS Mixins Filter
/// @group mixins-filter
/// @author blackmirror1980
////

/// Filter functions
///
/// @access private
/// @type list
$filter-functions-names: (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url);

/// Extracts filter function name from a string
///
/// @requires {function} string-contains
/// @access public
/// @param {string} $ff - the filter string (e.g. `blur(5px)`)
/// @return {string | null} - the filter function name or null
@function get-filter-function-name($ff) {
  @if(string-contains($ff, '(') and string-contains($ff, ')')) {
    @return string-slice($ff, 1, string-index($ff, '(') - 1);
  }

  @return null;
}

/// Checks if something is a filter function
///
/// @access public
/// @param {string} $ff - the filter string (e.g. `blur(5px)`)
/// @return {boolean} - true if is filter function value
@function is-filter-function($ff) {
  $filter-function-name: get-filter-function-name($ff);

  @return is-defined($filter-function-name) and array-contains($filter-functions-names, $filter-function-name);
}

/// Filter modes
///
/// @access private
/// @type list
$filter-modes: array-concat((none), $css-default-modes);

/// Checks if something is a filter mode or function
///
/// @access public
/// @param {string} $filter - the filter string (e.g. `blur(5px)` or `'none`)
/// @return {boolean} - true if is filter mode or filter function value
@function is-filter($filter) {
  @return is-defined($filter) and (array-contains($filter-modes, $filter) or is-filter-function($filter));
}

/// Filter mixin
///
/// @todo manage multiple filters
/// @example scss - Usage
///   .filter-element {
///     @include filter(blur(5px));
///   }
///
/// @example css - Output
///   .filter-element {
///     -webkit-filter: blur(5px);
///     -moz-filter: blur(5px);
///     -ms-filter: blur(5px);
///     -o-filter: blur(5px);
///     filter: blur(5px);
///   }
/// @access public
/// @param {string} $filter - the filter string (e.g. `blur(5px)` or `none`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin filter($filter, $important: false) {
  @if is-filter($filter) {
    @include prefixer(filter, $filter, null, $important);
  }
  @else {
    @warn '`filter: #{$filter}` is not a valid filter value';
  }
}

/// Opacity mixin
/// <br>cross-browser with fallbacks for ie old browsers opacity mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_opacity.asp W3Schools opacity docs
/// @example scss - Usage - default
///   .opacity-element {
///     @include opacity(.3);
///   }
///
/// @example css - Output - default
///   .opacity-element {
///     opacity: .3;
///   }
///
/// @example scss - Usage - with fallbacks
///   .opacity-element {
///     @include opacity(.3, true);
///   }
///
/// @example css - Output - with fallbacks
///   .opacity-element {
///     filter: alpha(opacity=(30));
///     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
///     opacity: .3;
///   }
/// @access public
/// @param {float} $o - the opacity value (e.g. `.3` or `1`)
/// @param {boolean} $fallbacks [false] - if true add fallbacksa for ie old browsers
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin opacity($o, $fallbacks: false, $important: false) {
  @if is-percentage-number($o) {
    @if $fallbacks {
      // fallbacks for ie old browsers
      filter: alpha(opacity=(#{$o * 100})) important($important);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$o * 100})" important($important);
    }

    opacity: $o important($important);
  }
  @else {
    @warn '`opacity: #{$o}` is not a valid opacity value';
  }
}