////
///
/// Surface
/// ===========================================================================
///
/// Surface/card-like 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-surface {
        background-color: var(--ss-a-surface-bg, var(--ss-color-background));
        color: var(--ss-a-surface-color, var(--ss-color-foreground));
    }

    .ss-a-surface-muted {
        --ss-a-surface-bg: var(--ss-color-muted);
    }

    .ss-a-surface-primary {
        --ss-a-surface-bg: var(--ss-color-primary);
        --ss-a-surface-color: var(--ss-color-white);
    }

    .ss-a-surface-inverted {
        --ss-a-surface-bg: var(--ss-color-foreground);
        --ss-a-surface-color: var(--ss-color-background);
    }

    // Interactive surfaces
    .ss-a-surface-interactive {
        cursor: pointer;
        transition: background-color var(--ss-transition-default);

        &:hover {
            background-color: var(--ss-color-muted);
        }
    }
}