@layer components.dynamicImage{:host{border-radius:var(--dynamic-image-border-radius,var(--border-radius,4px));display:inline-block;position:relative;overflow:hidden}:host([size=small]){width:60px;height:60px}:host([size=medium]){width:200px;height:200px}:host([size=large]){width:100%;height:auto}img{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}img[src=""]{display:none}.placeholder{background-color:var(--color-surface-variant,#e0e0e0);width:100%;height:100%;color:var(--color-on-surface-variant,#666);justify-content:center;align-items:center;display:none}:host(:not([file-id])) .placeholder,:host([file-id=""]) .placeholder,:host(.error) .placeholder{display:flex}:host(:not([file-id])) img,:host([file-id=""]) img,:host(.error) img{display:none}.delete-btn{z-index:10;cursor:pointer;display:none;position:absolute;top:8px;right:8px}:host([deletable]) .delete-btn{display:inline-flex}}