Styling per skin

Usually, you don't need to style per skin: A global step is good enough. That being said, Loki Checkout makes it possible to apply certain styling per skin, because the root element of the Loki Checkout block (.loki-checkout) also contains a CSS class specific to the skin.

HTML snippet:

<div id="loki-checkout" class="loki-checkout scope-block loki space-y-6 relative skin-default grid-layout-default_grid" ...>
    ...
</div>

A little example of this is to move the field label into the border of an input field:

@layer components {
    .loki-checkout.skin-onestep_demo {
        .field-type-input, .field-type-text, .field-type-select {
            label.scope-label {
                position: absolute;
                top: -15px;
                left: 6px;
                z-index: 3;
                background-color: white;
                font-size: 70%;
                padding: 4px;
                color: #555;
            }
        }
    }
}