form--checkbox-radio.pcss.css

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

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

.form-boolean {
  display: inline-block;
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  vertical-align: text-bottom;
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-xs);
  background: var(--input-bg-color) no-repeat 50% 50%;
  background-size: 100% 100%;
  appearance: none;

  &:focus {
    outline-offset: -1px;
  }

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

    .gin--dark-mode 
  }

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

  .form-type--boolean.form-item--no-label 

  @media (forced-colors: active) {
    appearance: revert;
  }
}

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

.form-radios,
.form-checkboxes {
  .form-type--boolean {
    margin-block: var(--gin-spacing-xs);
  }
}

/*
 * Radio buttons.
 */

.form-boolean--type-radio {
  &,
  &:hover,
  &:active,
  &:focus,
  &:hover:focus {
    border-color: var(--gin-border-color-form-element);
    border-radius: 50%;
    background-color: var(--gin-bg-input);
  }

  &:hover {
    box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);

    &,
    .gin--dark-mode 
  }

  &:checked:not(:disabled) {
    &,
    &:hover {
      background-color: var(--gin-bg-layer);
      box-shadow: inset 0 0 0 5px var(--gin-color-primary);
    }

    &:active,
    &:focus,
    &:hover:focus {
      border-color: var(--gin-color-focus-border);
      box-shadow:
        inset 0 0 0 5px var(--gin-color-primary),
        0 0 0 1px var(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }
  }

  &:disabled {
    &,
    &:hover {
      cursor: not-allowed;
      border-color: var(--gin-color-disabled-border);
      background: var(--gin-color-disabled-bg);
    }
  }

  &:checked:disabled {
    &,
    &:hover {
      background: var(--gin-color-disabled);
      box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
    }
  }
}

/*
 * Checkboxes.
 */
.form-boolean--type-checkbox {
  &:not(:checked) {
    .gin--dark-mode 
  }

  &:checked {
    border-color: var(--gin-color-primary);
    background-color: var(--gin-color-primary);
    background-image: url(../../images/icons/ffffff/checkmark-sm.svg);

    &:not(:disabled) {
      .gin--dark-mode 
    }

    &:hover {
      border-color: var(--gin-color-primary-hover);
      background-color: var(--gin-color-primary-hover);
    }

    &:active {
      border-color: var(--gin-color-primary-active);
      background-color: var(--gin-color-primary-active);
    }
  }

  &[disabled] {
    &,
    &:hover {
      cursor: not-allowed;
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg);

      &:checked {
        border-color: var(--gin-color-disabled-border);
        background-color: var(--gin-color-disabled-bg);
        box-shadow: none;
      }
    }
  }
}

/**
 * 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(../../images/icons/d72222/circle.svg);
}
.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(../../images/icons/82828c/checkmark.svg);
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
  background-image: url(../../images/icons/82828c/circle.svg);
}