// Easing Transition
// ---------------------------
//
@mixin transition-cubic-bezier() {
	// @include transition-cubic-bezier();
	transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}



// Default Transition
// ---------------------------
//
@mixin transition-default() {
	// @include transition-default(); 
	transition: all 0.3s ease;
}



// None Of Transition
// ---------------------------
//
@mixin transition-none() {
	// @include transition-none();
	transition: none; 
}


// Background Gradient
// ---------------------------
//
@mixin bg-gradient( $direction: 'to right' ) {
	// @include bg-gradient( 'to bottom' );
	// Compatible with ie9+
	background: $highlight-color1; 
	background: linear-gradient(#{$direction}, $highlight-color1 0%,$highlight-color2 100%);
}


// Icon & Text Gradient
// ---------------------------
//
@mixin icontxt-gradient( $direction: 'to right' ) {
	// @include icontxt-gradient( 'to bottom' );
	// The font is the default color when the browser is IE
	background: linear-gradient(#{$direction}, $highlight-color1 0%,$highlight-color2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}


// Gradient Border
// ---------------------------
//
@mixin border-gradient( $color1, $color2, $border-width, $direction, $bg ) {
	// @include border-gradient( $highlight-color1, $highlight-color2, 3px, 'to right', #fff );
	// Compatible with ie9+
	background: #{$bg};
   
	
	&::after {
		/* Please do not convert it to block elements and set width and height. */
		content: '';
		background: #{$color1};
		background: linear-gradient(#{$direction}, #{$color1} 0%, #{$color2} 100%), linear-gradient(#{$direction}, #{$color1} 0%, #{$color2} 100%);
		position: absolute;
		top: -#{$border-width};
		bottom: -#{$border-width};
		right: -#{$border-width};
		left: -#{$border-width};
		z-index: -1;
		border-radius: inherit;
	}
	
}


// Outer Shadow Effect
// ---------------------------
// Optional values: thick, highlight, regular, light
//
@mixin outer-shadow( $type: 'thick', $color: '' ) {
	// @include outer-shadow( 'thick' );
	
	// thick
	@if ( $type == 'thick' ) {
		box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, 
			        rgba(0, 0, 0, 0.08) 0 15px 12px;
	}
	
	// highlight
	@if ( $type == 'highlight' ) {
		
		@if ( $color == '' ) {
			$color: $highlight-color1;
		}
		
		box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, 
			        rgba($color, 0.2) 0px 15px 35px 0px;
	}

	// regular
	@if ( $type == 'regular' ) {
		box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, 
			        rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
	}
	
	// light
	@if ( $type == 'light' ) {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
	}
	
	
}



// Text wWith Ellipsis
// ---------------------------
//
@mixin ellipsis(){
	// @include ellipsis();
	overflow: hidden;
	text-overflow: ellipsis;	
	width: 100%;
	white-space: nowrap;
	
}

// Adding Stroke to Web Text
// ---------------------------
//
@mixin stroke-text( $color, $width: 1px, $fill: white ){
	// @include stroke-text( $highlight-color1, 1px, white );
	text-fill-color: #{$fill}; /* Will override color (regardless of order) */
	text-stroke-width: #{$width};
	text-stroke-color: #{$color};
}


//  Make the cursor a hand when a user hovers over an item
// ---------------------------
//
@mixin cursor-img( $img: '../../assets/images/demo/cursorhand.png' ){
	// @include cursor-img( '../../assets/images/demo/cursorhand.png' );
	cursor: url(#{$img}), auto;
	
}

//  Resize the background image to cover the entire container
// ---------------------------
//
@mixin background-cover() {
	// @include background-cover();
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


// Custom Scrollbar
// ---------------------------
//
@mixin customScrollbar( $dir, $classname, $w: 8px ){
	// @include customScrollbar( 'vertical', '.classname' );
	#{$classname}::-webkit-scrollbar-track {
		border-radius: 0px;
		background-color: #e9ecee;
	}
	
	#{$classname}::-webkit-scrollbar-corner {
		background-color: transparent;
	}

	#{$classname}::-webkit-scrollbar-button {
		width: 0;
		height: 0;
		display: none;
	}


	@if ( $dir == 'vertical' ) {
		#{$classname}::-webkit-scrollbar {
			width: #{$w};
		}
	} @else {
		#{$classname}::-webkit-scrollbar {
			height: #{$w};
		}

	}

	#{$classname}::-webkit-scrollbar-thumb {
		border-radius: 0px;
		background-color: rgba(0,0,0,0.2);
		box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10), inset 0 -1px 0 rgba(0,0,0,0.07);
	}
	
	
	#{$classname}::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0,0,0,0.3);
	}

	
	
}



// Security Width Setting for Absolute Element 
// ---------------------------
// Note: Generally used for elements that cannot use ".container", such as 
//       absolutely elements whose security width cannot be determined
//
@mixin securityWidthForElement( $classname: '.demo', $mouseEvents: false, $position: 'absolute' ){
	// @include securityWidthForElement( '.txt', false );


	@if ( $classname != '' ) {
		/* New XL container for Bootstrap 5.x */
		#{$classname} {
			width: 1140px;
			position: $position;
			left: 50%;
			transform: translateX(-50%);
			padding-left: 15px;
			padding-right: 15px;

			/* Prevent layers from hiding the underlying elements */
			@if ( $mouseEvents ) { 
				pointer-events: auto;
			} @else {
				pointer-events: none;
			}
			
			> div {
				pointer-events: auto;
			}
		}

		@media all and (max-width: 1141px) {
			#{$classname} {
				width: calc( 100% - 15px);
			}
		}

		@media all and (min-width: 1430px) {
			#{$classname} {
				width: 1278px;
			}
		}


	}
	
}





// Vertically Align Element 
// ---------------------------
// To vertically align an inline element's box inside its containing line box, 
// it could be used to vertically position an <img> in a line of text.
//
@mixin center-vertically( $pseudo-el: 'before' ) {
	//@include center-vertically();
	
    position: relative;

    &:#{$pseudo-el} {
        content: '';
        position: relative;
        height: 100%;
        width: 0;
    }

    &:#{$pseudo-el},
    > * {
        vertical-align: middle;
        display: inline-block;
    }
}
  
// ###############################################################################
// ######################### Bootstrap 5 Extend ###################################
// ###############################################################################

// alert-variant-mixin
///////////////////////////////////////////////////////////////// 
@mixin alert-variant($background, $border, $color, $linkcolor) {
    color: #{$color};
    background-color: #{$background};
    border-color: #{$border};

    hr {
        border-block-start-color: #{$color};
        opacity: 0.2;
    }

    .alert-link {
        color: #{$linkcolor};
    }
}

// list group
///////////////////////////////////////////////////////////////// 
@mixin list-group-item-variant($background, $border, $color, $linkcolor) {
    color: #{$color} !important;
    background-color: #{$background};

    &.list-group-item-action {

        &:hover,
        &:focus {
            color: #{$color};
            background-color: #{$linkcolor};
        }

        &.active {
            color: #{$color};
            background-color: #{$linkcolor};
            border-color: #{$border};
        }
    }

}


// spacer
///////////////////////////////////////////////////////////////// 
@mixin generate-spacer($utility, $breakpoint-name: "") {
    $values: map-get($utility, "values");
    $properties: map-get($utility, "property");
    $property-class: if(map-has-key($utility, class), map-get($utility, "class"), nth($properties, 1));

    @each $key, $value in $values {

        @if $breakpoint-name == "" {
            .#{$property-class}-#{$key} {

                @each $property in $properties {
                    #{$property}: $value !important;
                }

            }
        } @else {
            .#{$property-class}-#{$breakpoint-name}-#{$key} {

                @each $property in $properties {
                    #{$property}: $value !important;
                }

            } 
        }

    }
}


// spacer (gap to margin)
// Compatible with older versions of tablet or mobile browsers
///////////////////////////////////////////////////////////////// 

// Usage:

// @each $key, $utility in $spacer-utilities {
//     @if type-of($utility)=="map" {
//         @include generate-spacer-degrade($utility);
//     }
// }

// @each $bp-key, $bp-value in $grid-breakpoints {
//     @media (min-width: #{$bp-value}) {
//         @each $key, $utility in $spacer-utilities {
//             @if type-of($utility)=="map" {
//                 @include generate-spacer-degrade($utility, $bp-key);

//             }
//         }
//     }
// }


@mixin generate-spacer-degrade($utility, $breakpoint-name: "") {
    $values: map-get($utility, "values");
    $properties: map-get($utility, "property");
    $property-class: if(map-has-key($utility, class), map-get($utility, "class"), nth($properties, 1));

    @each $key, $value in $values {

        @if $breakpoint-name == "" {
            @if (str-index($property-class, "gap") and str-index($property-class, "row-gap") == null and str-index($property-class, "column-gap") == null ) {
                .#{$property-class}-#{$key} {

                    @each $property in $properties {
                        gap: 0 !important;

                        > * {
                            margin-right: $value !important;
                            margin-bottom: $value !important;
                        }
                    }

                }
            }

            @if (str-index($property-class, "row-gap")) {
                .#{$property-class}-#{$key} {

                    @each $property in $properties {
                        row-gap: 0 !important;

                        > * {
                            margin-bottom: $value !important;
                        }
                    }

                }
            }

            @if (str-index($property-class, "column-gap")) {
                .#{$property-class}-#{$key} {

                    @each $property in $properties {
                        column-gap: 0 !important;

                        > * {
                            margin-right: $value !important;
                        }
                    }

                }
            }


            

            
        } @else {
            @if (str-index($property-class, "gap") and str-index($property-class, "row-gap") == null and str-index($property-class, "column-gap") == null) {
                .#{$property-class}-#{$breakpoint-name}-#{$key} {

                    @each $property in $properties {
                        gap: 0 !important;

                        > * {
                            margin-right: $value !important;
                            margin-bottom: $value !important;
                        }
                    }

                } 
            }

            @if (str-index($property-class, "row-gap")) {
                .#{$property-class}-#{$breakpoint-name}-#{$key} {

                    @each $property in $properties {
                        row-gap: 0 !important;

                        > * {
                            margin-bottom: $value !important;
                        }
                    }

                } 
            }

            @if (str-index($property-class, "column-gap")) {
                .#{$property-class}-#{$breakpoint-name}-#{$key} {

                    @each $property in $properties {
                        column-gap: 0 !important;

                        > * {
                            margin-right: $value !important;
                        }
                    }

                } 
            }



        }
    


    }
}