.profile__info {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.profile__info__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile__info__username {
  align-items: center;
  display: flex;
  font-size: 1.5rem;
  gap: 0.5rem;
}
.pw-avatar.can-change {
  cursor: pointer !important;

  position: relative; /*anchor for absolute ::before & ::after*/

  &::before {
    content: "click to change";
    z-index: 1;
    position: absolute;
    bottom: 10px;

    text-align: center;

    color: var(--oc-gray-7);
    font: bold 0.75rem sans-serif;
    text-shadow: 1px 1px 2px #000;
  }

  &:hover::after {
    content: "";
    position: absolute;
    inset: 20px;

    background: var(--primary-9);
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 7C5.34315 7 4 8.34315 4 10C4 11.6569 5.34315 13 7 13C8.65685 13 10 11.6569 10 10C10 8.34315 8.65685 7 7 7ZM6 10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10Z' fill='currentColor' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34315 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM21 5H3C2.44772 5 2 5.44772 2 6V18C2 18.5523 2.44772 19 3 19H7.31374L14.1924 12.1214C15.364 10.9498 17.2635 10.9498 18.435 12.1214L22 15.6863V6C22 5.44772 21.5523 5 21 5ZM21 19H10.1422L15.6066 13.5356C15.9971 13.145 16.6303 13.145 17.0208 13.5356L21.907 18.4217C21.7479 18.7633 21.4016 19 21 19Z' fill='currentColor' /%3E%3C/svg%3E");
    mask-size: cover;
    mix-blend-mode: overlay;
  }
  &:hover>* {filter: brightness(0.5);}
}

.profile__info__stat {
  color: var(--oc-gray-6);
}

.profile__info__stat__value {
  color: var(--oc-gray-9);
}

.profile__thread__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile__thread {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
}

.profile__thread__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.profile__thread__title {
  font-size: 1.125rem;
}

.profile__thread__date {
  color: var(--oc-gray-6);
  font-size: 0.875rem;
}

.profile__thread:not(:last-of-type) {
  border-bottom: 1px solid var(--oc-gray-4);
}

@media screen and (max-width: 768px) {
  .profile__info {
    align-items: start;
    flex-direction: column;
  }
}