[CSS] Using transform: scale(0) for hiding element

For a radio button control, when hide selected status, we can use:

      .input__control::before {
          content: "";
          width: 0.5em;
          height: 0.5em;
          // box-shadow works better than background-color on printable version
          box-shadow: inset 1em 1em var(--color-primary, color("primary"));
          border-radius: 50%;
          // using as display none
          transform: scale(0);
          transition: 180ms transform ease-in-out;
      }

      input:checked + .input__control::before {
        transform: scale(1);
      }

It is easy to apply animation to it as well.