.imageInput {
  @apply grid gap-4;
  grid-template-areas:
    "image control"
    "error error";
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
}

.imageInput__rightColumn {
  @apply overflow-hidden flex flex-col gap-2 items-start;
  grid-area: control;
}

.imageInput__hint {
  @apply overflow-hidden text-ellipsis self-stretch;
  color: var(--gray-a11);
}

.imageInput__imageContainer {
  grid-area: image;
  width: 7.25rem;
  height: 7.25rem;
  border: 1px solid var(--gray-a4);
  border-radius: var(--radius-4);
  background-color: var(--gray-1);
  @apply grid;
}

.imageInput__imageContainer:hover {
  background-color: var(--gray-2);
}

.imageInput__placeholder {
  color: var(--gray-11);
  --square-icon__background-color: var(--gray-a3);
  @apply justify-self-center self-center;
}

.imageInput__imageContainer:hover .imageInput__placeholder {
  --square-icon__background-color: var(--gray-a4);
}

.imageInput__preview {
  width: 100%;
  height: 100%;
  @apply self-stretch justify-self-stretch;
  object-fit: contain;
}

.imageInput__buttonContainer {
  @apply grid grid-flow-col gap-2 items-end;
}

.imageInput__errorMessage {
  grid-area: error;
  color: var(--red-11);
}
