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