@use '../config/config'; // Use (need) only if this is a standalone file.
@use 'sprucecss/scss/spruce' as *;

.file-group-container {
  container: file-group-container / inline-size;
}

.file-group {
  $this: &;
  @include generate-variables($form-control, $include: ('border-width', 'border-radius'));
  align-items: center;
  border: config('border-width', $form-control) solid color('border', 'form');
  border-radius: config('border-radius', $form-control);
  display: flex;
  gap: spacer('m');
  overflow: hidden;
  padding: spacer('s');

  @container file-group-container (inline-size < 30rem) {
    flex-direction: column;
  }

  &:has([style*='background-image']) {
    #{$this}__remove {
      display: inline-flex;
    }
  }

  &__preview {
    align-items: center;
    aspect-ratio: 1;
    background-color: color('primary-lightest');
    background-position: center;
    background-size: cover;
    border-radius: config('border-radius', $form-control);
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    inline-size: 9rem;
    justify-content: center;

    @container file-group-container (inline-size < 30rem) {
      aspect-ratio: 16 / 9;
      inline-size: 100%;
    }

    &[style*='background-image'] #{$this}__icon {
      display: none;
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: spacer('xxs');
    inline-size: 100%;

    > * {
      margin-block: 0;
    }
  }

  &__icon {
    --size: 2rem;
    block-size: var(--size);
    color: color('primary');
    inline-size: var(--size);
  }

  &__title {
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-weight: 700;
  }

  &__meta {
    list-style: none;
    padding-inline-start: 0;

    > * + * {
      margin-block-start: 0;
    }
  }

  &__action {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
    margin-block-start: spacer('xs');
  }

  &__remove {
    display: none;
  }

  &__input {
    flex: 1;
  }
}

<div class="form-group">
    <label class="form-label" for="product-image">Product Image</label>
    <div class="file-group-container">
        <div class="file-group">
            <div class="file-group__preview">
                <svg aria-hidden='true' focusable='false' fill='none' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='file-group__icon'>
                    <rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
                    <circle cx='8.5' cy='8.5' r='1.5'></circle>
                    <polyline points='21 15 16 10 5 21'></polyline>
                </svg>
            </div>
            <div class="file-group__body">
                <p class="file-group__title">Upload a product image</p>
                <ul class="file-group__meta">
                    <li>Accepted formats: JPG, PNG</li>
                    <li>Maximum upload limit: 5 MB</li>
                </ul>
                <div class="file-group__action">
                    <button class="btn btn--delete btn--icon file-group__remove" aria-label="Remove file">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <line x1='18' y1='6' x2='6' y2='18'></line>
                            <line x1='6' y1='6' x2='18' y2='18'></line>
                        </svg>
                    </button>
                    <input class="form-file file-group__input" id="product-image" type="file" accept="image/png, image/jpeg" />
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="form-label" for="product-image-has-image">Product Image (has image)</label>
    <div class="file-group-container">
        <div class="file-group">
            <div class="file-group__preview" style="background-image: url('https://ui.sprucecss.com/img/post/gallery/kyle-johnson-Aq7id0ZjEW4-unsplash.jpg')">
                <svg aria-hidden='true' focusable='false' fill='none' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='file-group__icon'>
                    <rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
                    <circle cx='8.5' cy='8.5' r='1.5'></circle>
                    <polyline points='21 15 16 10 5 21'></polyline>
                </svg>
            </div>
            <div class="file-group__body">
                <p class="file-group__title">Upload a product image</p>
                <ul class="file-group__meta">
                    <li>Accepted formats: JPG, PNG</li>
                    <li>Maximum upload limit: 5 MB</li>
                </ul>
                <div class="file-group__action">
                    <button class="btn btn--delete btn--icon file-group__remove" aria-label="Remove file">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <line x1='18' y1='6' x2='6' y2='18'></line>
                            <line x1='6' y1='6' x2='18' y2='18'></line>
                        </svg>
                    </button>
                    <input class="form-file file-group__input" id="product-image-has-image" type="file" accept="image/png, image/jpeg" />
                </div>
            </div>
        </div>
    </div>
</div>