@salla.sa/twilight-components
Version:
Salla Web Component
38 lines (34 loc) • 840 B
CSS
@charset "UTF-8";
/*
* Float the host element itself so the embed participates in surrounding
* block-flow layout. The `align` prop is reflected to the host attribute,
* so we target it directly — avoiding `:host(:has(...))`, which Stencil's
* scoped CSS transform mishandles and which would otherwise leak styles
* onto the inner card div.
*/
:host {
display: inline-block;
vertical-align: top;
max-width: 12rem;
}
:host([align=left]) {
float: inline-start;
margin-block-end: 1em;
margin-inline-end: 1em;
shape-outside: margin-box;
}
:host([align=right]) {
float: inline-end;
margin-block-end: 1em;
margin-inline-start: 1em;
shape-outside: margin-box;
}
:host([align=center]) {
display: block;
clear: both;
margin-block: 1em;
margin-inline: auto;
}
.s-product-card-embed-card {
display: block;
}