////
///
/// 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%);
}

}