[data-ds-component=Image]{--ds-image-color-background-default:var(--semantic-color-background-secondary,#efefef);--ds-image-color-background-error:var(--semantic-color-background-danger-subtle,#fceaea);--ds-image-color-foreground-primary:var(--semantic-color-foreground-primary,#141414);--ds-image-color-foreground-secondary:var(--semantic-color-foreground-secondary,#555);--ds-image-color-foreground-error:var(--semantic-color-foreground-danger,#d9292b);--ds-image-size-xs:var(--core-spacing-size-08,32px);--ds-image-size-sm:var(--core-spacing-size-10,64px);--ds-image-size-md:var(--core-spacing-size-09,48px);--ds-image-size-lg:var(--core-spacing-size-09,48px);--ds-image-size-xl:var(--core-spacing-size-10,64px);--ds-image-size-icon:var(--core-spacing-size-08,32px);--ds-image-radius-none:0px;--ds-image-radius-sm:var(--core-shape-radius-small,4px);--ds-image-radius-md:var(--core-shape-radius-medium,8px);--ds-image-radius-lg:var(--core-shape-radius-large,16px);--ds-image-radius-full:var(--core-shape-radius-full,9999px);--ds-image-typography-error-font-size:var(--semantic-typography-body-04,12px);--ds-box-model-width:auto;--ds-box-model-height:auto}
[data-ds-component=Image]{block-size:var(--ds-box-model-height);inline-size:var(--ds-box-model-width);display:inline-block;position:relative;overflow:hidden}[data-ds-component=Image].xs{block-size:var(--ds-image-size-xs);inline-size:var(--ds-image-size-xs)}[data-ds-component=Image].sm{block-size:var(--ds-image-size-sm);inline-size:var(--ds-image-size-sm)}[data-ds-component=Image].md{block-size:var(--ds-image-size-md);inline-size:var(--ds-image-size-md)}[data-ds-component=Image].lg{block-size:var(--ds-image-size-lg);inline-size:var(--ds-image-size-lg)}[data-ds-component=Image].xl{block-size:var(--ds-image-size-xl);inline-size:var(--ds-image-size-xl)}[data-ds-component=Image].full{inline-size:100%}[data-ds-component=Image].radius-none{border-radius:var(--ds-image-radius-none)}[data-ds-component=Image].radius-sm{border-radius:var(--ds-image-radius-sm)}[data-ds-component=Image].radius-md{border-radius:var(--ds-image-radius-md)}[data-ds-component=Image].radius-lg{border-radius:var(--ds-image-radius-lg)}[data-ds-component=Image].radius-full{border-radius:var(--ds-image-radius-full)}[data-ds-component=Image].aspectRatio .image{block-size:100%;inline-size:100%}[data-ds-component=Image] .image{block-size:auto;max-inline-size:100%;transition:opacity .2s;display:block}[data-ds-component=Image] .image.loading{opacity:.6}[data-ds-component=Image] .image:not(.error)~.errorState,[data-ds-component=Image] .image:not(.loading)~.placeholder{display:none}[data-ds-component=Image] .placeholder{background:var(--ds-image-color-background-default);color:var(--ds-image-color-foreground-secondary);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}[data-ds-component=Image] .placeholderIcon{opacity:.5;block-size:var(--ds-image-size-icon);inline-size:var(--ds-image-size-icon);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 8 5 5-5 5M21 13H3'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 8 5 5-5 5M21 13H3'/%3E%3C/svg%3E") 50%/contain no-repeat}[data-ds-component=Image] .errorState{background:var(--ds-image-color-background-error);color:var(--ds-image-color-foreground-error);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1rem;display:flex;position:absolute;inset:0}[data-ds-component=Image] .errorIcon{opacity:.7;block-size:var(--ds-image-size-icon);inline-size:var(--ds-image-size-icon);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E") 50%/contain no-repeat}[data-ds-component=Image] .errorText{opacity:.8;font-size:var(--ds-image-typography-error-font-size)}