form--checkbox-radio.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Checkbox and radio input elements.
 */

/**
 * Form item modifiers.
 */

.form-type--boolean {
  margin-inline-start: var(--input--label-spacing);
  line-height: var(--space-l);
}

/**
 * Radio and checkbox items that are the child of a form item.
 */

.form-type--boolean .form-boolean {
  position: relative;
  inset-block-start: calc(var(--space-l) / 2);
  float: left; /* LTR */
  margin-inline-start: calc(var(--input--label-spacing) * -1);
  transform: translateY(-50%);

  [dir="rtl"] 
}

.form-type--boolean.form-item--no-label {
  margin-inline-start: 0;
}

.form-type--boolean.form-item--no-label .form-boolean {
  position: static;
  float: none;
  margin-inline: 0;
  transform: none;
}

/**
 * When form items are nested in radios or checkboxes group, reduce the default
 * space between them.
 */

.form-boolean-group .form-type--boolean {
  margin-block: 0.4em;
}

/**
 * Input appearance.
 */

.form-boolean {
  display: inline-block;
  box-sizing: border-box;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: text-bottom;
  border: 1px solid var(--input-border-color);
  border-radius: 2px;
  background: var(--input-bg-color) no-repeat 50% 50%;
  background-size: 100% 100%;
  box-shadow: 0 0 0 4px transparent;
  appearance: none;

  &:active,
  &:hover {
    border-color: var(--input-fg-color);
    box-shadow: inset 0 0 0 1px var(--input-fg-color);
  }

  &:focus:active,
  &:focus:hover {
    box-shadow:
      0 0 0 2px var(--color-white),
      0 0 0 5px var(--color-focus),
      inset 0 0 0 1px var(--input-fg-color);
  }
}

@media (forced-colors: active) {
  .form-boolean {
    appearance: auto;
  }
}

.form-boolean--type-radio {
  width: 1.1875rem;
  height: 1.1875rem;
  border-radius: 1.1875rem;

  &:checked {
    border-color: var(--input--focus-border-color);
    background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
    box-shadow: inset 0 0 0 1px var(--input--focus-border-color);

    &:focus {
      box-shadow:
        0 0 0 2px var(--color-white),
        0 0 0 5px var(--color-focus),
        inset 0 0 0 1px var(--input--focus-border-color);

      &:active,
      &:hover {
        box-shadow:
          0 0 0 2px var(--color-white),
          0 0 0 5px var(--color-focus),
          inset 0 0 0 1px var(--input-fg-color);
      }
    }
    &:active,
    &:hover {
      border-color: var(--input-fg-color);
      background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
      box-shadow: inset 0 0 0 1px var(--input-fg-color);
    }
  }
}

.form-boolean--type-checkbox:checked {
  border-color: var(--input--focus-border-color);
  background-color: var(--input--focus-border-color);
  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");

  &:active,
  &:hover {
    border-color: var(--input-fg-color);
    background-color: var(--input-fg-color);
  }
}

/**
 * Error states.
 */

.form-boolean.error {
  border-color: var(--input--error-border-color);
  background-color: var(--input-bg-color);
  box-shadow: inset 0 0 0 1px var(--input--error-border-color);
  &:active,
  &:hover {
    box-shadow: inset 0 0 0 1px var(--input--error-border-color);
  }
  &:focus,
  &:focus:active,
  &:focus:hover {
    box-shadow:
      0 0 0 2px var(--color-white),
      0 0 0 5px var(--color-focus),
      inset 0 0 0 1px var(--input--error-border-color);
  }
  &:checked:active,
  &:checked:hover {
    border-color: var(--input--error-border-color);
    background-color: var(--input-bg-color);
  }
}

.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
  background-color: var(--input--error-border-color);
}

.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
  background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3e%3c/svg%3e");
}

.form-boolean--type-radio.error:checked:focus {
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 5px var(--color-focus),
    inset 0 0 0 1px var(--input--error-border-color);
}

/**
 * Disabled states.
 */

.form-boolean[disabled],
.form-boolean[disabled]:hover,
.form-boolean[disabled].error,
.form-boolean[disabled].error:hover,
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
  border-color: var(--input--disabled-border-color);
  background-color: var(--input--disabled-bg-color);
  background-image: none;
  box-shadow: none;
}

.form-boolean--type-checkbox[disabled]:checked {
  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
}

.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
  background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3e%3c/svg%3e");
}