@syncfusion/react-buttons/styles/check-box/material.css

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

.sf-checkbox {
  height: 1px;
  width: 1px;
  position: absolute;
  bottom: 20%;
  left: 40%;
  opacity: 0;
}
.sf-checkbox-wrapper {
  user-select: none;
  display: flex;
  align-items: center;
}
.sf-checkbox-wrapper:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-primary), 0.08);
}
.sf-checkbox-wrapper:active .sf-checkbox-ripple, .sf-checkbox-wrapper:focus .sf-checkbox-ripple {
  box-shadow: none;
}
.sf-checkbox-wrapper:active .sf-checkbox-ripple .sf-checkbox-icons, .sf-checkbox-wrapper:focus .sf-checkbox-ripple .sf-checkbox-icons {
  border-color: rgb(var(--sf-color-on-surface-variant));
}
.sf-checkbox-wrapper:has(.sf-checkbox:focus-visible) .sf-checkbox-ripple {
  box-shadow: 0 0 0 2px rgba(var(--sf-color-on-surface), 1);
}
.sf-checkbox-wrapper:has(.sf-checkbox:focus-visible) .sf-checkbox-ripple .sf-checkbox-icons {
  border-color: rgb(var(--sf-color-on-surface-variant));
}
.sf-checkbox-wrapper.sf-disabled {
  opacity: 0.38;
}
.sf-checkbox-frame-sm {
  width: var(--sf-spacing-16);
  height: var(--sf-spacing-16);
}
.sf-checkbox-frame-sm svg {
  width: var(--sf-font-size-xs);
  height: var(--sf-font-size-xs);
}
.sf-checkbox-frame-la {
  width: var(--sf-spacing-20);
  height: var(--sf-spacing-20);
}
.sf-checkbox-frame-la svg {
  width: var(--sf-font-size-sm);
  height: var(--sf-font-size-sm);
}
.sf-checkbox-frame-me {
  width: var(--sf-spacing-18);
  height: var(--sf-spacing-18);
}
.sf-checkbox-frame-me svg {
  width: var(--sf-font-size-xs);
  height: var(--sf-font-size-xs);
}
.sf-checkbox-icons {
  border: 2px solid;
  border-radius: var(--sf-radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background-color: transparent;
}
.sf-checkbox-icons:not(.sf-error):not(.sf-checkbox-checked) {
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-checkbox-checked,
.sf-checkbox-indeterminate {
  background-color: rgb(var(--sf-color-secondary));
  border-color: rgb(var(--sf-color-secondary));
  color: rgb(var(--sf-color-on-primary));
}
.sf-checkbox-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  color: rgb(var(--sf-color-on-surface));
}
.sf-checkbox-label.sf-right {
  flex-direction: row-reverse;
}
.sf-checkbox-label.sf-left {
  flex-direction: row;
}
.sf-checkbox-label.sf-top {
  align-items: flex-start;
  flex-direction: column;
}
.sf-checkbox-label.sf-bottom {
  align-items: flex-start;
  flex-direction: column-reverse;
}
.sf-checkbox-label .sf-label {
  font-weight: var(--sf-font-weight-normal);
}
.sf-checkbox-ripple {
  border-radius: var(--sf-radius-full);
  position: relative;
}
.sf-checkbox-ripple-me {
  padding: var(--sf-spacing-7);
}
.sf-checkbox-ripple-sm {
  padding: var(--sf-spacing-6);
}
.sf-checkbox-ripple-la {
  padding: var(--sf-spacing-10);
}
.sf-checkbox-wrapper.sf-primary .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-primary .sf-checkbox-checked {
  background: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
  color: rgb(var(--sf-color-on-primary));
}
.sf-checkbox-wrapper.sf-primary:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-primary), 0.12);
}
.sf-checkbox-wrapper.sf-success .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-success .sf-checkbox-checked {
  background: rgb(var(--sf-color-success));
  border-color: rgb(var(--sf-color-success));
  color: rgb(var(--sf-color-success-text));
}
.sf-checkbox-wrapper.sf-success:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-success), 0.12);
}
.sf-checkbox-wrapper.sf-info .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-info .sf-checkbox-checked {
  background: rgb(var(--sf-color-info));
  border-color: rgb(var(--sf-color-info));
  color: rgb(var(--sf-color-info-text));
}
.sf-checkbox-wrapper.sf-info:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-info), 0.12);
}
.sf-checkbox-wrapper.sf-warning .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-warning .sf-checkbox-checked {
  background: rgb(var(--sf-color-warning));
  border-color: rgb(var(--sf-color-warning));
  color: rgb(var(--sf-color-warning-text));
}
.sf-checkbox-wrapper.sf-warning:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-warning), 0.12);
}
.sf-checkbox-wrapper.sf-error .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-error .sf-checkbox-checked {
  background: rgb(var(--sf-color-error));
  border-color: rgb(var(--sf-color-error));
  color: rgb(var(--sf-color-error-text));
}
.sf-checkbox-wrapper.sf-error:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-error), 0.12);
}
.sf-checkbox-small {
  line-height: var(--sf-line-height-xs);
  gap: var(--sf-spacing-4);
  font-size: var(--sf-font-size-xs);
}
.sf-checkbox-medium {
  line-height: var(--sf-line-height-sm);
  gap: var(--sf-spacing-3);
  font-size: var(--sf-font-size-sm);
}
.sf-checkbox-large {
  line-height: var(--sf-line-height-sm);
  gap: var(--sf-spacing-4);
  font-size: var(--sf-font-size-sm);
}