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

@layer ss.appearance {

.ss-a-elevation-0 {
    box-shadow: var(--ss-a-shadow-none);
}
.ss-a-elevation-1 {
    box-shadow: var(--ss-a-shadow-sm);
}
.ss-a-elevation-2 {
    box-shadow: var(--ss-a-shadow-default);
}
.ss-a-elevation-3 {
    box-shadow: var(--ss-a-shadow-md);
}
.ss-a-elevation-4 {
    box-shadow: var(--ss-a-shadow-lg);
}
.ss-a-elevation-5 {
    box-shadow: var(--ss-a-shadow-xl);
}
.ss-a-elevation-6 {
    box-shadow: var(--ss-a-shadow-2xl);
}

.ss-a-shadow-none {
    box-shadow: var(--ss-a-shadow-none);
}
.ss-a-shadow-sm {
    box-shadow: var(--ss-a-shadow-sm);
}
.ss-a-shadow {
    box-shadow: var(--ss-a-shadow-default);
}
.ss-a-shadow-md {
    box-shadow: var(--ss-a-shadow-md);
}
.ss-a-shadow-lg {
    box-shadow: var(--ss-a-shadow-lg);
}
.ss-a-shadow-xl {
    box-shadow: var(--ss-a-shadow-xl);
}
.ss-a-shadow-2xl {
    box-shadow: var(--ss-a-shadow-2xl);
}
.ss-a-shadow-inner {
    box-shadow: var(--ss-a-shadow-inner);
}

// Interactive elevation
.ss-a-elevation-interactive {
    transition: box-shadow var(--ss-transition-default);

    &:hover {
        box-shadow: var(--ss-a-shadow-lg);
    }
}

}