.avatarChanger {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  margin: 0.5rem 0;
}

.vertical {
  flex-direction: column;
}

.avatarChanger .currentAvatar,
.avatarChanger svg {
  width: 3em;
  height: 3em;
  border-radius: 0.25rem;
}

.vertical.vertical .currentAvatar {
  display: block;
  width: 100%;
  height: inherit;
  aspect-ratio: 1/1;
}

.avatarChanger button svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.avatarChanger input[type="file"] {
  display: none;
}

.uploadButton {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 0;
  border-radius: 0.15rem;
  padding: 0.5em 1em;
  cursor: pointer;
}
