/* Somebody's face, at three sizes.

   The marks are gradients rather than image files: eight of them, distinct at forty
   pixels, and swappable for drawn artwork later without anything stored changing. Each
   one is tinted toward the partner's accent where a theme sets one, so a wall of them
   looks like that partner's app rather than like a stock set. */

.wx-avatar {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: var(--wx-surface, #1b1b1b);
    line-height: 0;
    user-select: none;
}

.wx-avatar.is-sm { width: 32px; height: 32px; }
.wx-avatar.is-md { width: 48px; height: 48px; }
.wx-avatar.is-lg { width: 96px; height: 96px; }

.wx-avatar-photo,
.wx-avatar-mark {
    display: block;
    width: 100%;
    height: 100%;
}

.wx-avatar-photo {
    object-fit: cover;
}

/* Somebody who has not set a photograph gets the head off our own mark, over whichever
   colour their preset is. The preset used to be the whole picture - eight gradients and
   a monogram - which said which person but never said "person".

   The head is cropped from winwrx-mark.png (see the note beside it) and sits centred and
   a little proud of the bottom, the way a face sits in a portrait rather than floating in
   the middle of the circle. */
.wx-avatar-mark {
    background-image: url("../images/winwrx-head.png");
    background-repeat: no-repeat;
    background-position: center 58%;
    background-size: 62%;
}

/* The letters. A badge on the mark rather than centred on it, so they sit in the same
   place whether or not there is a photograph behind them, and never obscure a face. */
.wx-avatar-initials {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45%;
    height: 45%;
    padding: 0 3px;
    border-radius: 999px 0 999px 0;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-family: var(--wx-font-data, inherit);
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* A member. The ring is the partner's signal colour so a member reads as one of that
   partner's, not as a generic gold star. Box-shadow rather than border: the circle
   clips its own overflow, and a border would eat into a photograph. */
.wx-avatar.is-member {
    box-shadow: 0 0 0 2px var(--wx-signal, #e5841e);
}

.wx-avatar.is-lg.is-member { box-shadow: 0 0 0 3px var(--wx-signal, #e5841e); }

/* A patron. The same ring, in the patron colour - a distinct mark for the tier that
   costs more and gives the same, which is the whole of what it sells. Overridable per
   partner through --wx-patron like every other token. */
.wx-avatar.is-patron { box-shadow: 0 0 0 2px var(--wx-patron, #8b5cf6); }
.wx-avatar.is-lg.is-patron { box-shadow: 0 0 0 3px var(--wx-patron, #8b5cf6); }

/* The mark in the corner - see BadgeCorner. Its wrapper is position: relative; the
   badge sits on the ring's bottom-left, on its own ground so it stands off a photo.
   Left because the initials are bottom-right, and a mark over the letters hid them. */
.wx-badge-wrap { position: relative; display: inline-flex; flex: none; }

.wx-badge-corner {
    position: absolute;
    left: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wx-signal, #e5841e);
    color: var(--wx-signal-ink, #111);
    font-size: 8px;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--wx-surface, #1b1b1b);
}

.wx-badge-corner.is-patron { background: var(--wx-patron, #8b5cf6); color: #fff; }

/* ---------- the marks ---------- */

.wx-avatar-mark[data-preset="ember"]  { background: linear-gradient(135deg, #7a2f10, #d4652a 55%, #f0a35e); }
.wx-avatar-mark[data-preset="cobalt"] { background: linear-gradient(135deg, #12305e, #2b62b8 55%, #6ea3e8); }
.wx-avatar-mark[data-preset="moss"]   { background: linear-gradient(135deg, #1d3a22, #3d7a43 55%, #7fb774); }
.wx-avatar-mark[data-preset="plum"]   { background: linear-gradient(135deg, #3d1740, #7a3080 55%, #b471bd); }
.wx-avatar-mark[data-preset="slate"]  { background: linear-gradient(135deg, #23282e, #4a545f 55%, #8b98a6); }
.wx-avatar-mark[data-preset="sand"]   { background: linear-gradient(135deg, #5c4a22, #a58540 55%, #dcc07f); }
.wx-avatar-mark[data-preset="coral"]  { background: linear-gradient(135deg, #6b1f2e, #c2445a 55%, #ef8a9b); }
.wx-avatar-mark[data-preset="mint"]   { background: linear-gradient(135deg, #10403c, #2b7d74 55%, #6cc0b4); }

/* ---------- picking one ---------- */

/* One row that scrolls, not a grid that wraps.
   
   A wrapping grid grows downwards, which on the storefront profile pushed the form off
   the screen and on a phone turns eight marks into three rows. A row keeps the panel one
   height whatever it holds, and the marks that do not fit are a swipe away. */
.wx-avatar-pick {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

/* Without this the marks are squeezed to fit rather than overflowing, and the scroll
   never happens. */
.wx-avatar-opt { flex: 0 0 auto; scroll-snap-align: start; }

/* Thin, and only where a pointer can use it. Left visible rather than hidden: a row that
   scrolls with no sign that it scrolls is a row that looks like it has four marks. */
.wx-avatar-pick::-webkit-scrollbar { height: 6px; }
.wx-avatar-pick::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--wx-line, #2c2c2c);
}

/* The whole tile is the target. A radio dot is a 20px hit area on a phone. */
.wx-avatar-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.wx-avatar-opt.is-on {
    border-color: var(--wx-signal, #d4af37);
}