@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;
}
.sf-checkbox-wrapper {
  user-select: none;
  display: flex;
}
.sf-checkbox-wrapper:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-focus .sf-checkbox-ripple, .sf-checkbox-wrapper:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-primary), 0.08);
}
.sf-checkbox-frame-sm {
  font-size: var(--sf-font-size-sm);
}
.sf-checkbox-frame-sm svg {
  font-size: var(--sf-font-size-xs);
}
.sf-checkbox-frame-la {
  font-size: var(--sf-font-size-lg);
}
.sf-checkbox-frame-la svg {
  font-size: var(--sf-font-size-base);
}
.sf-checkbox-frame-me {
  font-size: var(--sf-font-size-base);
}
.sf-checkbox-frame-me svg {
  font-size: 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-direction: inherit;
  height: 1em;
  width: 1em;
}
.sf-checkbox-checked,
.sf-checkbox-indeterminate {
  background-color: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
  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));
  gap: var(--sf-spacing-8);
}
.sf-checkbox-label.sf-right {
  flex-direction: row-reverse;
}
.sf-checkbox-label.sf-top {
  align-items: flex-start;
  flex-direction: column;
  line-height: 0;
}
.sf-checkbox-label.sf-bottom {
  align-items: flex-start;
  flex-direction: column-reverse;
  line-height: 0;
}
.sf-checkbox-ripple {
  border-radius: var(--sf-radius-full);
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.sf-checkbox-horizontal {
  top: 50%;
  left: 0%;
  transform: translate(-27%, -50%);
}
.sf-checkbox-vertical {
  transform: translate(-25%, 0%);
}
.sf-left .sf-checkbox-ripple:not(.sf-rtl *) {
  left: auto;
  right: 0%;
  transform: translate(25%, -50%);
}
.sf-checkbox-ripple-me {
  padding: var(--sf-spacing-16);
}
.sf-checkbox-ripple-sm {
  padding: var(--sf-spacing-14);
}
.sf-checkbox-ripple-la {
  padding: var(--sf-spacing-18);
}
.sf-rtl .sf-right .sf-checkbox-ripple {
  left: auto;
  right: 0%;
  transform: translate(25%, -50%);
}
.sf-rtl .sf-checkbox-vertical {
  transform: translate(25%, 0%);
}
.sf-checkbox-wrapper.sf-rtl:not(.sf-top):not(.sf-bottom) {
  flex-direction: row-reverse;
}
.sf-checkbox-wrapper.sf-rtl {
  flex-direction: column-reverse;
}
.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:focus .sf-checkbox-ripple, .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:focus .sf-checkbox-ripple, .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:focus .sf-checkbox-ripple, .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:focus .sf-checkbox-ripple, .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:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-error:hover .sf-checkbox-ripple {
  background: rgba(var(--sf-color-error), 0.12);
}
.sf-checkbox-small,
.sf-checkbox-medium {
  line-height: var(--sf-line-height-sm);
}
.sf-checkbox-large {
  line-height: var(--sf-line-height-base);
}