@syncfusion/react-buttons/styles/switch/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-switch {
  position: relative;
  height: var(--sf-spacing-1);
  width: var(--sf-spacing-1);
  opacity: var(--sf-spacing-0);
  pointer-events: none;
}
.sf-switch-wrapper {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sf-switch-label {
  cursor: pointer;
  align-items: center;
  gap: var(--sf-spacing-8);
  font-size: var(--sf-font-size-base);
  line-height: var(--sf-line-height-base);
  font-weight: var(--sf-font-weight-normal);
}
.sf-switch-label.sf-left, .sf-switch-label.sf-right {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.sf-switch-label.sf-top, .sf-switch-label.sf-bottom {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.sf-switch-track {
  position: relative;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
  height: var(--sf-spacing-28);
  width: calc(var(--sf-spacing) * 3.75);
  border-radius: var(--sf-radius-full);
  border: var(--sf-spacing-2) solid;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1);
  -webkit-tap-highlight-color: transparent;
}
.sf-switch-track:active .sf-switch-handle {
  padding: var(--sf-spacing-12);
  inset-inline-start: calc(var(--sf-spacing) * -0.1);
}
.sf-switch-track:active .sf-switch-track.sf-switch-track-checked .sf-switch-handle {
  padding: var(--sf-spacing-12);
}
.sf-switch-track:has(.sf-switch-track-label) {
  width: calc(var(--sf-spacing) * 3.75);
}
.sf-switch-track:has(.sf-switch-track-label) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-track:has(.sf-switch-track-label .sf-icon) {
  width: calc(var(--sf-spacing) * 3.75);
}
.sf-switch-track:has(.sf-switch-track-label .sf-icon) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-handle {
  position: absolute;
  border-radius: var(--sf-radius-full);
  box-sizing: border-box;
  padding: var(--sf-spacing-8);
  transform: translateX(var(--sf-spacing-4));
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), width 200ms cubic-bezier(0.2, 0, 0, 1), height 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.sf-switch-handle.sf-switch-handle-checked {
  padding: var(--sf-spacing-10);
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-handle.sf-switch-handle-icon {
  padding: var(--sf-spacing-10);
}
.sf-switch-state-layer {
  position: absolute;
  border-radius: var(--sf-radius-full);
  pointer-events: none;
  width: calc(var(--sf-spacing) * 2.25);
  height: calc(var(--sf-spacing) * 2.25);
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}
.sf-switch-icon {
  position: absolute;
  font-size: var(--sf-font-size-sm);
}
.sf-switch-icon svg {
  width: var(--sf-font-size-sm);
  height: var(--sf-font-size-sm);
}
.sf-switch-track-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  font-size: var(--sf-font-size-sm);
  font-weight: var(--sf-font-weight-normal);
  white-space: nowrap;
  line-height: var(--sf-line-height-sm);
  -webkit-tap-highlight-color: transparent;
}
.sf-switch-track-label > * {
  font-size: var(--sf-font-size-base);
}
.sf-switch-track-label-on {
  inset-inline-start: var(--sf-spacing-8);
}
.sf-switch-track-label-off {
  inset-inline-end: var(--sf-spacing-8);
}
.sf-switch-track-label-on:has(*) {
  inset-inline-start: var(--sf-spacing-8);
}
.sf-switch-track-label-off:has(*) {
  inset-inline-end: var(--sf-spacing-8);
}
.sf-switch-wrapper.sf-small .sf-switch-label {
  font-size: var(--sf-font-size-sm);
  line-height: var(--sf-line-height-sm);
  gap: var(--sf-spacing-8);
}
.sf-switch-wrapper.sf-small .sf-switch-track {
  height: var(--sf-spacing-24);
  width: var(--sf-spacing-48);
}
.sf-switch-wrapper.sf-small .sf-switch-track:active .sf-switch-handle {
  padding: var(--sf-spacing-10);
  inset-inline-start: calc(var(--sf-spacing) * -0.01);
}
.sf-switch-wrapper.sf-small .sf-switch-track:active .sf-switch-track.sf-switch-track-checked .sf-switch-handle {
  padding: var(--sf-spacing-11);
}
.sf-switch-wrapper.sf-small .sf-switch-track:has(.sf-switch-track-label) {
  width: var(--sf-spacing-48);
}
.sf-switch-wrapper.sf-small .sf-switch-track:has(.sf-switch-track-label) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(var(--sf-spacing-24));
}
.sf-switch-wrapper.sf-small .sf-switch-track:has(.sf-switch-track-label .sf-icon) {
  width: var(--sf-spacing-48);
}
.sf-switch-wrapper.sf-small .sf-switch-track:has(.sf-switch-track-label .sf-icon) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(var(--sf-spacing-24));
}
.sf-switch-wrapper.sf-small .sf-switch-handle {
  padding: var(--sf-spacing-6);
  transform: translateX(var(--sf-spacing-4));
}
.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-handle-checked {
  padding: var(--sf-spacing-9);
  transform: translateX(var(--sf-spacing-24));
}
.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-handle-icon {
  padding: var(--sf-spacing-9);
}
.sf-switch-wrapper.sf-small .sf-switch-state-layer {
  width: var(--sf-spacing-28);
  height: var(--sf-spacing-28);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label {
  font-size: var(--sf-font-size-xs);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label > * {
  font-size: var(--sf-font-size-xs);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label-on {
  inset-inline-start: var(--sf-spacing-6);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label-off {
  inset-inline-end: var(--sf-spacing-6);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label-on:has(*) {
  inset-inline-start: var(--sf-spacing-6);
}
.sf-switch-wrapper.sf-small .sf-switch-track-label-off:has(*) {
  inset-inline-end: var(--sf-spacing-6);
}
.sf-switch-wrapper.sf-small .sf-switch-icon {
  font-size: var(--sf-font-size-2xs);
}
.sf-switch-wrapper.sf-small .sf-switch-icon svg {
  width: var(--sf-font-size-2xs);
  height: var(--sf-font-size-2xs);
}
.sf-switch-wrapper.sf-large .sf-switch-label {
  font-size: var(--sf-font-size-base);
  line-height: var(--sf-line-height-base);
  gap: var(--sf-spacing-8);
}
.sf-switch-wrapper.sf-large .sf-switch-track {
  height: var(--sf-spacing-32);
  width: calc(var(--sf-spacing) * 4);
}
.sf-switch-wrapper.sf-large .sf-switch-track:active .sf-switch-handle {
  padding: var(--sf-spacing-14);
  inset-inline-start: calc(var(--sf-spacing) * -0.1);
}
.sf-switch-wrapper.sf-large .sf-switch-track:active .sf-switch-track.sf-switch-track-checked .sf-switch-handle {
  padding: var(--sf-spacing-14);
}
.sf-switch-wrapper.sf-large .sf-switch-track:has(.sf-switch-track-label) {
  width: calc(var(--sf-spacing) * 4);
}
.sf-switch-wrapper.sf-large .sf-switch-track:has(.sf-switch-track-label) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-wrapper.sf-large .sf-switch-track:has(.sf-switch-track-label .sf-icon) {
  width: calc(var(--sf-spacing) * 4);
}
.sf-switch-wrapper.sf-large .sf-switch-track:has(.sf-switch-track-label .sf-icon) .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-wrapper.sf-large .sf-switch-handle {
  padding: var(--sf-spacing-8);
  transform: translateX(var(--sf-spacing-5));
}
.sf-switch-wrapper.sf-large .sf-switch-handle.sf-switch-handle-checked {
  padding: var(--sf-spacing-12);
  transform: translateX(calc(var(--sf-spacing) * 2.125));
}
.sf-switch-wrapper.sf-large .sf-switch-handle.sf-switch-handle-icon {
  padding: var(--sf-spacing-12);
}
.sf-switch-wrapper.sf-large .sf-switch-state-layer {
  width: var(--sf-spacing-40);
  height: var(--sf-spacing-40);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label {
  font-size: var(--sf-font-size-sm);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label > * {
  font-size: var(--sf-font-size-lg);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label-on {
  inset-inline-start: var(--sf-spacing-10);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label-off {
  inset-inline-end: var(--sf-spacing-10);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label-on:has(*) {
  inset-inline-start: var(--sf-spacing-10);
}
.sf-switch-wrapper.sf-large .sf-switch-track-label-off:has(*) {
  inset-inline-end: var(--sf-spacing-10);
}
.sf-switch-wrapper.sf-large .sf-switch-icon {
  font-size: var(--sf-font-size-base);
}
.sf-switch-wrapper.sf-large .sf-switch-icon svg {
  width: var(--sf-font-size-base);
  height: var(--sf-font-size-base);
}
.sf-rtl.sf-switch-wrapper .sf-switch-handle {
  inset-inline-start: 0;
  transform: translateX(calc(-1 * var(--sf-spacing-4)));
}
.sf-rtl.sf-switch-wrapper .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(-1 * var(--sf-spacing) * 2.125));
}
.sf-rtl.sf-switch-wrapper .sf-switch-state-layer {
  inset-inline-end: 50%;
  inset-inline-start: auto;
  transform: translate(-50%, -50%);
}
.sf-rtl.sf-switch-wrapper.sf-small .sf-switch-handle {
  transform: translateX(calc(-1 * var(--sf-spacing-4)));
}
.sf-rtl.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(-1 * var(--sf-spacing-24)));
}
.sf-rtl.sf-switch-wrapper.sf-large .sf-switch-handle {
  transform: translateX(calc(-1 * var(--sf-spacing-5)));
}
.sf-rtl.sf-switch-wrapper.sf-large .sf-switch-handle.sf-switch-handle-checked {
  transform: translateX(calc(-1 * var(--sf-spacing) * 2.125));
}
.sf-switch-wrapper .sf-switch-track:hover .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-surface-variant));
}
.sf-switch-wrapper .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-primary-container));
}
.sf-switch-wrapper .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-primary), 0.08);
}
.sf-switch-wrapper .sf-switch-track:hover .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-on-surface), 0.08);
}
.sf-switch-wrapper .sf-switch:focus-visible + .sf-switch-track {
  box-shadow: var(--sf-color-shadow-focus-ring1);
  background-color: rgb(var(--sf-color-surface-variant));
}
.sf-switch-wrapper .sf-switch:focus-visible + .sf-switch-track .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-surface-variant));
}
.sf-switch-wrapper .sf-switch:focus-visible + .sf-switch-track.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-primary));
}
.sf-switch-wrapper .sf-switch:focus-visible + .sf-switch-track.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-primary), 0.12);
}
.sf-switch-wrapper .sf-switch:focus-visible + .sf-switch-track .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-on-surface), 0.12);
}
.sf-switch-wrapper .sf-switch-track:active {
  box-shadow: none;
  background-color: rgb(var(--sf-color-surface-variant));
}
.sf-switch-wrapper .sf-switch-track:active .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-surface-variant));
}
.sf-switch-wrapper .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-primary), 0.12);
}
.sf-switch-wrapper .sf-switch-track:active .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-on-surface), 0.12);
}
.sf-switch-wrapper.sf-disabled {
  opacity: 1;
}
.sf-switch-wrapper.sf-disabled .sf-switch-track {
  background-color: rgb(var(--sf-color-surface-variant));
  border-color: rgba(var(--sf-color-on-surface), 0.12);
}
.sf-switch-wrapper.sf-disabled .sf-switch-track.sf-switch-track-checked {
  background-color: rgba(var(--sf-color-on-surface), 0.12);
  border-color: transparent;
}
.sf-switch-wrapper.sf-disabled .sf-switch-label {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-switch-wrapper.sf-disabled .sf-switch-handle {
  background-color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-switch-wrapper.sf-disabled .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-surface));
}
.sf-switch-wrapper.sf-disabled .sf-switch-icon {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-switch-wrapper .sf-switch-track-label > * {
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-switch-wrapper .sf-switch-track-checked .sf-switch-track-label > * {
  color: rgb(var(--sf-color-on-primary));
}
.sf-switch-label {
  color: rgb(var(--sf-color-on-surface));
}
.sf-switch-track {
  background-color: rgb(var(--sf-color-surface-variant));
  border-color: rgb(var(--sf-color-outline));
}
.sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
}
.sf-switch-handle {
  background-color: rgb(var(--sf-color-outline));
}
.sf-switch-handle.sf-switch-handle-checked {
  background-color: rgb(var(--sf-color-on-primary));
}
.sf-switch-icon {
  color: rgb(var(--sf-color-inverse-on-surface));
}
.sf-switch-track-checked .sf-switch-icon {
  color: rgb(var(--sf-color-primary));
}
.sf-switch-track-label {
  color: rgb(var(--sf-color-inverse-on-surface));
}
.sf-switch-track-label-on {
  color: rgb(var(--sf-color-on-primary));
}
.sf-switch-track-label-off {
  color: rgb(var(--sf-color-on-surface));
}
.sf-switch-wrapper.sf-primary .sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
}
.sf-switch-wrapper.sf-primary .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-primary));
}
.sf-switch-wrapper.sf-primary .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle,
.sf-switch-wrapper.sf-primary .sf-switch-track:active.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-primary-container));
}
.sf-switch-wrapper.sf-primary .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer,
.sf-switch-wrapper.sf-primary .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-primary), 0.08);
}
.sf-switch-wrapper.sf-success .sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-success));
  border-color: rgb(var(--sf-color-success));
}
.sf-switch-wrapper.sf-success .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-success));
}
.sf-switch-wrapper.sf-success .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle,
.sf-switch-wrapper.sf-success .sf-switch-track:active.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-success-container));
}
.sf-switch-wrapper.sf-success .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer,
.sf-switch-wrapper.sf-success .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-success), 0.08);
}
.sf-switch-wrapper.sf-warning .sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-warning));
  border-color: rgb(var(--sf-color-warning));
}
.sf-switch-wrapper.sf-warning .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-warning));
}
.sf-switch-wrapper.sf-warning .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle,
.sf-switch-wrapper.sf-warning .sf-switch-track:active.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-warning-container));
}
.sf-switch-wrapper.sf-warning .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer,
.sf-switch-wrapper.sf-warning .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-warning), 0.08);
}
.sf-switch-wrapper.sf-error .sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-error));
  border-color: rgb(var(--sf-color-error));
}
.sf-switch-wrapper.sf-error .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-error));
}
.sf-switch-wrapper.sf-error .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle,
.sf-switch-wrapper.sf-error .sf-switch-track:active.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-error-container));
}
.sf-switch-wrapper.sf-error .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer,
.sf-switch-wrapper.sf-error .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-error), 0.08);
}
.sf-switch-wrapper.sf-info .sf-switch-track.sf-switch-track-checked {
  background-color: rgb(var(--sf-color-info));
  border-color: rgb(var(--sf-color-info));
}
.sf-switch-wrapper.sf-info .sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-on-info));
}
.sf-switch-wrapper.sf-info .sf-switch-track:hover.sf-switch-track-checked .sf-switch-handle,
.sf-switch-wrapper.sf-info .sf-switch-track:active.sf-switch-track-checked .sf-switch-handle {
  background-color: rgb(var(--sf-color-info-container));
}
.sf-switch-wrapper.sf-info .sf-switch-track:hover.sf-switch-track-checked .sf-switch-state-layer,
.sf-switch-wrapper.sf-info .sf-switch-track:active.sf-switch-track-checked .sf-switch-state-layer {
  background-color: rgba(var(--sf-color-info), 0.08);
}