/*
 * Nameplates (specs/006 US6, contracts/ui-profile-themes.md §3): a member's animated strip
 * behind their row in Meet's direct-messages list, its art on the right so the picture and
 * name on the left stay clear. Also the sample row on /account and in the shop.
 */

.nameplate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.nameplate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* The row's own content stays above its nameplate. */
.nameplate-sample {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.nameplate-sample > :not(.nameplate) {
  position: relative;
  z-index: 1;
}

.nameplate-sample__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
}