@layer components {
  .photo-field {
    --avatar-size: var(--avatar-size-large);

    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .photo-field__preview .avatar {
    --icon-size: var(--button-icon-size-large);
  }

  .photo-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .photo-field__choose {
    position: relative;
  }

  .photo-field__remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    color: var(--color-danger);
    font: var(--type-button);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .photo-field__toggle {
    position: absolute;
    inset: var(--space-0);
    opacity: var(--opacity-none);
    cursor: pointer;
  }


  .photo-field__keep-words,
  .photo-field__remove:has(.photo-field__toggle:checked) .photo-field__remove-words {
    position: absolute;
    clip-path: inset(50%);
  }

  .photo-field__remove:has(.photo-field__toggle:checked) .photo-field__keep-words {
    position: static;
    clip-path: none;
    color: var(--color-accent-ink);
  }

  .photo-field:has(.photo-field__toggle:checked) .photo-field__preview {
    filter: grayscale(1);
  }

  .photo-field__input {
    position: absolute;
    inset: var(--space-0);
    opacity: var(--opacity-none);
    cursor: pointer;
  }
}