.radio,
.checkbox {
  /* Общие стили */
  --checkerCursor: pointer;
  --checkerDisplay: flex;
  --checkerPosition: relative;
  --checkerUserSelect: none;
  --checkerPointerEvents: none;
  --checkerBg: var(--deUIColorWhite);
  --checkerSize: 3rem;
  --checkerBorderColor: var(--checkerHoverBorderColor);
  --checkerBorderRadius: 1rem;
  --checkerBorderWidth: 1px;
  --checkerBorderStyle: solid;
  --checkerTransition: .2s;

  /* Элемент иконки */
  --checkerIconOpacity: 0;
  --checkerIconFilter: none;
  --checkerIconTransform: none;
  --checkerIconTransition: .2s;
  --checkerIconWidth: 100%;
  --checkerIconHeight: 100%;
  --checkerIconSize: 75%;
  --checkerIconBorderRadius: 0;
  --checkerIconBg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBmaWxsPSJ0cmFuc3BhcmVudCIgZD0iTTIuNjY2NSA4TDYuNjY2NSAxMkwxMy4zMzMyIDQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiDQogICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4NCg==") no-repeat 50% 50% / var(--checkerIconSize) var(--checkerIconSize);

  /* Элемент подписи */
  --checkerLabelDisplay: block;
  --checkerLabelPadding: 0 0 0 .75em;
  --checkerLabelColor: currentColor;


  /* Модификация *--isHover или :hover */
  --checkerHoverBg: var(--deUIColorWhite);
  --checkerHoverBorderColor: var(--deUIColorDenim);
  --checkerHoverIconOpacity: 0;
  --checkerHoverIconFilter: none;
  --checkerHoverIconTransform: none;

  /* Модификация *--isInvalid иди .isInvalid */
  --checkerInvalidBg: var(--deUIColorWispPink);
  --checkerInvalidBorderColor: var(--deUIColorRedRibbon);
  --checkerInvalidIconTransform: none;
  --checkerInvalidIconOpacity: 0;
  --checkerInvalidIconFilter: none;
  --checkerInvalidLabelColor: currentColor;

  /* Модификация *--isChecked или .isChecked или :checked */
  --checkerCheckedBg: var(--deUIColorDenim);
  --checkerCheckedBorderColor: var(--deUIColorDenim);
  --checkerCheckedIconTransform: none;
  --checkerCheckedIconFilter: brightness(0) invert(1);
  --checkerCheckedIconOpacity: 1;

  /* Модификация *--isDisabled или .isDisabled или :disabled или [disabled] */
  --checkerDisabledIconFilter: invert(1) grayscale(100%) opacity(15%);
  --checkerDisabledIconTransform: none;
  --checkerDisabledCursor: not-allowed;
  --checkerDisabledBg: var(--deUIColorAthensGray);
  --checkerDisabledBorderColor: var(--deUIColorBlueHaze);
  --checkerDisabledIconOpacity: 0;
  --checkerDisabledLabelColor: var(--deUIColorNepal);

  /* Для состояния focus-visible */
  --checkerFocusVisibleOutline: 2px solid var(--deUIColorDenim);
  --checkerFocusVisibleOutlineOffset: 2px;
}

/* Кастомизация под радиобаттоны */
.radio {
  --checkerIconTransform: scale(0) translateZ(0);
  --checkerCheckedIconTransform: scale(1) translateZ(0);
  --checkerHoverIconTransform: var(--checkerCheckedIconTransform);
  --checkerCheckedIconFilter: none;
  --checkerBorderRadius: 100%;
  --checkerIconBorderRadius: 100%;
  --checkerHoverIconFilter: invert(1);
  --checkerIconBg: var(--deUIColorWhite);
  --checkerIconWidth: 40%;
  --checkerIconHeight: 40%;
}