:not(.is-disabled) .control {
    background-color: var(--maui-color-interaction-interaction);
  }

  .four_y.is-checked:not(.is-disabled):hover .control,
  .four_y.is-indeterminate:not(.is-disabled):hover .control {
    border-color: var(--maui-color-interaction-interactionhover);
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .four_y.is-checked,
  .four_y.is-indeterminate {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y.checkbox:not([disabled]).has-focus.has-error .control::after {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
      var(--maui-effect-shadow-focus-offset-y)
      var(--maui-effect-shadow-focus-radius)
      var(--maui-effect-shadow-focus-spread) var(--maui-color-message-error);
  }

  .four_y.has-error:not(.is-disabled) label .control {
    border-color: var(--maui-checkbox-error-control-color);
  }
  .four_y.is-checked.has-error:not(.is-disabled) .control,
  .four_y.is-indeterminate.has-error:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-error-control-color);
    background-color: var(--maui-color-message-error);
  }

  .four_y.has-error:not(.is-disabled) label .label,
  .four_y.is-checked.has-error:not(.is-disabled) .label,
  .four_y.is-indeterminate.has-error:not(.is-disabled) .label {
    color: var(--maui-checkbox-error-label-color);
  }

  .four_y.checkbox.is-disabled.is-checked .control,
  .four_y.checkbox.is-disabled.is-indeterminate .control {
    background-color: var(--maui-checkbox-disabled-control-color);
    border-color: transparent;
  }

  .four_y .label {