.app-avatar {
  --avatar-bg-a: #e9f3f7;
  --avatar-bg-b: #c8e1eb;
  --avatar-border: #9fc5d4;
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--avatar-border) 82%, #07344d);
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.82) 0 13%, transparent 39%),
    linear-gradient(145deg, var(--avatar-bg-a), var(--avatar-bg-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  isolation: isolate;
}

.app-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.24) 46% 53%, transparent 54%),
    radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--avatar-border) 30%, transparent) 0 12%, transparent 13%);
  pointer-events: none;
}

.app-avatar > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 91%;
  height: 91%;
  object-fit: contain;
}

.app-avatar--xs {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.app-avatar--sm {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.app-avatar--lg {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

.app-avatar--xl {
  width: 68px;
  height: 68px;
  border-radius: 21px;
}

.app-avatar[data-avatar-background="bg-01"] { --avatar-bg-a: #e8f4f8; --avatar-bg-b: #b9dce8; --avatar-border: #72afc4; }
.app-avatar[data-avatar-background="bg-02"] { --avatar-bg-a: #ffe9ed; --avatar-bg-b: #f8bbc8; --avatar-border: #dd6d86; }
.app-avatar[data-avatar-background="bg-03"] { --avatar-bg-a: #e9edf8; --avatar-bg-b: #becbea; --avatar-border: #7389be; }
.app-avatar[data-avatar-background="bg-04"] { --avatar-bg-a: #e7f4ea; --avatar-bg-b: #bcdcbf; --avatar-border: #6da878; }
.app-avatar[data-avatar-background="bg-05"] { --avatar-bg-a: #fff1df; --avatar-bg-b: #f5cca0; --avatar-border: #cf9558; }
.app-avatar[data-avatar-background="bg-06"] { --avatar-bg-a: #eee9f9; --avatar-bg-b: #cfc1ec; --avatar-border: #8b75bd; }
.app-avatar[data-avatar-background="bg-07"] { --avatar-bg-a: #e4f4f2; --avatar-bg-b: #acd9d3; --avatar-border: #5ba69d; }
.app-avatar[data-avatar-background="bg-08"] { --avatar-bg-a: #f8e8f2; --avatar-bg-b: #e8bdd5; --avatar-border: #bd739b; }
.app-avatar[data-avatar-background="bg-09"] { --avatar-bg-a: #f8f0d9; --avatar-bg-b: #e7d393; --avatar-border: #b79b43; }
.app-avatar[data-avatar-background="bg-10"] { --avatar-bg-a: #e8eef2; --avatar-bg-b: #bbcbd5; --avatar-border: #708c9d; }
.app-avatar[data-avatar-background="bg-11"] { --avatar-bg-a: #fbe9e3; --avatar-bg-b: #efb9a7; --avatar-border: #c8755d; }
.app-avatar[data-avatar-background="bg-12"] { --avatar-bg-a: #e5f2fb; --avatar-bg-b: #afd4ec; --avatar-border: #5f9dc4; }
.app-avatar[data-avatar-background="bg-13"] { --avatar-bg-a: #eff4dc; --avatar-bg-b: #cbd99d; --avatar-border: #8fa252; }
.app-avatar[data-avatar-background="bg-14"] { --avatar-bg-a: #f4e8e5; --avatar-bg-b: #dcbcb4; --avatar-border: #a8786d; }
.app-avatar[data-avatar-background="bg-15"] { --avatar-bg-a: #e5edf6; --avatar-bg-b: #b4c9df; --avatar-border: #6587aa; }
.app-avatar[data-avatar-background="bg-16"] { --avatar-bg-a: #fcecdf; --avatar-bg-b: #efc099; --avatar-border: #c47d47; }
.app-avatar[data-avatar-background="bg-17"] { --avatar-bg-a: #e8f5ef; --avatar-bg-b: #b6dec9; --avatar-border: #68a888; }
.app-avatar[data-avatar-background="bg-18"] { --avatar-bg-a: #f0e7f5; --avatar-bg-b: #d4b9df; --avatar-border: #9370a3; }
.app-avatar[data-avatar-background="bg-19"] { --avatar-bg-a: #e3f4f7; --avatar-bg-b: #a9d8df; --avatar-border: #4f9ba7; }
.app-avatar[data-avatar-background="bg-20"] { --avatar-bg-a: #fae9e9; --avatar-bg-b: #e9b6b6; --avatar-border: #bd6868; }
.app-avatar[data-avatar-background="bg-21"] { --avatar-bg-a: #eef0e5; --avatar-bg-b: #cbd0ae; --avatar-border: #8b9362; }
.app-avatar[data-avatar-background="bg-22"] { --avatar-bg-a: #e6eef9; --avatar-bg-b: #b5c9e8; --avatar-border: #6686ba; }
.app-avatar[data-avatar-background="bg-23"] { --avatar-bg-a: #f8e8ee; --avatar-bg-b: #e5b8c8; --avatar-border: #b86b87; }
.app-avatar[data-avatar-background="bg-24"] { --avatar-bg-a: #e6f2e8; --avatar-bg-b: #b2d1b7; --avatar-border: #62966a; }
.app-avatar[data-avatar-background="bg-25"] { --avatar-bg-a: #f7eddf; --avatar-bg-b: #e2c5a2; --avatar-border: #ac7f51; }
.app-avatar[data-avatar-background="bg-26"] { --avatar-bg-a: #ece8f3; --avatar-bg-b: #c6bad8; --avatar-border: #8170a0; }
.app-avatar[data-avatar-background="bg-27"] { --avatar-bg-a: #e4f3ee; --avatar-bg-b: #a9d5c7; --avatar-border: #559a84; }
.app-avatar[data-avatar-background="bg-28"] { --avatar-bg-a: #f9e8e1; --avatar-bg-b: #e9b9a8; --avatar-border: #ba7058; }
.app-avatar[data-avatar-background="bg-29"] { --avatar-bg-a: #e5f0f4; --avatar-bg-b: #aecdd8; --avatar-border: #5f94a6; }
.app-avatar[data-avatar-background="bg-30"] { --avatar-bg-a: #f4e9f0; --avatar-bg-b: #d9b9cc; --avatar-border: #9f708b; }

@media (max-width: 720px) {
  .app-avatar--lg {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}