/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.image-preview__label {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgb(0 0 0 / 60%);
}

.image-preview__img {
  /* Capped in vh as well as px so a tall portrait photo cannot push the Cancel/Confirm footer
     below the fold on a short viewport — `contain` keeps the whole frame visible rather than
     cropping it, since the point of the preview is to check the picture before it goes live. */
  max-width: 100%;
  max-height: min(260px, 40vh);
  object-fit: contain;
  border-radius: 10px;
  background: rgb(0 0 0 / 4%);
  border: 1px solid rgb(0 0 0 / 12%);
}

.image-preview__name {
  font-size: 12px;
  color: rgb(0 0 0 / 60%);
  overflow-wrap: anywhere;
  text-align: center;
}

.image-preview__error {
  margin: 12px 0 4px;
  font-size: 13px;
  color: #b3261e;
}