.clinic-logo-frame {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--plum);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.clinic-logo-frame > * {
  grid-area: 1 / 1;
}

.clinic-logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.clinic-logo-frame-large {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  font-size: 12px;
}

.clinic-logo-name,
.clinic-volume-row > .clinic-logo-name,
.practice-profile-card > .clinic-logo-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.clinic-logo-name > span:last-child:not(.clinic-logo-frame) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clinic-logo-admin {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 120px;
}

.clinic-logo-admin small {
  max-width: 145px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.clinic-logo-upload {
  position: relative;
  cursor: pointer;
}

.knowledge-source-card .knowledge-clinic-logo {
  width: 34px;
  height: 34px;
}

.practice-profile-card .clinic-logo-frame,
.practice-profile-admin-row .clinic-logo-frame {
  color: var(--plum);
  font-size: 10px;
}

.practice-profile-card .clinic-logo-name > span:last-child,
.practice-profile-admin-row .clinic-logo-name > span:last-child {
  color: inherit;
  white-space: normal;
}

html[data-theme="dark"] .clinic-logo-frame {
  background: var(--surface-strong, #30252e);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .clinic-logo-frame img {
  background: #fff;
}

@media (max-width: 760px) {
  .clinic-logo-frame-large {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}