@syncfusion/react-buttons/styles/check-box/material3.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(--color-sf-primary), 0.08);
}
.sf-checkbox-frame-sm {
  height: 14px;
  width: 14px;
}
.sf-checkbox-frame-la {
  height: 18px;
  width: 18px;
}
.sf-checkbox-frame-me {
  width: 16px;
  height: 16px;
}
.sf-checkbox-icons {
  border: 2px solid;
  border-radius: 2px;
  display: flex;
  flex-direction: inherit;
}
.sf-checkbox-checked,
.sf-checkbox-indeterminate {
  background-color: rgb(var(--color-sf-primary));
  border-color: rgb(var(--color-sf-primary));
  color: rgb(var(--color-sf-on-primary));
}
.sf-checkbox-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 0;
  color: rgb(var(--color-sf-on-surface));
  gap: 8px;
}
.sf-checkbox-label.sf-right {
  flex-direction: row-reverse;
}
.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-ripple {
  border-radius: 50%;
  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 {
  width: 34px;
  height: 34px;
}
.sf-checkbox-ripple-sm {
  width: 28px;
  height: 28px;
}
.sf-checkbox-ripple-la {
  width: 40px;
  height: 40px;
}
.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 {
  flex-direction: column-reverse;
}
.sf-checkbox-wrapper.sf-rtl:not(.sf-top):not(.sf-bottom) {
  flex-direction: row-reverse;
}
.sf-checkbox-wrapper.sf-primary .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-primary .sf-checkbox-checked {
  background: rgb(var(--color-sf-primary));
  border-color: rgb(var(--color-sf-primary));
  color: rgb(var(--color-sf-on-primary));
}
.sf-checkbox-wrapper.sf-primary:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-primary:hover .sf-checkbox-ripple {
  background: rgba(var(--color-sf-primary), 0.12);
}
.sf-checkbox-wrapper.sf-success .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-success .sf-checkbox-checked {
  background: rgb(var(--color-sf-success));
  border-color: rgb(var(--color-sf-success));
  color: rgb(var(--color-sf-success-text));
}
.sf-checkbox-wrapper.sf-success:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-success:hover .sf-checkbox-ripple {
  background: rgba(var(--color-sf-success), 0.12);
}
.sf-checkbox-wrapper.sf-info .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-info .sf-checkbox-checked {
  background: rgb(var(--color-sf-info));
  border-color: rgb(var(--color-sf-info));
  color: rgb(var(--color-sf-info-text));
}
.sf-checkbox-wrapper.sf-info:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-info:hover .sf-checkbox-ripple {
  background: rgba(var(--color-sf-info), 0.12);
}
.sf-checkbox-wrapper.sf-warning .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-warning .sf-checkbox-checked {
  background: rgb(var(--color-sf-warning));
  border-color: rgb(var(--color-sf-warning));
  color: rgb(var(--color-sf-warning-text));
}
.sf-checkbox-wrapper.sf-warning:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-warning:hover .sf-checkbox-ripple {
  background: rgba(var(--color-sf-warning), 0.12);
}
.sf-checkbox-wrapper.sf-error .sf-checkbox-indeterminate,
.sf-checkbox-wrapper.sf-error .sf-checkbox-checked {
  background: rgb(var(--color-sf-error));
  border-color: rgb(var(--color-sf-error));
  color: rgb(var(--color-sf-error-text));
}
.sf-checkbox-wrapper.sf-error:focus .sf-checkbox-ripple, .sf-checkbox-wrapper.sf-error:hover .sf-checkbox-ripple {
  background: rgba(var(--color-sf-error), 0.12);
}