:root {
  --color: rebeccapurple;
  --disabled: #959495;
}

.checkbox {
  display: grid;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  grid-gap: 0.5em;
  font-size: 12px;
  color: #ef5354;
  margin-top: 37px;
}
.checkbox--disabled {
  color: var(--disabled);
}

.checkbox__control {
  display: inline-grid;
  width: 15px;
  height: 15px;
  border-radius: 0.25em;
  border: 0.1em solid currentColor;
}
.checkbox__control svg {
  transition: transform 0.1s ease-in 25ms;
  transform: scale(0);
  transform-origin: bottom left;
}

.checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";
}
.checkbox__input > * {
  grid-area: checkbox;
}
.checkbox__input input {
  opacity: 0;
  width: 1em;
  height: 1em;
}
.checkbox__input input:focus + .checkbox__control {
  box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
}
.checkbox__input input:checked + .checkbox__control svg {
  transform: scale(1);
}
.checkbox__input input:disabled + .checkbox__control {
  color: var(--disabled);
}
.radio__label {
  color: #292929;
}