.image-uploader__container {
  display: grid;
  width: max-content;
  grid-template-columns: auto auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'preview controls'
    'preview requirements';
}

.image-uploader__preview {
  grid-area: preview;
  margin-right: var(--boxel-sp-lg);
}

.image-uploader__controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  gap: var(--boxel-sp-xxs);
}

.image-uploader__button {
  flex-shrink: 0;
  width: min-content;
  min-width: 0;
  margin: var(--boxel-sp-xs) 0;
}

/* TODO: replace this with a boxel button size variant in a future PR */
.image-uploader__button--icon {
  --icon-color: currentColor;

  padding: var(--boxel-sp-xxxs);
}

.image-uploader__error-message {
  grid-area: requirements;
  font: var(--boxel-font-xs);
  max-width: 14rem;
  color: var(--boxel-error-100);
  letter-spacing: var(--boxel-lsp-lg);
}

.image-uploader__requirements {
  grid-area: requirements;
  font: var(--boxel-font-xs);
  max-width: 14rem;
  color: var(--boxel-purple-400);
  letter-spacing: var(--boxel-lsp-lg);
}