/// ===========================================================================
//   02-TOOLS -> MIXINS -> #TRANSITION
//   ======================================================================= */


//
// SCSS imports
//

@use '../../01-settings' as *;


/// Transition
///
/// Creates transition declerations 
///
/// @param {String | List} $properties - Properties to apply transitions to
/// @param {Number [ms]} $duration ($transition-duration-lg) - Name of duration
/// in the $transition-durations map (set in `01-settings/_transition-duration.scss`)
/// or a custom value
/// @param {String} $timing - Transition timing function
/// 
/// @example scss using a single property
///   .class-name {
///     @include transition('color');
///   }
/// 
/// @example scss using multiple properties
///   .class-name {
///     @include transition(('background-color', 'color'));
///   }
/// 
/// @access public

@mixin transition($properties, $duration: $transition-duration-lg, $timing: cubic-bezier(0.66, 0.21, 0.34, 0.84)) {
    @if (length($properties) == 1) {
        transition: #{$properties} $duration $timing;
    } @else if (length($properties) > 1) {
        transition-duration: $duration;
        transition-property: #{$properties};
        transition-timing-function: $timing;
    }    
}