////
///
/// Filter
/// ===========================================================================
///
/// CSS filter appearance styles.
/// No layout logic.
///
/// @group Appearance
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// Blur
@use "../01-core/external" as *;

@layer ss.appearance {
    .ss-a-blur-none {
        filter: blur(0);
    }
    .ss-a-blur-sm {
        filter: blur(q(4));
    }
    .ss-a-blur {
        filter: blur(q(8));
    }
    .ss-a-blur-md {
        filter: blur(q(12));
    }
    .ss-a-blur-lg {
        filter: blur(q(16));
    }
    .ss-a-blur-xl {
        filter: blur(q(24));
    }
    .ss-a-blur-2xl {
        filter: blur(q(40));
    }
    .ss-a-blur-3xl {
        filter: blur(q(64));
    }

    // Backdrop blur
    .ss-a-backdrop-blur-none {
        backdrop-filter: blur(0);
    }
    .ss-a-backdrop-blur-sm {
        backdrop-filter: blur(q(4));
    }
    .ss-a-backdrop-blur {
        backdrop-filter: blur(q(8));
    }
    .ss-a-backdrop-blur-md {
        backdrop-filter: blur(q(12));
    }
    .ss-a-backdrop-blur-lg {
        backdrop-filter: blur(q(16));
    }
    .ss-a-backdrop-blur-xl {
        backdrop-filter: blur(q(24));
    }

    // Grayscale
    .ss-a-grayscale-0 {
        filter: grayscale(0);
    }
    .ss-a-grayscale {
        filter: grayscale(100%);
    }

    // Brightness
    .ss-a-brightness-50 {
        filter: brightness(0.5);
    }
    .ss-a-brightness-75 {
        filter: brightness(0.75);
    }
    .ss-a-brightness-90 {
        filter: brightness(0.9);
    }
    .ss-a-brightness-100 {
        filter: brightness(1);
    }
    .ss-a-brightness-105 {
        filter: brightness(1.05);
    }
    .ss-a-brightness-110 {
        filter: brightness(1.1);
    }
    .ss-a-brightness-125 {
        filter: brightness(1.25);
    }
    .ss-a-brightness-150 {
        filter: brightness(1.5);
    }

    // Invert
    .ss-a-invert-0 {
        filter: invert(0);
    }
    .ss-a-invert {
        filter: invert(100%);
    }
}