@layer components {
  .file-upload--dragging {
    border-radius: 0.5em;
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }

  .file-upload__figure,
  .file-upload__preview {
    align-items: center;
    aspect-ratio: 1;
    border-radius: var(--input-border-radius, 0.25em);
    container-type: inline-size;
    display: flex;
    justify-content: center;
    margin: 0;
    position: relative;

    > img {
      block-size: 100%;
      border-radius: 0.33rem;
      inline-size: 100%;
      object-fit: cover;
    }

    progress {
      position: absolute;
      inset: calc(50% - 10px) 10px auto 10px;
      max-inline-size: calc(100cqi - 20px);
      z-index: 1;
    }
  }

  .file-upload__preview {
    > img { opacity: 0.5; }
  }

  .file-upload__label {
    display: none;
  }
}