.representation__form {
  align-items: center;
  display: flex;
  gap: var(--block-space);
  justify-content: center;
  margin: var(--block-space-double) auto var(--block-space) auto;

  & .representation__preview,
  & label {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  & .representation__preview {
    height: 100px;
    width: 100px;
  }

  & label {
    height: 40px;
    outline: 1px solid transparent;
    transition: outline-color .7s ease-out;
    width: 40px;

    &:hover {
      outline: 1px solid purple;
    }
  }

  & input[type=file] {
    display: none;
  }

  & .button_to button {
    background-color: red;
    border: 1px solid red;
    border-radius: 100%;
    padding: var(--block-space-half);

    & img {
      filter: invert(100%);
    }
  }
}

.representation__preview, .representation__default_preview {
  border-radius: 100%;
  display: inline-block;
  height: 50px;
  outline-offset: 1px;
  overflow: hidden;
  width: 50px;
  transition: outline-color .7s ease-out;
}

.representation--active {
  outline: 1px solid var(--color-border--active);
}

.representation--avatar-small-size {
  min-height: 50px;
  min-width: 50px;
}

.representation--avatar-base-size {
  min-height: 75px;
  min-width: 75px;
}

.representation--avatar-medium-size {
  min-height: 100px;
  min-width: 100px;
}

.representation--base-color {
  border: 1px solid var(--color-border);
  outline: 1px solid transparent;

  &:hover {
    outline: 1px solid purple;
  }
}

.representation--danger-color {
  background: red !important;
  border: 1px solid red;
  outline: 1px solid transparent;

  & img {
    filter: invert(100%);
  }
}

.representation--primary-color {
  border: 1px solid var(--color-border);
  outline: 1px solid var(--color-border);

  &:hover {
    outline: 1px solid purple;
  }
}

.representation--base-size {
  min-height: 150px;
  min-width: 150px;
}

.representation--half-size {
  min-height: 75px;
  min-width: 75px;
}

.representation--double-size {
  min-height: 5rem;
  min-width: 5rem;
}

.representation--icon {
  background: #fff;
  padding: 13px;
}

.avatar {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.representation--avatar-name {
  font-size: 0.7rem;
}

.representation--avatar-name--truncated {
  max-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}