@charset 'UTF-8';

////
/// Flavor SCSS Mixins Padding
/// @group mixins-padding
/// @author blackmirror1980
////

/// Checks if something is a padding value
///
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @return {boolean} - true if is padding value
@function is-padding($p) {
  @return is-defined($p) and (array-contains($css-default-modes, $p) or is-length($p));
}

/// Padding direction mixin
///
/// @example scss - Usage
///   .padding-direction-element {
///     @include padding-direction(5px);
///   }
///
/// @example css - Output
///   .padding-direction-element {
///     padding: 5px;
///   }
///
/// @example scss - Usage - padding-left
///   .padding-direction-element {
///     @include padding-direction(5px, padding-left);
///   }
///
/// @example css - Output - padding-left
///   .padding-direction-element {
///     padding-left: 5px;
///   }
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {string} $padding-direction-selector [padding] - the padding direction (e.g. `padding-top`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding-direction($p, $padding-direction-selector: padding, $important: false) {
  @if is-defined($p) {
    @if is-padding($p) {
      #{$padding-direction-selector}: $p important($important);
    }
    @else {
      @warn '`#{$padding-direction-selector}: #{$p}` is not a valid padding value';
    }
  }
}

/// Padding top mixin
///
/// @example scss - Usage
///   .padding-top-element {
///     @include padding-top(5px);
///   }
///
/// @example css - Output
///   .padding-top-element {
///     padding-top: 5px;
///   }
/// @see {mixin} padding-direction
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding-top($p, $important: false) {
  @include padding-direction($p, padding-top, $important);
}

/// Padding right mixin
///
/// @example scss - Usage
///   .padding-right-element {
///     @include padding-right(5px);
///   }
///
/// @example css - Output
///   .padding-right-element {
///     padding-right: 5px;
///   }
/// @see {mixin} padding-direction
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding-right($p, $important: false) {
  @include padding-direction($p, padding-right, $important);
}

/// Padding bottom mixin
///
/// @example scss - Usage
///   .padding-bottom-element {
///     @include padding-bottom(5px);
///   }
///
/// @example css - Output
///   .padding-bottom-element {
///     padding-bottom: 5px;
///   }
/// @see {mixin} padding-direction
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding-bottom($p, $important: false) {
  @include padding-direction($p, padding-bottom, $important);
}

/// Padding left mixin
///
/// @example scss - Usage
///   .padding-left-element {
///     @include padding-left(5px);
///   }
///
/// @example css - Output
///   .padding-left-element {
///     padding-left: 5px;
///   }
/// @see {mixin} padding-direction
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding-left($p, $important: false) {
  @include padding-direction($p, padding-left, $important);
}

/// Padding mixin
///
/// @example scss - Usage - single value
///   .padding-element {
///     @include padding(5px);
///   }
///
/// @example css - Output - single value
///   .padding-element {
///     padding-top: 5px;
///     padding-right: 5px;
///     padding-bottom: 5px;
///     padding-left: 5px;
///   }
///
/// @example scss - Usage - two values
///   .padding-element {
///     @include padding(5px 10px);
///   }
///
/// @example css - Output - two values
///   .padding-element {
///     padding-top: 5px;
///     padding-right: 10px;
///     padding-bottom: 5px;
///     padding-left: 10px;
///   }
///
/// @example scss - Usage - three values
///   .padding-element {
///     @include padding(5px 10px 7px);
///   }
///
/// @example css - Output - three values
///   .padding-element {
///     padding-top: 5px;
///     padding-right: 10px;
///     padding-bottom: 7px;
///     padding-left: 10px;
///   }
///
/// @example scss - Usage - four values
///   .padding-element {
///     @include padding(5px 10px 7px 15px);
///   }
///
/// @example css - Output - four values
///   .padding-element {
///     padding-top: 5px;
///     padding-right: 10px;
///     padding-bottom: 7px;
///     padding-left: 15px;
///   }
///
/// @example scss - Usage - null values
///   .padding-element {
///     @include padding(5px null null 15px);
///   }
///
/// @example css - Output - null values
///   .padding-element {
///     padding-top: 5px;
///     padding-left: 15px;
///   }
/// @access public
/// @param {string | length} $p - the padding value (e.g. `initial` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin padding($p, $important: false) {
  $padding-top: nth-value($p, 1, 0);
  $padding-right: nth-value($p, 2, $padding-top);
  $padding-bottom: nth-value($p, 3, $padding-top);
  $padding-left: nth-value($p, 4, $padding-right);

  @include padding-top($padding-top, $important);
  @include padding-right($padding-right, $important);
  @include padding-bottom($padding-bottom, $important);
  @include padding-left($padding-left, $important);
}