@syncfusion/react-buttons/styles/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-btn {
  border: 1px solid;
  letter-spacing: var(--sf-letter-spacing-wide);
  cursor: pointer;
  position: relative;
  justify-content: center;
  display: inline-flex;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  font-weight: var(--sf-font-weight-medium);
}
.sf-btn.sf-btn-me svg {
  font-size: var(--sf-font-size-base);
}
.sf-btn.sf-btn-la svg {
  font-size: var(--sf-font-size-xl);
}
.sf-btn.sf-btn-sm svg {
  font-size: var(--sf-font-size-base);
}
.sf-btn-vertical {
  flex-direction: column;
  padding: var(--sf-spacing-8) var(--sf-spacing-16);
}
.sf-btn-la:not(.sf-icon-btn) {
  gap: var(--sf-spacing-12);
}
.sf-btn-sm:not(.sf-icon-btn) {
  gap: var(--sf-spacing-8);
}
.sf-btn-me:not(.sf-icon-btn) {
  gap: var(--sf-spacing-10);
}
.sf-btn-la:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-11) var(--sf-spacing-24);
}
.sf-btn-sm:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-5) var(--sf-spacing-12);
}
.sf-btn-me:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-9) var(--sf-spacing-16);
}
.sf-btn svg {
  display: block;
}
.sf-btn:hover, .sf-btn:focus {
  text-decoration: none;
}
.sf-icon-btn.sf-icon-btn-sm {
  padding: var(--sf-spacing-7);
}
.sf-icon-btn.sf-icon-btn-me {
  padding: var(--sf-spacing-11);
}
.sf-icon-btn.sf-icon-btn-la {
  padding: var(--sf-spacing-13);
}
.sf-btn-sm:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-sm);
}
.sf-btn-me:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-sm);
}
.sf-btn-la:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-base);
}
.sf-rtl.sf-btn-top {
  flex-direction: column-reverse;
}
.sf-rtl.sf-btn-bottom {
  flex-direction: column;
}
.sf-btn {
  color: rgb(var(--sf-color-on-surface));
}
.sf-btn:active {
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-primary {
  background: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
  color: rgb(var(--sf-color-on-primary));
}
.sf-btn-primary:hover {
  background: rgb(var(--sf-color-primary), 0.8);
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-primary:focus {
  outline: rgb(var(--sf-color-white)) 0 solid;
}
.sf-btn-primary:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.8);
}
.sf-btn-primary.sf-active, .sf-btn-primary:active {
  background: rgb(var(--sf-color-primary), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-outlined {
  background: transparent;
}
.sf-btn-outlined:hover {
  background: rgb(var(--sf-color-primary), 0.1);
  border-color: rgb(var(--sf-color-outline));
  box-shadow: none;
}
.sf-btn-outlined:focus {
  background: rgb(var(--sf-color-primary), 0.1);
  border: 1px solid rgb(var(--sf-color-outline));
}
.sf-btn-outlined:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-outlined.sf-active, .sf-btn-outlined:active {
  background: rgb(var(--sf-color-primary), 0.1);
  box-shadow: none;
}
.sf-btn-standard {
  background: transparent;
  border-color: transparent;
}
.sf-btn-standard:hover {
  background: rgb(var(--sf-color-primary), 0.1);
  box-shadow: none;
}
.sf-btn-standard:focus {
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-standard:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-standard:active, .sf-btn-standard.sf-active {
  box-shadow: none;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-primary.sf-btn-standard, .sf-btn-primary.sf-btn-outlined {
  color: rgb(var(--sf-color-primary));
}
.sf-btn-secondary {
  background-color: rgb(var(--sf-color-surface), 0.1);
}
.sf-btn-secondary:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-secondary:active, .sf-btn-secondary.sf-active {
  background: rgb(var(--sf-color-on-surface), 0.1);
}
.sf-btn-secondary.sf-btn-standard:active, .sf-btn-secondary.sf-btn-standard.sf-active {
  background: rgba(var(--sf-color-on-surface), 0.12);
  box-shadow: none;
}
.sf-btn-secondary.sf-btn-filled:hover {
  box-shadow: var(--sf-elevation-2);
  background: rgb(var(--sf-color-on-surface), 0.1);
}
.sf-btn-secondary.sf-btn-filled:active, .sf-btn-secondary.sf-btn-filled.sf-active {
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-success {
  color: rgb(var(--sf-color-success));
}
.sf-btn-success:hover {
  background: rgb(var(--sf-color-success), 0.25);
}
.sf-btn-success:focus {
  background: rgb(var(--sf-color-success), 0.25);
}
.sf-btn-success:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-success:active, .sf-btn-success.sf-active {
  background: rgb(var(--sf-color-success), 0.1);
  box-shadow: none;
}
.sf-btn-success.sf-btn-outlined {
  border-color: rgb(var(--sf-color-success));
}
.sf-btn-success.sf-btn-outlined.sf-active, .sf-btn-success.sf-btn-outlined:active {
  background: rgb(var(--sf-color-success), 0.1);
}
.sf-btn-success.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-success));
  border-color: rgb(var(--sf-color-success));
}
.sf-btn-success.sf-btn-filled:hover {
  background: rgb(var(--sf-color-success), 0.8);
  color: rgb(var(--sf-color-success-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-success.sf-btn-filled:focus {
  background: rgb(var(--sf-color-success), 0.8);
}
.sf-btn-success.sf-btn-filled.sf-active, .sf-btn-success.sf-btn-filled:active {
  background: rgb(var(--sf-color-success), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-info {
  color: rgb(var(--sf-color-info));
}
.sf-btn-info:hover {
  background: rgb(var(--sf-color-info), 0.25);
}
.sf-btn-info:focus {
  background: rgb(var(--sf-color-info), 0.25);
}
.sf-btn-info:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-info:active, .sf-btn-info.sf-active {
  background: rgb(var(--sf-color-info), 0.1);
  box-shadow: none;
}
.sf-btn-info.sf-btn-outlined {
  border-color: rgb(var(--sf-color-info));
}
.sf-btn-info.sf-btn-outlined.sf-active, .sf-btn-info.sf-btn-outlined:active {
  background: rgb(var(--sf-color-info), 0.1);
}
.sf-btn-info.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-info));
  border-color: rgb(var(--sf-color-info));
}
.sf-btn-info.sf-btn-filled:hover {
  background: rgb(var(--sf-color-info), 0.8);
  color: rgb(var(--sf-color-info-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-info.sf-btn-filled:focus {
  background: rgb(var(--sf-color-info), 0.8);
}
.sf-btn-info.sf-btn-filled.sf-active, .sf-btn-info.sf-btn-filled:active {
  background: rgb(var(--sf-color-info), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-warning {
  color: rgb(var(--sf-color-warning));
}
.sf-btn-warning:hover {
  background: rgb(var(--sf-color-warning), 0.25);
}
.sf-btn-warning:focus {
  box-shadow: none;
  background: rgb(var(--sf-color-warning), 0.25);
}
.sf-btn-warning:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-warning.sf-active, .sf-btn-warning:active {
  background: rgb(var(--sf-color-warning), 0.1);
  box-shadow: none;
}
.sf-btn-warning.sf-btn-outlined {
  border-color: rgb(var(--sf-color-warning));
}
.sf-btn-warning.sf-btn-outlined.sf-active, .sf-btn-warning.sf-btn-outlined:active {
  background: rgb(var(--sf-color-warning), 0.1);
}
.sf-btn-warning.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-warning));
  border-color: rgb(var(--sf-color-warning));
}
.sf-btn-warning.sf-btn-filled:hover {
  background: rgb(var(--sf-color-warning), 0.8);
  color: rgb(var(--sf-color-warning-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-warning.sf-btn-filled:focus {
  background: rgb(var(--sf-color-warning), 0.8);
}
.sf-btn-warning.sf-btn-filled.sf-active, .sf-btn-warning.sf-btn-filled:active {
  background: rgb(var(--sf-color-warning), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-error {
  color: rgb(var(--sf-color-error));
}
.sf-btn-error:hover {
  background: rgb(var(--sf-color-error), 0.25);
}
.sf-btn-error:focus {
  background: rgb(var(--sf-color-error), 0.25);
}
.sf-btn-error:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-error:active, .sf-btn-error.sf-active {
  background: rgb(var(--sf-color-error), 0.1);
  box-shadow: none;
}
.sf-btn-error.sf-btn-outlined {
  border-color: rgb(var(--sf-color-error));
}
.sf-btn-error.sf-btn-outlined.sf-active, .sf-btn-error.sf-btn-outlined:active {
  background: rgb(var(--sf-color-error), 0.1);
}
.sf-btn-error.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-error));
  border-color: rgb(var(--sf-color-error));
}
.sf-btn-error.sf-btn-filled:hover {
  background: rgb(var(--sf-color-error), 0.8);
  color: rgb(var(--sf-color-error-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-error.sf-btn-filled:focus {
  background: rgb(var(--sf-color-error), 0.8);
}
.sf-btn-error.sf-btn-filled.sf-active, .sf-btn-error.sf-btn-filled:active {
  background: rgb(var(--sf-color-error), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn:disabled {
  background: transparent;
  border-color: rgba(var(--sf-color-secondary), 0.12);
  color: rgba(var(--sf-color-on-surface), 0.38);
  pointer-events: none;
  box-shadow: none;
}
.sf-btn-link:hover {
  text-decoration: underline;
}
.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);
}
.sf-radio-label {
  color: rgba(var(--sf-color-on-surface));
  display: flex;
  vertical-align: middle;
  align-items: center;
  white-space: normal;
  position: relative;
  line-height: normal;
  user-select: none;
  cursor: pointer;
}
.sf-radio-label::before, .sf-radio-label::after {
  border: 1px solid;
  border-radius: var(--sf-radius-full);
  box-sizing: border-box;
  content: "";
  position: absolute;
}
.sf-radio-label::before {
  border-color: rgba(var(--sf-color-primary));
}
.sf-radio:checked + label::after {
  background-color: rgba(var(--sf-color-primary));
  color: rgba(var(--sf-color-primary));
  transform: scale(1);
}
.sf-radio-label:focus .sf-ripple-container, .sf-radio-label.sf-focus .sf-ripple-container, .sf-radio-label:hover .sf-ripple-container {
  background: rgba(var(--sf-color-primary), 0.08);
}
.sf-radio {
  appearance: none;
  height: 1px;
  opacity: 0;
  width: 1px;
}
.sf-radio + label::before {
  background-color: transparent;
  border-color: rgba(var(--sf-color-on-surface-variant));
}
.sf-radio + label::after {
  transform: scale(0);
}
.sf-radio + label .sf-ripple-container {
  border-radius: var(--sf-radius-full);
  position: absolute;
  z-index: 1;
}
.sf-radio:disabled + label {
  cursor: default;
  pointer-events: none;
}
.sf-radio:disabled + label::before {
  background-color: transparent;
  border-color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-radio:disabled + label .sf-ripple-container {
  background-color: transparent;
}
.sf-radio:disabled + label .sf-ripple-container::after {
  background-color: transparent;
}
.sf-radio:disabled + label .sf-label {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-radio-me .sf-label {
  padding-inline-start: var(--sf-spacing-24);
  font-size: var(--sf-font-size-sm);
}
.sf-radio-me::before {
  padding: var(--sf-spacing-8);
}
.sf-radio-me::after {
  padding: var(--sf-spacing-3);
  inset-inline-start: var(--sf-spacing-5);
}
.sf-radio-me .sf-ripple-container {
  padding: var(--sf-spacing-16);
  inset-inline-start: calc(var(--sf-spacing) * -0.4375);
}
.sf-radio-me.sf-bottom .sf-label {
  padding-top: var(--sf-spacing-48);
  padding-inline-start: var(--sf-spacing-0);
}
.sf-radio-me.sf-right.sf-radio-label {
  flex-direction: row-reverse;
}
.sf-radio-me.sf-right .sf-label {
  padding-inline-end: var(--sf-spacing-24);
  padding-inline-start: 0;
}
.sf-radio-me.sf-right::after {
  inset-inline-start: auto;
  inset-inline-end: var(--sf-spacing-5);
}
.sf-radio-me.sf-right .sf-ripple-container {
  inset-inline-start: auto;
  inset-inline-end: calc(var(--sf-spacing) * -0.4375);
}
.sf-radio-sm .sf-label {
  padding-inline-start: var(--sf-spacing-22);
  font-size: var(--sf-font-size-xs);
}
.sf-radio-sm::before {
  padding: var(--sf-spacing-7);
}
.sf-radio-sm::after {
  padding: var(--sf-spacing-3);
  inset-inline-start: var(--sf-spacing-4);
}
.sf-radio-sm .sf-ripple-container {
  padding: var(--sf-spacing-11);
  inset-inline-start: calc(var(--sf-spacing) * -0.1875);
}
.sf-radio-sm.sf-bottom .sf-label {
  padding-top: var(--sf-spacing-40);
  padding-inline-start: var(--sf-spacing-0);
}
.sf-radio-sm.sf-right.sf-radio-label {
  flex-direction: row-reverse;
}
.sf-radio-sm.sf-right .sf-label {
  padding-inline-end: var(--sf-spacing-22);
  padding-inline-start: 0;
}
.sf-radio-sm.sf-right::after {
  inset-inline-start: auto;
  inset-inline-end: var(--sf-spacing-4);
}
.sf-radio-sm.sf-right .sf-ripple-container {
  inset-inline-start: auto;
  inset-inline-end: calc(var(--sf-spacing) * -0.1875);
}
.sf-radio-la .sf-label {
  padding-inline-start: var(--sf-spacing-28);
  font-size: var(--sf-font-size-base);
}
.sf-radio-la::before {
  padding: var(--sf-spacing-10);
}
.sf-radio-la::after {
  padding: var(--sf-spacing-4);
  inset-inline-start: var(--sf-spacing-6);
}
.sf-radio-la .sf-ripple-container {
  padding: var(--sf-spacing-20);
  inset-inline-start: calc(var(--sf-spacing) * -0.5625);
}
.sf-radio-la.sf-bottom .sf-label {
  padding-top: var(--sf-spacing-48);
  padding-inline-start: var(--sf-spacing-0);
}
.sf-radio-la.sf-right.sf-radio-label {
  flex-direction: row-reverse;
}
.sf-radio-la.sf-right .sf-label {
  padding-inline-end: var(--sf-spacing-28);
  padding-inline-start: 0;
}
.sf-radio-la.sf-right::after {
  inset-inline-start: auto;
  inset-inline-end: var(--sf-spacing-6);
}
.sf-radio-la.sf-right .sf-ripple-container {
  inset-inline-start: auto;
  inset-inline-end: calc(var(--sf-spacing) * -0.5625);
}
.sf-radio-secondary .sf-radio:checked + label::after {
  background-color: rgb(var(--sf-color-on-surface-variant), 1);
  border-color: rgb(var(--sf-color-on-surface-variant), 1);
}
.sf-radio-secondary .sf-radio-label::before {
  border-color: rgb(var(--sf-color-on-surface-variant), 1);
}
.sf-radio-secondary .sf-radio-label:hover .sf-ripple-container {
  background: rgb(var(--sf-color-on-surface-variant), 0.1);
}
.sf-radio-success .sf-radio:checked + label::after {
  background-color: rgb(var(--sf-color-success), 1);
  border-color: rgb(var(--sf-color-success), 1);
}
.sf-radio-success .sf-radio-label::before {
  border-color: rgb(var(--sf-color-success), 1);
}
.sf-radio-success .sf-radio-label:hover .sf-ripple-container {
  background: rgb(var(--sf-color-success), 0.08);
}
.sf-radio-warning .sf-radio:checked + label::after {
  background-color: rgb(var(--sf-color-warning), 1);
  border-color: rgb(var(--sf-color-warning), 1);
}
.sf-radio-warning .sf-radio-label::before {
  border-color: rgb(var(--sf-color-warning), 1);
}
.sf-radio-warning .sf-radio-label:hover .sf-ripple-container {
  background: rgb(var(--sf-color-warning), 0.08);
}
.sf-radio-info .sf-radio:checked + label::after {
  background-color: rgb(var(--sf-color-info), 1);
  border-color: rgb(var(--sf-color-info), 1);
}
.sf-radio-info .sf-radio-label::before {
  border-color: rgb(var(--sf-color-info), 1);
}
.sf-radio-info .sf-radio-label:hover .sf-ripple-container {
  background: rgb(var(--sf-color-info), 0.08);
}
.sf-radio-error .sf-radio:checked + label::after {
  background-color: rgb(var(--sf-color-error), 1);
  border-color: rgb(var(--sf-color-error), 1);
}
.sf-radio-error .sf-radio-label::before {
  border-color: rgb(var(--sf-color-error), 1);
}
.sf-radio-error .sf-radio-label:hover .sf-ripple-container {
  background: rgb(var(--sf-color-error), 0.08);
}
.sf-chip-list {
  display: flex;
  padding: var(--sf-spacing-0);
}
.sf-chip-list:not(.sf-chip) {
  flex-wrap: wrap;
}
.sf-chip {
  border: 1px solid;
  border-radius: var(--sf-radius-16);
  font-size: var(--sf-font-size-sm);
  font-weight: var(--sf-font-weight-medium);
  margin: var(--sf-spacing-4);
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  line-height: var(--sf-line-height-sm);
  outline: none;
  overflow: hidden;
  padding: var(--sf-spacing-5) var(--sf-spacing-10);
  position: relative;
  user-select: none;
}
.sf-chip.sf-chip-has-icon {
  padding-block: var(--sf-spacing-3);
}
.sf-chip-avatar,
.sf-chip-icon,
.sf-chip-image {
  height: var(--sf-spacing-24);
  width: var(--sf-spacing-24);
}
.sf-chip-avatar {
  border-radius: var(--sf-radius-12);
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
  font-size: var(--sf-font-size-sm);
}
.sf-chip-icon {
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
}
.sf-chip-delete {
  border-radius: var(--sf-radius-full);
  margin-inline: var(--sf-spacing-8) calc(var(--sf-spacing) * -0.125);
  font-size: var(--sf-font-size-base);
}
.sf-chip-image {
  border-radius: var(--sf-radius-full);
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
}
.sf-chip-trailing-url {
  height: var(--sf-spacing-22);
  width: var(--sf-spacing-22);
  border-radius: var(--sf-radius-full);
  margin-inline: var(--sf-spacing-8) calc(var(--sf-spacing) * -0.375);
}
.sf-chip-leading-image,
.sf-chip-trailing-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-chip-delete svg,
.sf-chip-selectable-icon svg {
  font-size: var(--sf-font-size-base);
}
.sf-chip-multi-selection .sf-active .sf-chip-icon,
.sf-chip-multi-selection .sf-active .sf-chip-avatar,
.sf-chip-icon-wrap .sf-chip-selectable-icon,
.sf-chip-avatar-wrap .sf-chip-selectable-icon {
  display: none;
}
.sf-chip .sf-chip-selectable-icon {
  height: var(--sf-spacing-24);
  overflow: hidden;
  transition: width 300ms, margin 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}
.sf-chip.sf-active .sf-chip-selectable-icon {
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
  display: flex;
  width: var(--sf-spacing-24);
}
.sf-chip-avatar {
  background-color: rgb(var(--sf-color-primary-container));
}
.sf-chip.sf-disabled {
  opacity: 1;
}
.sf-chip.sf-outline {
  border-width: 1px;
}
.sf-chip-selection .sf-chip.sf-active, .sf-chip-selection .sf-chip.sf-active.sf-focused {
  background-color: rgba(var(--sf-color-on-surface), 0.08);
}
.sf-chip {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1));
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-focused {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-focused.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip:active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-primary {
  color: rgb(var(--sf-color-on-primary));
}
.sf-chip.sf-primary .sf-chip-avatar {
  background-color: rgb(var(--sf-color-primary));
}
.sf-chip.sf-primary {
  background: rgb(var(--sf-color-primary));
}
.sf-chip.sf-primary:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.08), rgba(var(--sf-color-on-primary), 0.08)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-primary.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.08), rgba(var(--sf-color-on-primary), 0.08)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip.sf-primary.sf-active, .sf-chip.sf-primary:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.12), rgba(var(--sf-color-on-primary), 0.12)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-success {
  color: rgb(var(--sf-color-success-text));
}
.sf-chip.sf-success .sf-chip-avatar {
  background-color: rgb(var(--sf-color-success));
}
.sf-chip.sf-success {
  background: rgb(var(--sf-color-success));
}
.sf-chip.sf-success:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.08), rgba(var(--sf-color-success-text), 0.08)), rgba(var(--sf-color-success));
}
.sf-chip.sf-success.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.08), rgba(var(--sf-color-success-text), 0.08)), rgba(var(--sf-color-success));
}
.sf-chip.sf-success.sf-focused.sf-active, .sf-chip.sf-success.sf-active, .sf-chip.sf-success:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.12), rgba(var(--sf-color-success-text), 0.12)), rgba(var(--sf-color-success));
}
.sf-chip.sf-info {
  color: rgb(var(--sf-color-info-text));
}
.sf-chip.sf-info .sf-chip-avatar {
  background-color: rgb(var(--sf-color-info));
}
.sf-chip.sf-info {
  background: rgb(var(--sf-color-info));
}
.sf-chip.sf-info:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.08), rgba(var(--sf-color-info-text), 0.08)), rgba(var(--sf-color-info));
}
.sf-chip.sf-info.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.08), rgba(var(--sf-color-info-text), 0.08)), rgba(var(--sf-color-info));
}
.sf-chip.sf-info.sf-focused.sf-active, .sf-chip.sf-info.sf-active, .sf-chip.sf-info:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.12), rgba(var(--sf-color-info-text), 0.12)), rgba(var(--sf-color-info));
}
.sf-chip.sf-warning {
  color: rgb(var(--sf-color-warning-text));
}
.sf-chip.sf-warning .sf-chip-avatar {
  background-color: rgb(var(--sf-color-warning));
}
.sf-chip.sf-warning {
  background: rgb(var(--sf-color-warning));
}
.sf-chip.sf-warning:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.08), rgba(var(--sf-color-warning-text), 0.08)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-warning.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.08), rgba(var(--sf-color-warning-text), 0.08)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip.sf-warning.sf-active, .sf-chip.sf-warning:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.12), rgba(var(--sf-color-warning-text), 0.12)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-error {
  color: rgb(var(--sf-color-error-text));
}
.sf-chip.sf-error .sf-chip-avatar {
  background-color: rgb(var(--sf-color-error));
}
.sf-chip.sf-error {
  background: rgb(var(--sf-color-error));
}
.sf-chip.sf-error:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.08), rgba(var(--sf-color-error-text), 0.08)), rgba(var(--sf-color-error));
}
.sf-chip.sf-error.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.08), rgba(var(--sf-color-error-text), 0.08)), rgba(var(--sf-color-error));
}
.sf-chip.sf-error.sf-focused.sf-active, .sf-chip.sf-error.sf-active, .sf-chip.sf-error:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.12), rgba(var(--sf-color-error-text), 0.12)), rgba(var(--sf-color-error));
}
.sf-chip.sf-outline {
  background: transparent;
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-outline:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-focused.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline:active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-outline.sf-primary {
  color: rgb(var(--sf-color-primary));
}
.sf-chip.sf-outline.sf-primary .sf-chip-avatar {
  color: rgb(var(--sf-color-on-primary));
}
.sf-chip.sf-outline.sf-primary {
  background: transparent;
}
.sf-chip.sf-outline.sf-primary:hover {
  background: rgb(var(--sf-color-primary), 0.08);
}
.sf-chip.sf-outline.sf-primary.sf-focused {
  background: rgb(var(--sf-color-primary), 0.12);
}
.sf-chip.sf-outline.sf-primary.sf-focused.sf-active, .sf-chip.sf-outline.sf-primary.sf-active, .sf-chip.sf-outline.sf-primary:active {
  background: rgb(var(--sf-color-primary), 0.16);
}
.sf-chip.sf-outline.sf-success {
  color: rgb(var(--sf-color-success));
}
.sf-chip.sf-outline.sf-success .sf-chip-avatar {
  color: rgb(var(--sf-color-success-text));
}
.sf-chip.sf-outline.sf-success {
  background: transparent;
}
.sf-chip.sf-outline.sf-success:hover {
  background: rgb(var(--sf-color-success), 0.08);
}
.sf-chip.sf-outline.sf-success.sf-focused {
  background: rgb(var(--sf-color-success), 0.12);
}
.sf-chip.sf-outline.sf-success.sf-focused.sf-active, .sf-chip.sf-outline.sf-success.sf-active, .sf-chip.sf-outline.sf-success:active {
  background: rgb(var(--sf-color-success), 0.16);
}
.sf-chip.sf-outline.sf-info {
  color: rgb(var(--sf-color-info));
}
.sf-chip.sf-outline.sf-info .sf-chip-avatar {
  color: rgb(var(--sf-color-info-text));
}
.sf-chip.sf-outline.sf-info {
  background: transparent;
}
.sf-chip.sf-outline.sf-info:hover {
  background: rgb(var(--sf-color-info), 0.08);
}
.sf-chip.sf-outline.sf-info.sf-focused {
  background: rgb(var(--sf-color-info), 0.12);
}
.sf-chip.sf-outline.sf-info.sf-focused.sf-active, .sf-chip.sf-outline.sf-info.sf-active, .sf-chip.sf-outline.sf-info:active {
  background: rgb(var(--sf-color-info), 0.16);
}
.sf-chip.sf-outline.sf-warning {
  color: rgb(var(--sf-color-warning));
}
.sf-chip.sf-outline.sf-warning .sf-chip-avatar {
  color: rgb(var(--sf-color-warning-text));
}
.sf-chip.sf-outline.sf-warning {
  background: transparent;
}
.sf-chip.sf-outline.sf-warning:hover {
  background: rgb(var(--sf-color-warning), 0.08);
}
.sf-chip.sf-outline.sf-warning.sf-focused {
  background: rgb(var(--sf-color-warning), 0.12);
}
.sf-chip.sf-outline.sf-warning.sf-focused.sf-active, .sf-chip.sf-outline.sf-warning.sf-active, .sf-chip.sf-outline.sf-warning:active {
  background: rgb(var(--sf-color-warning), 0.16);
}
.sf-chip.sf-outline.sf-error {
  color: rgb(var(--sf-color-error));
}
.sf-chip.sf-outline.sf-error .sf-chip-avatar {
  color: rgb(var(--sf-color-error-text));
}
.sf-chip.sf-outline.sf-error {
  background: transparent;
}
.sf-chip.sf-outline.sf-error:hover {
  background: rgb(var(--sf-color-error), 0.08);
}
.sf-chip.sf-outline.sf-error.sf-focused {
  background: rgb(var(--sf-color-error), 0.12);
}
.sf-chip.sf-outline.sf-error.sf-focused.sf-active, .sf-chip.sf-outline.sf-error.sf-active, .sf-chip.sf-outline.sf-error:active {
  background: rgb(var(--sf-color-error), 0.16);
}
.sf-chip.sf-disabled {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-disabled .sf-chip-avatar {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-outline.sf-disabled {
  color: rgba(var(--sf-color-on-surface), 0.38);
  background: transparent;
}
.sf-chip.sf-outline.sf-disabled .sf-chip-avatar {
  background-color: rgba(var(--sf-color-secondary), 0.12);
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-chip-variant-disabled {
  background: rgba(var(--sf-color-secondary), 0.12);
}
.sf-chip.sf-chip-variant-disabled .sf-chip-avatar {
  background-color: rgba(var(--sf-color-secondary), 0.12);
}
.sf-fab.sf-btn {
  align-items: center;
  border-radius: var(--sf-radius-12);
  display: inline-flex;
  min-height: var(--sf-spacing-40);
  min-width: var(--sf-spacing-40);
  padding: var(--sf-spacing-0) var(--sf-spacing-12);
  position: absolute;
  z-index: 100000;
}
.sf-fab.sf-btn .sf-btn-icon,
.sf-fab.sf-btn .sf-btn-content {
  margin: var(--sf-spacing-0) var(--sf-spacing-6);
}
.sf-fab.sf-btn.sf-fab-fixed {
  position: fixed;
}
.sf-fab.sf-btn.sf-fab-top {
  top: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-bottom {
  bottom: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-left {
  left: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-right {
  right: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-left.sf-fab-center {
  left: 50%;
  transform: translateX(-50%);
}
.sf-fab.sf-btn.sf-fab-top.sf-fab-middle {
  top: 50%;
  transform: translateY(-50%);
}
.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-left.sf-fab-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center {
  right: 50%;
  transform: translateX(50%);
}
.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center {
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
}
.sf-fab-hidden {
  visibility: hidden;
}
.sf-small.sf-fab.sf-btn {
  border-radius: var(--sf-radius-8);
  min-height: var(--sf-spacing-32);
  min-width: var(--sf-spacing-32);
  padding: var(--sf-spacing-0) var(--sf-spacing-8);
}
.sf-small.sf-fab.sf-btn.sf-btn-icon,
.sf-small.sf-fab.sf-btn .sf-btn-content {
  margin: var(--sf-spacing-0) var(--sf-spacing-4);
}
.sf-large.sf-fab.sf-btn {
  border-radius: var(--sf-radius-16);
  min-height: var(--sf-spacing-56);
  min-width: var(--sf-spacing-56);
  padding: var(--sf-spacing-0) var(--sf-spacing-16);
}
.sf-large.sf-fab.sf-btn.sf-btn-icon,
.sf-large.sf-fab.sf-btn .sf-btn-content {
  margin: var(--sf-spacing-0) var(--sf-spacing-8);
}
.sf-fab.sf-btn {
  box-shadow: var(--sf-elevation-3);
}
.sf-fab.sf-btn:hover:not(:focus), .sf-fab.sf-btn:active, .sf-fab.sf-btn.sf-active, .sf-fab.sf-btn:disabled, .sf-fab.sf-btn:focus {
  box-shadow: var(--sf-elevation-3);
}