@layer components {
  .avatar {
    --avatar-border-radius: 50%;
    --avatar-size-default: 10ch;
    --btn-border-size: 0;

    aspect-ratio: 1;
    block-size: var(--avatar-size, var(--avatar-size-default));
    border-radius: var(--avatar-border-radius);
    display: grid;
    flex-shrink: 0;
    inline-size: var(--avatar-size, var(--avatar-size-default));
    margin: 0;
    place-items: center;

    :is(img, .icon) {
      aspect-ratio: 1;
      block-size: 100%;
      border-radius: var(--avatar-border-radius);
      grid-area: 1/1;
      inline-size: 100%;
      max-inline-size: 100%;
      object-fit: cover;
    }
  }

  .avatar__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);

    .avatar {
      --avatar-size-default: 20ch;
    }

    #file {
      width: 100%;
    }

    @media (min-width: 640px) {
      .avatar {
        --avatar-size-default: 10ch;
      }

      #file {
        width: 50%;
      }
    }
  }

  .avatar__preview {
    background: var(--color-ink-lighter);
    background-image: url("/assets/camera-927323b8.svg");
    background-size: calc(var(--avatar-size-default) / 2.5);
    background-repeat: no-repeat;
    background-position: center;
  }
}