// ============================================================================
// StyleScape | Effects | Filter
// ============================================================================

@use "../variables" as *;
@use "../mixins" as *;


$default-blur: 2px;
$hover-blur: 4px;


@mixin filter_blur {
    backdrop-filter:            blur(calc(#{$q} * 4));
    -webkit-backdrop-filter:    blur(calc(#{$q} * 4));
}



// Applying Filter Mixins
// You can apply these mixins to your elements to achieve the desired effects:


.image-blur {
    @include filter_blur(4px);
}

.image-grayscale {
    @include filter_grayscale(50%);
}

.image-brightness {
    @include filter_brightness(150%);
}

.image-contrast {
    @include filter_contrast(200%);
}

.image-sepia {
    @include filter_sepia(60%);
}

// Combining multiple filter effects
.filter_combine {
    @include combine-filters(brightness(130%), contrast(120%), sepia(30%));
}
// Advanced Usage with Dynamic Values
// SCSS variables and functions can be used to dynamically adjust filter values, which is particularly useful for themes or interactive elements:



.image-interactive {
    @include blur($default-blur);

    &:hover {
        @include blur($hover-blur);
    }
}

// Function to calculate contrast based on a light or dark theme
@function theme-contrast($theme) {
    @if $theme == 'dark' {
        @return 150%;
    } @else {
        @return 100%;
    }
}

.image-theme {
    $current-theme: 'dark'; // Example variable that might be dynamically set
    @include contrast(theme-contrast($current-theme));
}
// Responsive Filters
// You can also use media queries within SCSS to apply different filters based on viewport sizes, enhancing responsive design:


.image-responsive {
    @include grayscale(100%);

    @media (min-width: 768px) {
        @include grayscale(0%);
    }
}



// Theming with Filter Effects
// You can define a set of filter effects for different themes (e.g., dark mode, light mode) using SCSS maps and loops. This approach allows you to switch filter effects based on the active theme dynamically.


// Define themes with specific filter values
$themes: (
    light: (
        brightness: 100%,
        contrast: 90%
    ),
    dark: (
        brightness: 80%,
        contrast: 110%
    )
);

// Apply theme-based filters using a mixin
@mixin apply-theme($theme-name) {
    $theme: map-get($themes, $theme-name);
    filter: brightness(map-get($theme, brightness)) contrast(map-get($theme, contrast));
}

.element {
// Example usage with a light theme
@include apply-theme(light);

&:hover {
    // Darken on hover for the light theme
    @include apply-theme(dark);
}
}
// Animated Filter Transitions
// SCSS can be used to create smooth transitions between filter states, adding a dynamic and interactive feel to your elements.


@mixin filter-transition($duration: 0.3s, $easing: ease) {
    transition: filter $duration $easing;
}

.element-with-transition {
    @include grayscale(0%);
    @include filter-transition(0.5s, ease-in-out);

    &:hover {
        @include grayscale(100%);
    }
}
// Generating Multiple Filter Classes with Loops
// SCSS loops can be incredibly powerful for generating a series of classes that apply varying levels of a specific filter effect, such as a range of blur or grayscale values.


// @for $i from 1 through 10 {
//   .blur-#{$i} {
//     filter: blur(#{$i}px);
//   }

//   .grayscale-#{$i * 10} {
//     filter: grayscale(#{$i * 10}%);
//   }
// }
// Custom Mixins for Complex Filter Combinations
// For more complex or commonly used combinations of filters, you can create custom mixins. This approach keeps your code DRY and makes complex filter applications more manageable.


@mixin artistic-effect($blur-radius, $saturate-level, $sepia-level) {
    filter: blur($blur-radius) saturate($saturate-level) sepia($sepia-level);
}

.element-artistic {
    @include artistic-effect(2px, 200%, 50%);
}
// Utilizing Functions for Dynamic Filter Values
// SCSS functions can calculate and return dynamic filter values based on certain conditions or inputs, offering a high degree of flexibility.


@function calculate-brightness($light-mode) {
    @if $light-mode {
        @return 120%;
    } @else {
        @return 80%;
    }
}

.element-dynamic-brightness {
    $is-light-mode: true; // Example condition
    filter: brightness(calculate-brightness($is-light-mode));
}