[CSS] Using box-shadow as background colors

box-shadow works better than background-color on printable version:

 

    .input__control {
      display: grid;
      place-content: center;
      width: 1em;
      height: 1em;
      border: 0.1em solid var(--color-default, color("default"));
    }

      .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%;
      }