.entity-emblem,
.entity-logo-frame{
  --entity-emblem-image-bg-default:color-mix(in srgb, #ffffff 94%, var(--surface-2));
  --entity-emblem-image-border-default:color-mix(in srgb, var(--line) 70%, #ffffff);
  --entity-emblem-bg-default:var(--entity-emblem-image-bg-default);
  --entity-emblem-border-default:var(--entity-emblem-image-border-default);
  --entity-emblem-filter-default:none;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--entity-emblem-size, auto);
  height:var(--entity-emblem-size, auto);
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:var(--entity-emblem-padding, var(--entity-logo-frame-padding, clamp(0.25rem, 12%, 0.375rem)));
  border:0.0625rem solid var(--entity-emblem-border, var(--entity-logo-frame-border, var(--entity-emblem-border-default)));
  border-radius:var(--entity-emblem-radius, var(--entity-logo-frame-radius, 0.625rem));
  background:var(--entity-emblem-bg, var(--entity-logo-frame-bg, var(--entity-emblem-bg-default)));
  color:color-mix(in srgb, var(--text) 88%, transparent);
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  line-height:1;
  text-align:center;
}

html[data-theme="dark"] .entity-emblem,
html[data-theme="dark"] .entity-logo-frame{
  --entity-emblem-image-bg-default:color-mix(in srgb, #f4f7fb 93%, #c7d2e1 7%);
  --entity-emblem-image-border-default:color-mix(in srgb, #ffffff 62%, var(--line));
  --entity-emblem-filter-default:none;
}

.entity-emblem--has-image,
.entity-logo-frame:not(.entity-emblem--fallback){
  --entity-emblem-bg:var(--entity-emblem-image-bg-default);
  --entity-logo-frame-bg:var(--entity-emblem-image-bg-default);
  --entity-emblem-border:var(--entity-emblem-image-border-default);
  --entity-logo-frame-border:var(--entity-emblem-image-border-default);
  --entity-emblem-bg-default:var(--entity-emblem-image-bg-default);
  --entity-emblem-border-default:var(--entity-emblem-image-border-default);
}

body.app-shell .entity-emblem--has-image,
body.app-shell .entity-logo-frame:not(.entity-emblem--fallback),
body.app-shell .app-body .entity-emblem--has-image,
body.app-shell .app-body .entity-logo-frame:not(.entity-emblem--fallback){
  padding:var(--entity-emblem-padding, var(--entity-logo-frame-padding, clamp(0.25rem, 12%, 0.375rem)));
  border:0.0625rem solid var(--entity-emblem-border, var(--entity-logo-frame-border, var(--entity-emblem-border-default)));
  border-radius:var(--entity-emblem-radius, var(--entity-logo-frame-radius, 0.625rem));
  background:var(--entity-emblem-bg, var(--entity-logo-frame-bg, var(--entity-emblem-bg-default)));
  color:color-mix(in srgb, var(--text) 88%, transparent);
}

.entity-emblem--fallback{
  --entity-emblem-bg-default:color-mix(in srgb, var(--brand-blue) 12%, var(--surface-2));
  --entity-emblem-border-default:color-mix(in srgb, var(--brand-blue) 24%, var(--line));
  background:var(--entity-emblem-bg, var(--entity-logo-frame-bg, var(--entity-emblem-bg-default)));
  color:color-mix(in srgb, var(--text) 86%, var(--muted));
}

body.app-shell .entity-emblem--fallback,
body.app-shell .app-body .entity-emblem--fallback{
  background:var(--entity-emblem-bg, var(--entity-logo-frame-bg, var(--entity-emblem-bg-default)));
  border-color:var(--entity-emblem-border, var(--entity-logo-frame-border, var(--entity-emblem-border-default)));
  color:color-mix(in srgb, var(--text) 86%, var(--muted));
}

.entity-emblem__image,
.entity-logo-frame__image{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  filter:var(--entity-emblem-filter, var(--entity-logo-frame-filter, var(--entity-emblem-filter-default)));
}

.entity-emblem > img.entity-emblem__image,
.entity-logo-frame > img.entity-logo-frame__image,
body.app-shell .entity-emblem > img.entity-emblem__image,
body.app-shell .entity-logo-frame > img.entity-logo-frame__image,
body.app-shell .app-body .entity-emblem > img.entity-emblem__image,
body.app-shell .app-body .entity-logo-frame > img.entity-logo-frame__image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  filter:none;
}
